REF: Use navigation event isFocused

2025-02-23 07:15:35 +01:00 · 2020-05-24 12:40:22 -04:00 · 2020-05-24 12:40:22 -04:00 · f52590b34c
commit f52590b34c
parent b4afad4248
6 changed files with 47 additions and 38 deletions
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@ -196,13 +196,13 @@ PODS:
    - React
  - react-native-blur (0.8.0):
    - React
-  - react-native-camera (3.23.1):
+  - react-native-camera (3.26.0):
    - React
-    - react-native-camera/RCT (= 3.23.1)
-    - react-native-camera/RN (= 3.23.1)
-  - react-native-camera/RCT (3.23.1):
+    - react-native-camera/RCT (= 3.26.0)
+    - react-native-camera/RN (= 3.26.0)
+  - react-native-camera/RCT (3.26.0):
    - React
-  - react-native-camera/RN (3.23.1):
+  - react-native-camera/RN (3.26.0):
    - React
  - react-native-document-picker (3.2.0):
    - React
@ -498,7 +498,7 @@ SPEC CHECKSUMS:
  react-native-biometrics: c892904948a32295b128f633bcc11eda020645c5
  react-native-blue-crypto: 23f1558ad3d38d7a2edb7e2f6ed1bc520ed93e56
  react-native-blur: cad4d93b364f91e7b7931b3fa935455487e5c33c
-  react-native-camera: 6fe72fd0a85732e2449928f9c59a2e0bf661ad3b
+  react-native-camera: 9e3d60336e221d62e5b72adf551ca31ff74a94b5
  react-native-document-picker: e3516aff0dcf65ee0785d9bcf190eb10e2261154
  react-native-image-picker: 3637d63fef7e32a230141ab4660d3ceb773c824f
  react-native-randombytes: 991545e6eaaf700b4ee384c291ef3d572e0b2ca8
