Merge pull request #1158 from BlueWallet/rnfixes

Rnfixes
2025-02-23 15:20:55 +01:00 · 2020-05-31 21:12:03 +01:00 · 2020-05-31 21:12:03 +01:00 · 252ea9fc8b
commit 252ea9fc8b
parent c2fe768647 9b0b43723c
5 changed files with 127 additions and 55 deletions
--- a/BlueComponents.js
+++ b/BlueComponents.js
@ -427,8 +427,8 @@ export const BlueNavigationStyle = (navigation, withNavigationCloseButton = fals
      fontWeight: '600',
      color: BlueApp.settings.foregroundColor,
    },
-    headerTintColor: BlueApp.settings.foregroundColor,
    headerRight,
+    headerTintColor: BlueApp.settings.foregroundColor,
    // headerBackTitle: null,
    headerBackTitleVisible: false,
  };
@ -2096,7 +2096,13 @@ export class BlueAddressInput extends Component {
        <TouchableOpacity
          disabled={this.props.isLoading}
          onPress={() => {
-            NavigationService.navigate('ScanQRCode', { onBarScanned: this.props.onBarScanned, launchedBy: this.props.launchedBy });
+            NavigationService.navigate('ScanQRCodeRoot', {
+              screen: 'ScanQRCode',
+              params: {
+                launchedBy: this.props.launchedBy,
+                onBarScanned: this.props.onBarScanned,
+              },
+            });
            Keyboard.dismiss();
          }}
          style={{
@ -2264,6 +2270,12 @@ export class BlueBitcoinAmount extends Component {
    unit: BitcoinUnit.BTC,
  };

+  textInput = React.createRef();
+
+  handleTextInputOnPress = () => {
+    this.textInput.current.focus();
+  };
+
  render() {
    const amount = this.props.amount || '0';
    let localCurrency = loc.formatBalanceWithoutSuffix(amount, BitcoinUnit.LOCAL_CURRENCY, false);
@ -2276,7 +2288,7 @@ export class BlueBitcoinAmount extends Component {
    }
    if (amount === BitcoinUnit.MAX) localCurrency = ''; // we dont want to display NaN
    return (
-      <TouchableWithoutFeedback disabled={this.props.pointerEvents === 'none'} onPress={() => this.textInput.focus()}>
+      <TouchableWithoutFeedback disabled={this.props.pointerEvents === 'none'} onPress={this.handleTextInputOnPress}>
        <View>
          <View style={{ flexDirection: 'row', justifyContent: 'center', paddingTop: 16, paddingBottom: 2 }}>
            <TextInput
@ -2312,7 +2324,7 @@ export class BlueBitcoinAmount extends Component {
              }}
              placeholder="0"
              maxLength={10}
-              ref={textInput => (this.textInput = textInput)}
+              ref={this.textInput}
              editable={!this.props.isLoading && !this.props.disabled}
              value={amount}
              placeholderTextColor={this.props.disabled ? BlueApp.settings.buttonDisabledTextColor : BlueApp.settings.alternativeTextColor2}
--- a/Navigation.js
+++ b/Navigation.js
@ -1,6 +1,6 @@
 // import { createAppContainer } from '@react-navigation/native';
 import React from 'react';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createStackNavigator, TransitionPresets } from '@react-navigation/stack';

 import Settings from './screen/settings/settings';
 import About from './screen/settings/about';
@ -54,11 +54,29 @@ import LappBrowser from './screen/lnd/browser';
 import LNDCreateInvoice from './screen/lnd/lndCreateInvoice';
 import LNDViewInvoice from './screen/lnd/lndViewInvoice';
 import LNDViewAdditionalInvoiceInformation from './screen/lnd/lndViewAdditionalInvoiceInformation';
+import { Platform } from 'react-native';

+const defaultScreenOptions =
+  Platform.OS === 'ios'
+    ? ({ route, navigation }) => ({
+        gestureEnabled: true,
+        cardOverlayEnabled: true,
+        headerStatusBarHeight: navigation.dangerouslyGetState().routes.indexOf(route) > 0 ? 10 : undefined,
+        ...TransitionPresets.ModalPresentationIOS,
+      })
+    : undefined;
+const defaultStackScreenOptions =
+  Platform.OS === 'ios'
+    ? {
+        gestureEnabled: true,
+        cardOverlayEnabled: true,
+        headerStatusBarHeight: 10,
+      }
+    : undefined;
 const WalletsStack = createStackNavigator();
 const WalletsRoot = () => (
-  <WalletsStack.Navigator screenOptions={{ headerTitle: null, headerBackTitleVisible: false }}>
-    <WalletsStack.Screen name="WalletsList" component={WalletsList} options={{ headerShown: false }} />
+  <WalletsStack.Navigator>
+    <WalletsStack.Screen name="WalletsList" component={WalletsList} options={WalletsList.navigationOptions} />
    <WalletsStack.Screen name="WalletTransactions" component={WalletTransactions} options={WalletTransactions.navigationOptions} />
    <WalletsStack.Screen name="WalletDetails" component={WalletDetails} options={WalletDetails.navigationOptions} />
    <WalletsStack.Screen name="TransactionDetails" component={TransactionDetails} options={TransactionDetails.navigationOptions} />
@ -75,7 +93,10 @@ const WalletsRoot = () => (
          backgroundColor: '#FFFFFF',
          borderBottomWidth: 0,
          elevation: 0,
+          shadowColor: 'transparent',
        },
+        title: '',
+        headerBackTitleVisible: false,
        headerTintColor: '#0c2550',
      }}
    />
@ -123,16 +144,27 @@ const WalletsRoot = () => (

 const AddWalletStack = createStackNavigator();
 const AddWalletRoot = () => (
-  <AddWalletStack.Navigator screenOptions={{}}>
+  <AddWalletStack.Navigator screenOptions={defaultStackScreenOptions}>
    <AddWalletStack.Screen name="AddWallet" component={AddWallet} options={AddWallet.navigationOptions} />
    <AddWalletStack.Screen name="ImportWallet" component={ImportWallet} options={ImportWallet.navigationOptions} />
-    <AddWalletStack.Screen name="PleaseBackup" component={PleaseBackup} options={PleaseBackup.navigationOptions} />
+    <AddWalletStack.Screen
+      name="PleaseBackup"
+      component={PleaseBackup}
+      options={PleaseBackup.navigationOptions}
+      screenOptions={{
+        headerShown: false,
+        swipeEnabled: false,
+        gestureEnabled: false,
+      }}
+    />
    <AddWalletStack.Screen
      name="PleaseBackupLNDHub"
      component={PleaseBackupLNDHub}
-      swipeEnabled={false}
-      gesturesEnabled={false}
-      options={{ headerShown: false }}
+      screenOptions={{
+        headerShown: false,
+        swipeEnabled: false,
+        gestureEnabled: false,
+      }}
    />
  </AddWalletStack.Navigator>
 );
@ -140,7 +172,7 @@ const AddWalletRoot = () => (
 // CreateTransactionStackNavigator === SendDetailsStack
 const SendDetailsStack = createStackNavigator();
 const SendDetailsRoot = () => (
-  <SendDetailsStack.Navigator>
+  <SendDetailsStack.Navigator screenOptions={defaultStackScreenOptions}>
    <SendDetailsStack.Screen name="SendDetails" component={SendDetails} options={SendDetails.navigationOptions} />
    <SendDetailsStack.Screen name="Confirm" component={Confirm} options={Confirm.navigationOptions} />
    <SendDetailsStack.Screen
@ -166,9 +198,9 @@ const SendDetailsRoot = () => (

 const LNDCreateInvoiceStack = createStackNavigator();
 const LNDCreateInvoiceRoot = () => (
-  <LNDCreateInvoiceStack.Navigator>
+  <LNDCreateInvoiceStack.Navigator screenOptions={defaultStackScreenOptions}>
    <LNDCreateInvoiceStack.Screen name="LNDCreateInvoice" component={LNDCreateInvoice} options={LNDCreateInvoice.navigationOptions} />
-    <LNDCreateInvoiceStack.Screen name="SelectWallet" component={SelectWallet} options={{ headerLeft: null }} />
+    <LNDCreateInvoiceStack.Screen name="SelectWallet" component={SelectWallet} />
    <LNDCreateInvoiceStack.Screen
      name="LNDViewInvoice"
      component={LNDViewInvoice}
@ -187,19 +219,19 @@ const LNDCreateInvoiceRoot = () => (
 // LightningScanInvoiceStackNavigator === ScanLndInvoiceStack
 const ScanLndInvoiceStack = createStackNavigator();
 const ScanLndInvoiceRoot = () => (
-  <ScanLndInvoiceStack.Navigator>
+  <ScanLndInvoiceStack.Navigator screenOptions={defaultStackScreenOptions}>
    <ScanLndInvoiceStack.Screen name="ScanLndInvoice" component={ScanLndInvoice} options={ScanLndInvoice.navigationOptions} />
-    <ScanLndInvoiceStack.Screen name="SelectWallet" component={SelectWallet} options={{ headerLeft: null }} />
+    <ScanLndInvoiceStack.Screen name="SelectWallet" component={SelectWallet} />
    <ScanLndInvoiceStack.Screen name="Success" component={Success} options={Success.navigationOptions} />
  </ScanLndInvoiceStack.Navigator>
 );

 const HandleOffchainAndOnChainStack = createStackNavigator();
 const HandleOffchainAndOnChain = () => (
-  <HandleOffchainAndOnChainStack.Navigator screenOptions={{ headerBackTitleVisible: false }}>
+  <HandleOffchainAndOnChainStack.Navigator screenOptions={{ headerBackTitleVisible: false, ...defaultStackScreenOptions }}>
    {/* screens */}
    <HandleOffchainAndOnChainStack.Screen name="SelectWallet" component={SelectWallet} options={SelectWallet.navigationOptions} />
-    <HandleOffchainAndOnChainStack.Screen name="ScanQRCode" component={ScanQRCode} options={ScanQRCode.navigationOptions} />
+    <HandleOffchainAndOnChainStack.Screen name="ScanQRCode" component={ScanQRCodeRoot} />
    {/* stacks */}
    <HandleOffchainAndOnChainStack.Screen name="ScanLndInvoice" component={ScanLndInvoiceRoot} options={{ headerShown: false }} />
    <HandleOffchainAndOnChainStack.Screen name="SendDetails" component={SendDetailsRoot} options={{ headerShown: false }} />
@ -208,15 +240,22 @@ const HandleOffchainAndOnChain = () => (

 const AztecoRedeemStack = createStackNavigator();
 const AztecoRedeemRoot = () => (
-  <AztecoRedeemStack.Navigator>
+  <AztecoRedeemStack.Navigator screenOptions={defaultStackScreenOptions}>
    <AztecoRedeemStack.Screen name="AztecoRedeem" component={AztecoRedeem} options={AztecoRedeem.navigationOptions} />
    <AztecoRedeemStack.Screen name="SelectWallet" component={SelectWallet} options={{ headerLeft: null }} />
  </AztecoRedeemStack.Navigator>
 );

+const ScanQRCodeStack = createStackNavigator();
+const ScanQRCodeRoot = () => (
+  <ScanQRCodeStack.Navigator mode="modal" screenOptions={{ headerShown: false }}>
+    <RootStack.Screen name="ScanQRCode" component={ScanQRCode} />
+  </ScanQRCodeStack.Navigator>
+);
+
 const RootStack = createStackNavigator();
 const Navigation = () => (
-  <RootStack.Navigator mode="modal">
+  <RootStack.Navigator mode="modal" screenOptions={defaultScreenOptions}>
    {/* stacks */}
    <RootStack.Screen name="WalletsRoot" component={WalletsRoot} options={{ headerShown: false }} />
    <RootStack.Screen name="AddWalletRoot" component={AddWalletRoot} options={{ headerShown: false }} />
@ -225,6 +264,11 @@ const Navigation = () => (
    <RootStack.Screen name="ScanLndInvoiceRoot" component={ScanLndInvoiceRoot} options={{ headerShown: false }} />
    <RootStack.Screen name="HandleOffchainAndOnChain" component={HandleOffchainAndOnChain} options={{ headerShown: false }} />
    <RootStack.Screen name="AztecoRedeemRoot" component={AztecoRedeemRoot} options={{ headerShown: false }} />
+    <RootStack.Screen
+      name="ScanQRCodeRoot"
+      component={ScanQRCodeRoot}
+      options={{ ...TransitionPresets.ModalTransition, headerShown: false }}
+    />
    {/* screens */}
    <RootStack.Screen name="WalletExport" component={WalletExport} options={WalletExport.navigationOptions} />
    <RootStack.Screen name="WalletXpub" component={WalletXpub} options={WalletXpub.navigationOptions} />
@ -232,7 +276,6 @@ const Navigation = () => (
    <RootStack.Screen name="Marketplace" component={Marketplace} options={Marketplace.navigationOptions} />
    <RootStack.Screen name="SelectWallet" component={SelectWallet} options={{ headerLeft: null }} />
    <RootStack.Screen name="ReceiveDetails" component={ReceiveDetails} options={ReceiveDetails.navigationOptions} />
-    <RootStack.Screen name="ScanQRCode" component={ScanQRCode} options={{ headerShown: false }} />
    <RootStack.Screen name="LappBrowser" component={LappBrowser} options={LappBrowser.navigationOptions} />
  </RootStack.Navigator>
 );
--- a/screen/lnd/lndCreateInvoice.js
+++ b/screen/lnd/lndCreateInvoice.js
@ -307,9 +307,12 @@ export default class LNDCreateInvoice extends Component {
      <TouchableOpacity
        disabled={this.state.isLoading}
        onPress={() => {
-          NavigationService.navigate('ScanQRCode', {
+          NavigationService.navigate('ScanQRCodeRoot', {
+            screen: 'ScanQRCode',
+            params: {
              onBarScanned: this.processLnurl,
              launchedBy: this.props.route.name,
+            },
          });
          Keyboard.dismiss();
        }}
--- a/screen/wallets/add.js
+++ b/screen/wallets/add.js
@ -116,12 +116,6 @@ const styles = StyleSheet.create({
 });

 export default class WalletsAdd extends Component {
-  static navigationOptions = ({ navigation }) => ({
-    ...BlueNavigationStyle(navigation, true),
-    title: loc.wallets.add.title,
-    headerLeft: null,
-  });
-
  constructor(props) {
    super(props);
    this.state = {
@ -402,10 +396,15 @@ export default class WalletsAdd extends Component {
  }
 }

+WalletsAdd.navigationOptions = ({ navigation }) => ({
+  ...BlueNavigationStyle(navigation, true),
+  title: loc.wallets.add.title,
+  headerLeft: null,
+});
+
 WalletsAdd.propTypes = {
  navigation: PropTypes.shape({
    navigate: PropTypes.func,
    goBack: PropTypes.func,
  }),
 };
-
--- a/screen/wallets/list.js
+++ b/screen/wallets/list.js
@ -22,6 +22,7 @@ import { AppStorage, PlaceholderWallet } from '../../class';
 import WalletImport from '../../class/wallet-import';
 import ActionSheet from '../ActionSheet';
 import ImagePicker from 'react-native-image-picker';
+import NavigationService from '../../NavigationService';
 const EV = require('../../events');
 const A = require('../../analytics');
 let BlueApp: AppStorage = require('../../BlueApp');
@ -148,6 +149,22 @@ const styles = StyleSheet.create({
 });

 export default class WalletsList extends Component {
+  static navigationOptions = ({ navigation, route }) => {
+    return {
+      title: '',
+      headerRight: () => (
+        <TouchableOpacity testID="SettingsButton" style={styles.headerTouch} onPress={() => NavigationService.navigate('Settings')}>
+          <Icon size={22} name="kebab-horizontal" type="octicon" color={BlueApp.settings.foregroundColor} />
+        </TouchableOpacity>
+      ),
+      headerStyle: {
+        shadowColor: 'transparent',
+        elevation: 0,
+        shadowOpacity: 0,
+      },
+    };
+  };
+
  walletsCarousel = React.createRef();

  constructor(props) {
@ -413,16 +430,6 @@ export default class WalletsList extends Component {
    );
  };

-  renderNavigationHeader = () => {
-    return (
-      <View style={styles.headerStyle}>
-        <TouchableOpacity testID="SettingsButton" style={styles.headerTouch} onPress={() => this.props.navigation.navigate('Settings')}>
-          <Icon size={22} name="kebab-horizontal" type="octicon" color={BlueApp.settings.foregroundColor} />
-        </TouchableOpacity>
-      </View>
-    );
-  };
-
  renderLocalTrader = () => {
    if (BlueApp.getWallets().length > 0 && !BlueApp.getWallets().some(wallet => wallet.type === PlaceholderWallet.type)) {
      return (
@ -528,10 +535,13 @@ export default class WalletsList extends Component {
  };

  onScanButtonPressed = () => {
-    this.props.navigation.navigate('ScanQRCode', {
+    this.props.navigation.navigate('ScanQRCodeRoot', {
+      screen: 'ScanQRCode',
+      params: {
        launchedBy: this.props.route.name,
        onBarScanned: this.onBarScanned,
        showFileImportButton: false,
+      },
    });
  };

@ -584,10 +594,13 @@ export default class WalletsList extends Component {
        if (buttonIndex === 1) {
          this.choosePhoto();
        } else if (buttonIndex === 2) {
-          this.props.navigation.navigate('ScanQRCode', {
+          this.props.navigation.navigate('ScanQRCodeRoot', {
+            screen: 'ScanQRCode',
+            params: {
              launchedBy: this.props.route.name,
-            onBarScanned: this.onBarCodeRead,
+              onBarScanned: this.onBarScanned,
              showFileImportButton: false,
+            },
          });
        } else if (buttonIndex === 3) {
          this.copyFromClipbard();
@ -607,10 +620,13 @@ export default class WalletsList extends Component {
        {
          text: 'Scan QR Code',
          onPress: () =>
-            this.props.navigation.navigate('ScanQRCode', {
+            this.props.navigation.navigate('ScanQRCodeRoot', {
+              screen: 'ScanQRCode',
+              params: {
                launchedBy: this.props.route.name,
-              onBarScanned: this.onBarCodeRead,
+                onBarScanned: this.onBarScanned,
                showFileImportButton: false,
+              },
            }),
        },
      ];
@ -632,7 +648,6 @@ export default class WalletsList extends Component {
    return (
      <View style={styles.root}>
        <View style={styles.walletsListWrapper}>
-          {this.renderNavigationHeader()}
          <SectionList
            refreshControl={<RefreshControl onRefresh={this.refreshTransactions} refreshing={!this.state.isFlatListRefreshControlHidden} />}
            renderItem={this.renderSectionItem}