react-navigation library upgrade fixes (#166)

src/components/ScreenTemplate.tsx

@@ -65,7 +65,11 @@ export class ScreenTemplate extends React.PureComponent<Props> {
           {children}
         </Container>
         {!!footer && (
-          <KeyboardAvoidingView behavior={Platform.OS == 'ios' ? 'padding' : undefined} style={styles.footer}>
+          <KeyboardAvoidingView
+            behavior={Platform.OS == 'ios' ? 'padding' : undefined}
+            style={styles.footer}
+            keyboardVerticalOffset={20}
+          >
             {footer}
           </KeyboardAvoidingView>
         )}

src/navigators/RootNavigator.tsx

@@ -21,14 +21,14 @@ import { PasswordNavigator } from './PasswordNavigator';
 const Stack = createStackNavigator<RootStackParams>();
 
 export const RootNavigator = () => (
-  <Stack.Navigator initialRouteName={Route.MainCardStackNavigator} headerMode="none" mode="modal">
+  <Stack.Navigator initialRouteName={Route.MainCardStackNavigator} headerMode="none">
     <Stack.Screen name={Route.MainCardStackNavigator} component={MainCardStackNavigator} />
     <Stack.Screen name={Route.ImportWalletQRCode} component={ImportWalletQRCodeScreen} />
     <Stack.Screen name={Route.ActionSheet} component={ActionSheet} options={modalOptions} />
     <Stack.Screen name={Route.UnlockTransaction} component={UnlockTransaction} />
     <Stack.Screen name={Route.PasswordNavigator} component={PasswordNavigator} />
     <Stack.Screen name={Route.EditText} component={EditTextScreen} />
-    <Stack.Screen name={Route.Message} component={MessageScreen} />
+    <Stack.Screen name={Route.Message} component={MessageScreen} options={{}} />
     <Stack.Screen name={Route.ExportWallet} component={ExportWalletScreen} />
     <Stack.Screen name={Route.ExportWalletXpub} component={ExportWalletXpubScreen} />
     <Stack.Screen name={Route.DeleteWallet} component={DeleteWalletScreen} />

src/screens/CreateWalletSuccessScreen.tsx

@@ -1,21 +1,25 @@
+import { CompositeNavigationProp } from '@react-navigation/native';
 import { StackNavigationProp } from '@react-navigation/stack';
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
 import { Button, Header, ScreenTemplate, Text, Chip } from 'app/components';
-import { MainCardStackNavigatorParams, Route } from 'app/consts';
+import { MainCardStackNavigatorParams, Route, MainTabNavigatorParams } from 'app/consts';
 import { palette, typography } from 'app/styles';
 
 const i18n = require('../../loc');
 
 interface Props {
-  navigation: StackNavigationProp<MainCardStackNavigatorParams, Route.CreateWallet>;
+  navigation: CompositeNavigationProp<
+    StackNavigationProp<MainTabNavigatorParams, Route.Dashboard>,
+    StackNavigationProp<MainCardStackNavigatorParams, Route.CreateWallet>
+  >;
   secret: string[];
 }
 
 export class CreateWalletSuccessScreen extends React.PureComponent<Props> {
   navigateBack = () => {
-    this.props.navigation.popToTop();
+    this.props.navigation.navigate(Route.Dashboard);
   };
 
   render() {

src/screens/DeleteWalletScreen.tsx

@@ -15,7 +15,7 @@ const i18n = require('../../loc');
 
 interface Props {
   navigation: CompositeNavigationProp<
-    StackNavigationProp<MainTabNavigatorParams, Route.ContactList>,
+    StackNavigationProp<MainTabNavigatorParams, Route.Dashboard>,
     StackNavigationProp<RootStackParams, Route.DeleteWallet>
   >;
   route: RouteProp<RootStackParams, Route.DeleteWallet>;

src/screens/ImportWalletQRCodeScreen.tsx

@@ -1,3 +1,4 @@
+import { CompositeNavigationProp } from '@react-navigation/native';
 import { StackNavigationProp } from '@react-navigation/stack';
 import React from 'react';
 import {
@@ -14,7 +15,7 @@ import { RNCamera } from 'react-native-camera';
 import { connect } from 'react-redux';
 
 import { images } from 'app/assets';
-import { Wallet, Route, RootStackParams } from 'app/consts';
+import { Wallet, Route, RootStackParams, MainTabNavigatorParams, MainCardStackNavigatorParams } from 'app/consts';
 import { CreateMessage, MessageType } from 'app/helpers/MessageCreator';
 import { sleep } from 'app/helpers/helpers';
 import { loadWallets, WalletsActionType } from 'app/state/wallets/actions';
@@ -47,7 +48,10 @@ interface BarCodeScanEvent {
 }
 
 interface Props {
-  navigation: StackNavigationProp<RootStackParams, Route.ImportWalletQRCode>;
+  navigation: CompositeNavigationProp<
+    StackNavigationProp<MainTabNavigatorParams, Route.Dashboard>,
+    StackNavigationProp<RootStackParams, Route.ImportWalletQRCode>
+  >;
   loadWallets: () => Promise<WalletsActionType>;
 }
 
@@ -57,10 +61,6 @@ interface State {
 }
 
 class ImportWalletQRCodeScreen extends React.Component<Props, State> {
-  static navigationOptions = {
-    header: null,
-  };
-
   cameraRef = React.createRef<RNCamera>();
   lastTimeIveBeenHere = now();
 
@@ -77,7 +77,7 @@ class ImportWalletQRCodeScreen extends React.Component<Props, State> {
       type: MessageType.error,
       buttonProps: {
         title: i18n.message.returnToDashboard,
-        onPress: () => this.props.navigation.popToTop(),
+        onPress: () => this.props.navigation.navigate(Route.Dashboard),
       },
     });
   };
@@ -89,7 +89,7 @@ class ImportWalletQRCodeScreen extends React.Component<Props, State> {
       type: MessageType.success,
       buttonProps: {
         title: i18n.message.returnToDashboard,
-        onPress: () => this.props.navigation.popToTop(),
+        onPress: () => this.props.navigation.navigate(Route.Dashboard),
       },
     });
 
@@ -112,14 +112,7 @@ class ImportWalletQRCodeScreen extends React.Component<Props, State> {
       this.props.loadWallets();
       this.props.navigation.goBack();
 
-    // Or is it a bare address?
-    // TODO: remove these hardcodes
-    if (event.data.indexOf('Y') === 0 || event.data.indexOf('R') === 0 || event.data.indexOf('royale') === 0) {
-      try {
-        watchAddr = event.data;
-      } catch (err) {
-        console.log(err.message);
-      }
+      this.showSuccessImportMessageScreen();
     }
     this.setState({ isLoading: true });
   };

src/screens/ImportWalletScreen.tsx

@@ -1,7 +1,7 @@
 import { CompositeNavigationProp } from '@react-navigation/native';
 import { StackNavigationProp } from '@react-navigation/stack';
 import React, { useState } from 'react';
-import { View, StyleSheet, Text } from 'react-native';
+import { View, StyleSheet, Text, Keyboard } from 'react-native';
 import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
 import { connect } from 'react-redux';
 
@@ -63,6 +63,7 @@ export const ImportWalletScreen = (props: Props) => {
     });
 
   const onImportButtonPress = async () => {
+    Keyboard.dismiss();
     CreateMessage({
       title: i18n.message.creatingWallet,
       description: i18n.message.creatingWalletDescription,

src/screens/ScanQrCodeScreen.tsx

@@ -16,16 +16,20 @@ interface Props {
   route: RouteProp<MainCardStackNavigatorParams, Route.ScanQrCode>;
 }
 export default class ScanQrCodeScreen extends React.PureComponent<Props> {
-  static navigationOptions = {
-    header: null,
+  state = {
+    scanned: false,
   };
-
-  onBarCodeScanned = async (scannedQr: any) => {
-    const { route, navigation } = this.props;
+  goBack = () => this.props.navigation.goBack();
+  onBarCodeScanned = (scannedQr: any) => {
+    if (this.state.scanned) {
+      return;
+    }
+    this.setState({ scanned: true });
+    const { route } = this.props;
     const { onBarCodeScan } = route.params;
     if (scannedQr.data) {
       onBarCodeScan(scannedQr.data);
-      navigation.goBack();
+      this.goBack();
     }
   };
 
@@ -49,7 +53,7 @@ export default class ScanQrCodeScreen extends React.PureComponent<Props> {
           <View style={styles.crosshairContainer}>
             <Image style={styles.crosshair} source={images.scanQRcrosshair} />
           </View>
-          <TouchableOpacity style={styles.closeButton} onPress={() => this.props.navigation.goBack()}>
+          <TouchableOpacity style={styles.closeButton} onPress={this.goBack}>
             <Image source={images.close} />
           </TouchableOpacity>
         </>

src/screens/SendCoinsConfirmScreen.tsx

@@ -86,7 +86,7 @@ export class SendCoinsConfirmScreen extends Component<Props> {
             type: MessageType.success,
             buttonProps: {
               title: i18n.message.returnToDashboard,
-              onPress: this.props.navigation.navigate(Route.MainCardStackNavigator),
+              onPress: () => this.props.navigation.navigate(Route.MainCardStackNavigator),
             },
           });
           this.setState({ isLoading: false });

src/screens/WalletDetailsScreen.tsx

@@ -4,16 +4,7 @@ import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { connect } from 'react-redux';
 
-import {
-  Button,
-  FlatButton,
-  Header,
-  ScreenTemplate,
-  WalletCard,
-  GenericInputItem,
-  ButtonType,
-  Text,
-} from 'app/components';
+import { Button, FlatButton, Header, ScreenTemplate, WalletCard, ButtonType, Text } from 'app/components';
 import { Wallet, Route, MainCardStackNavigatorParams, RootStackParams } from 'app/consts';
 import { BlueApp } from 'app/legacy';
 import { updateWallet, UpdateWalletAction } from 'app/state/wallets/actions';
@@ -74,6 +65,16 @@ export class WalletDetailsScreen extends React.PureComponent<Props, State> {
     BlueApp.saveToDisk();
   };
 
+  editAmount = () => {
+    this.props.navigation.navigate(Route.EditText, {
+      title: i18n.wallets.details.nameEdit,
+      label: i18n.wallets.details.nameLabel,
+      onSave: this.setLabel,
+      value: this.state.label,
+      validate: this.validationError,
+    });
+  };
+
   render() {
     const { wallet } = this.props.route.params;
     const isWatchOnly = wallet.type === WatchOnlyWallet.type;
@@ -102,13 +103,12 @@ export class WalletDetailsScreen extends React.PureComponent<Props, State> {
           <WalletCard wallet={wallet} containerStyle={styles.walletContainerInner} />
         </View>
         <View style={styles.nameInputContainer}>
-          <GenericInputItem
-            title={i18n.wallets.details.nameEdit}
-            label={i18n.wallets.details.nameLabel}
-            value={label}
-            onSave={this.setLabel}
-            validate={this.validationError}
-          />
+          <View style={styles.labelInput}>
+            <Text style={styles.typeLabel}>{i18n.wallets.details.nameLabel}</Text>
+            <Text style={styles.label} onPress={this.editAmount}>
+              {label}
+            </Text>
+          </View>
         </View>
         <View style={styles.typeContainer}>
           <Text style={styles.typeLabel}>{i18n.wallets.details.typeLabel}</Text>
@@ -149,6 +149,13 @@ const styles = StyleSheet.create({
     color: palette.textGrey,
     ...typography.overline,
   },
+  labelInput: {
+    width: '100%',
+    borderBottomColor: palette.border,
+    borderBottomWidth: 1,
+    marginBottom: 20,
+  },
+  label: { ...typography.caption, color: palette.textBlack, marginTop: 6, marginBottom: 4 },
   typeValue: {
     marginTop: 4,
     ...typography.caption,