--- a/package-lock.json
+++ b/package-lock.json
@ -11712,9 +11712,9 @@
      "from": "git+https://github.com/Overtorment/react-native-blue-crypto.git"
    },
    "react-native-camera": {
-      "version": "3.23.1",
-      "resolved": "https://registry.npmjs.org/react-native-camera/-/react-native-camera-3.23.1.tgz",
-      "integrity": "sha512-ghQT2IhiZiNMDgixD/MrfwgFx9arwOb2z79xDJ8dsz8DFcpBMbXjXZETaAK0WaZ/MWOaY84k0eGlx1hoVT77wQ==",
+      "version": "3.26.0",
+      "resolved": "https://registry.npmjs.org/react-native-camera/-/react-native-camera-3.26.0.tgz",
+      "integrity": "sha512-W/h89LN+jujlzc89nWpvukbfnbFO+Fskf6PR23pP6zminpJDIArHabWLd1mQoJ3p6r+gUJ8I4bgsxUmSMgLAgA==",
      "requires": {
        "prop-types": "^15.6.2"
      }
--- a/package.json
+++ b/package.json
@ -104,7 +104,7 @@
    "react-native": "0.61.5",
    "react-native-biometrics": "git+https://github.com/BlueWallet/react-native-biometrics.git#2.0.0",
    "react-native-blue-crypto": "git+https://github.com/Overtorment/react-native-blue-crypto.git",
-    "react-native-camera": "3.23.1",
+    "react-native-camera": "3.26.0",
    "react-native-default-preference": "1.4.1",
    "react-native-device-info": "4.0.1",
    "react-native-document-picker": "git+https://github.com/BlueWallet/react-native-document-picker.git#9ce83792db340d01b1361d24b19613658abef4aa",
--- a/screen/receive/details.js
+++ b/screen/receive/details.js
@ -1,7 +1,7 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { View, InteractionManager, Platform, TextInput, KeyboardAvoidingView, Keyboard, StyleSheet, ScrollView } from 'react-native';
 import QRCode from 'react-native-qrcode-svg';
-import { useNavigation, useNavigationParam } from 'react-navigation-hooks';
+import { useNavigation, useNavigationParam, useIsFocused } from 'react-navigation-hooks';
 import {
  BlueLoading,
  SafeBlueArea,
@ -38,6 +38,7 @@ const ReceiveDetails = () => {
  const [isCustom, setIsCustom] = useState(false);
  const [isCustomModalVisible, setIsCustomModalVisible] = useState(false);
  const { navigate, goBack } = useNavigation();
+  const isFocused = useIsFocused();

  const renderReceiveDetails = useCallback(async () => {
    console.log('receive/details - componentDidMount');
@ -210,7 +211,7 @@ const ReceiveDetails = () => {
              </BlueText>
            </>
          )}
-          {bip21encoded === undefined ? (
+          {bip21encoded === undefined && isFocused ? (
            <View style={{ alignItems: 'center', width: 300, height: 300 }}>
              <BlueLoading />
            </View>
--- a/screen/send/ScanQRCode.js
+++ b/screen/send/ScanQRCode.js
@ -4,23 +4,21 @@ import { Image, View, TouchableOpacity, Platform } from 'react-native';
 import { RNCamera } from 'react-native-camera';
 import { Icon } from 'react-native-elements';
 import ImagePicker from 'react-native-image-picker';
-import PropTypes from 'prop-types';
-import { useNavigationParam, useNavigation } from 'react-navigation-hooks';
+import { useNavigationParam, useNavigation, useIsFocused } from 'react-navigation-hooks';
 import DocumentPicker from 'react-native-document-picker';
 import RNFS from 'react-native-fs';
 const LocalQRCode = require('@remobile/react-native-qrcode-local-image');
 const createHash = require('create-hash');

-const ScanQRCode = ({
-  showCloseButton = true,
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  showFileImportButton = useNavigationParam('showFileImportButton') || false,
-}) => {
+const ScanQRCode = () => {
+  const showCloseButton = useNavigationParam('showCloseButton') || true;
+  const showFileImportButton = useNavigationParam('showFileImportButton') || false;
  const [isLoading, setIsLoading] = useState(false);
  const { navigate } = useNavigation();
  const launchedBy = useNavigationParam('launchedBy');
  const onBarScanned = useNavigationParam('onBarScanned');
  const scannedCache = {};
+  const isFocused = useIsFocused();

  const HashIt = function(s) {
    return createHash('sha256')
@ -79,9 +77,13 @@ const ScanQRCode = ({
    setIsLoading(false);
  };

+  const dismiss = () => {
+    navigate(launchedBy);
+  };
+
  return (
    <View style={{ flex: 1, backgroundColor: '#000000' }}>
-      {!isLoading && (
+      {!isLoading && isFocused && (
        <RNCamera
          captureAudio={false}
          androidCameraPermissionOptions={{
@ -90,7 +92,7 @@ const ScanQRCode = ({
            buttonPositive: 'OK',
            buttonNegative: 'Cancel',
          }}
-          style={{ flex: 1, justifyContent: 'space-between', backgroundColor: '#000000' }}
+          style={{ flex: 1 }}
          onBarCodeRead={onBarCodeRead}
          barCodeTypes={[RNCamera.Constants.BarCodeType.qr]}
        />
@ -107,7 +109,7 @@ const ScanQRCode = ({
            right: 16,
            top: 44,
          }}
-          onPress={() => navigate(launchedBy)}
+          onPress={dismiss}
        >
          <Image style={{ alignSelf: 'center' }} source={require('../../img/close-white.png')} />
        </TouchableOpacity>
@ -175,8 +177,5 @@ const ScanQRCode = ({
 ScanQRCode.navigationOptions = {
  header: null,
 };
-ScanQRCode.propTypes = {
-  showFileImportButton: PropTypes.bool,
-  showCloseButton: PropTypes.bool,
-};
+
 export default ScanQRCode;
--- a/screen/wallets/list.js
+++ b/screen/wallets/list.js
@ -1,5 +1,16 @@
 import React, { Component } from 'react';
-import { StatusBar, View, TouchableOpacity, Text, StyleSheet, InteractionManager, RefreshControl, SectionList, Alert, Platform } from 'react-native';
+import {
+  StatusBar,
+  View,
+  TouchableOpacity,
+  Text,
+  StyleSheet,
+  InteractionManager,
+  RefreshControl,
+  SectionList,
+  Alert,
+  Platform,
+} from 'react-native';
 import { BlueScanButton, WalletsCarousel, BlueHeaderDefaultMain, BlueTransactionListItem } from '../../BlueComponents';
 import { Icon } from 'react-native-elements';
 import { NavigationEvents } from 'react-navigation';
@ -69,7 +80,7 @@ export default class WalletsList extends Component {
   * Forcefully fetches TXs and balance for lastSnappedTo (i.e. current) wallet.
   * Triggered manually by user on pull-to-refresh.
   */
-  refreshTransactions() {
+  refreshTransactions = () => {
    if (!(this.lastSnappedTo < BlueApp.getWallets().length) && this.lastSnappedTo !== undefined) {
      // last card, nop
      console.log('last card, nop');
@ -103,7 +114,7 @@ export default class WalletsList extends Component {
        });
      },
    );
-  }
+  };

  redrawScreen = (scrollToEnd = false) => {
    console.log('wallets/list redrawScreen()');
@ -459,21 +470,19 @@ export default class WalletsList extends Component {
    });
  };

+  onNavigationEventDidFocus = () => {
+    StatusBar.setBarStyle('dark-content');
+    this.redrawScreen();
+  };
+
  render() {
    return (
      <View style={{ flex: 1 }}>
-        <NavigationEvents
-          onDidFocus={() => {
-            StatusBar.setBarStyle('dark-content');
-            this.redrawScreen();
-          }}
-        />
+        <NavigationEvents onDidFocus={this.onNavigationEventDidFocus} />
        <View style={styles.walletsListWrapper}>
          {this.renderNavigationHeader()}
          <SectionList
-            refreshControl={
-              <RefreshControl onRefresh={() => this.refreshTransactions()} refreshing={!this.state.isFlatListRefreshControlHidden} />
-            }
+            refreshControl={<RefreshControl onRefresh={this.refreshTransactions} refreshing={!this.state.isFlatListRefreshControlHidden} />}
            renderItem={this.renderSectionItem}
            keyExtractor={this.sectionListKeyExtractor}
            renderSectionHeader={this.renderSectionHeader}