ADD: Dismiss Export screen if app was sent to background

ios/Podfile.lock

@@ -298,7 +298,7 @@ PODS:
     - React
   - react-native-idle-timer (2.1.6):
     - React-Core
-  - react-native-image-picker (4.8.4):
+  - react-native-image-picker (4.8.5):
     - React-Core
   - react-native-ios-context-menu (1.7.4):
     - React-Core
@@ -386,7 +386,7 @@ PODS:
     - React
   - rn-ldk (0.8.1):
     - React-Core
-  - RNCAsyncStorage (1.17.7):
+  - RNCAsyncStorage (1.17.9):
     - React-Core
   - RNCClipboard (1.10.0):
     - React-Core
@@ -446,9 +446,9 @@ PODS:
     - React-RCTImage
   - RNSecureKeyStore (1.0.0):
     - React
-  - RNShare (7.7.0):
+  - RNShare (7.8.0):
     - React-Core
-  - RNSVG (12.4.3):
+  - RNSVG (12.4.4):
     - React-Core
   - RNVectorIcons (9.2.0):
     - React-Core
@@ -771,7 +771,7 @@ SPEC CHECKSUMS:
   react-native-document-picker: ec07866a30707f23660c0f3ae591d669d3e89096
   react-native-fingerprint-scanner: ac6656f18c8e45a7459302b84da41a44ad96dbbe
   react-native-idle-timer: f7f651542b39dce9b9473e4578cb64a255075f17
-  react-native-image-picker: cffb727cf2f59bd5c0408e30b3dbe0b935f88835
+  react-native-image-picker: cd420f97f6ed6ff74fc4686d27dbcfdbd051db91
   react-native-ios-context-menu: 7bf49ec6006cc0c61d873419557b85eb1b9629fb
   react-native-randombytes: 421f1c7d48c0af8dbcd471b0324393ebf8fe7846
   react-native-safe-area-context: 9e40fb181dac02619414ba1294d6c2a807056ab9
@@ -794,7 +794,7 @@ SPEC CHECKSUMS:
   RealmJS: 772520fb85c19b65c2ea0c8f9aa6e790a905a377
   RemobileReactNativeQrcodeLocalImage: 57aadc12896b148fb5e04bc7c6805f3565f5c3fa
   rn-ldk: fe694aaca0c661e7eb32cd9989dade5fe7e9c4e9
-  RNCAsyncStorage: d81ee5c3db1060afd49ea7045ad460eff82d2b7d
+  RNCAsyncStorage: b2489b49e38c85e10ed45a888d13a2a4c7b32ea1
   RNCClipboard: f1736c75ab85b627a4d57587edb4b60999c4dd80
   RNCPushNotificationIOS: 87b8d16d3ede4532745e05b03c42cff33a36cc45
   RNDefaultPreference: 08bdb06cfa9188d5da97d4642dac745218d7fb31
@@ -811,8 +811,8 @@ SPEC CHECKSUMS:
   RNReanimated: b5b17149593e7c05e4ec5c0efea1f21e05829510
   RNScreens: 4a1af06327774490d97342c00aee0c2bafb497b7
   RNSecureKeyStore: f1ad870e53806453039f650720d2845c678d89c8
-  RNShare: ab582e93876d9df333a531390c658c31b50a767d
+  RNShare: 31b418e3ff2084712f0f39618bafa5f97a322c0e
-  RNSVG: f3b60aeeaa81960e2e0536c3a9eef50b667ef3a9
+  RNSVG: ecd661f380a07ba690c9c5929c475a44f432d674
   RNVectorIcons: fcc2f6cb32f5735b586e66d14103a74ce6ad61f8
   RNWatch: dae6c858a2051dbdcfb00b9a86cf4d90400263b4
   SwiftSocket: c8d482e867ae4d3eb4c769e9382e123c1f1f833b

screen/wallets/export.js

@@ -1,5 +1,5 @@
-import React, { useState, useCallback, useContext } from 'react';
+import React, { useState, useCallback, useContext, useRef, useEffect } from 'react';
-import { InteractionManager, ScrollView, ActivityIndicator, StatusBar, View, StyleSheet } from 'react-native';
+import { InteractionManager, ScrollView, ActivityIndicator, StatusBar, View, StyleSheet, AppState } from 'react-native';
 import { useTheme, useNavigation, useFocusEffect, useRoute } from '@react-navigation/native';
 
 import { BlueSpacing20, SafeBlueArea, BlueText, BlueCopyTextToClipboard, BlueCard } from '../../BlueComponents';
@@ -12,6 +12,128 @@ import { BlueStorageContext } from '../../blue_modules/storage-context';
 import QRCodeComponent from '../../components/QRCodeComponent';
 import HandoffComponent from '../../components/handoff';
 
+const WalletExport = () => {
+  const { wallets, saveToDisk } = useContext(BlueStorageContext);
+  const { walletID } = useRoute().params;
+  const [isLoading, setIsLoading] = useState(true);
+  const { goBack } = useNavigation();
+  const { colors } = useTheme();
+  const wallet = wallets.find(w => w.getID() === walletID);
+  const [qrCodeSize, setQRCodeSize] = useState(90);
+  const appState = useRef(AppState.currentState);
+
+  useEffect(() => {
+    const subscription = AppState.addEventListener('change', nextAppState => {
+      if (!isLoading && nextAppState === 'background') {
+        goBack();
+      }
+
+      appState.current = nextAppState;
+    });
+
+    return () => {
+      subscription.remove();
+    };
+  }, [goBack, isLoading]);
+
+  const stylesHook = {
+    loading: {
+      backgroundColor: colors.elevated,
+    },
+    root: {
+      backgroundColor: colors.elevated,
+    },
+    type: { color: colors.foregroundColor },
+    secret: { color: colors.foregroundColor },
+    warning: { color: colors.failedColor },
+  };
+
+  useFocusEffect(
+    useCallback(() => {
+      Privacy.enableBlur();
+      const task = InteractionManager.runAfterInteractions(async () => {
+        if (wallet) {
+          const isBiometricsEnabled = await Biometric.isBiometricUseCapableAndEnabled();
+
+          if (isBiometricsEnabled) {
+            if (!(await Biometric.unlockWithBiometrics())) {
+              return goBack();
+            }
+          }
+          if (!wallet.getUserHasSavedExport()) {
+            wallet.setUserHasSavedExport(true);
+            saveToDisk();
+          }
+          setIsLoading(false);
+        }
+      });
+      return () => {
+        task.cancel();
+        Privacy.disableBlur();
+      };
+    }, [goBack, saveToDisk, wallet]),
+  );
+
+  if (isLoading || !wallet)
+    return (
+      <View style={[styles.loading, stylesHook.loading]}>
+        <ActivityIndicator />
+      </View>
+    );
+
+  // for SLIP39 we need to show all shares
+  let secrets = wallet.getSecret();
+  if (typeof secrets === 'string') {
+    secrets = [secrets];
+  }
+
+  const onLayout = e => {
+    const { height, width } = e.nativeEvent.layout;
+    setQRCodeSize(height > width ? width - 40 : e.nativeEvent.layout.width / 1.8);
+  };
+
+  return (
+    <SafeBlueArea style={[styles.root, stylesHook.root]} onLayout={onLayout}>
+      <StatusBar barStyle="light-content" />
+      <ScrollView contentContainerStyle={styles.scrollViewContent} testID="WalletExportScroll">
+        <View>
+          <BlueText style={[styles.type, stylesHook.type]}>{wallet.typeReadable}</BlueText>
+        </View>
+
+        {[LegacyWallet.type, SegwitBech32Wallet.type, SegwitP2SHWallet.type].includes(wallet.type) && (
+          <BlueCard>
+            <BlueText>{wallet.getAddress()}</BlueText>
+          </BlueCard>
+        )}
+        <BlueSpacing20 />
+        {secrets.map(s => (
+          <React.Fragment key={s}>
+            <QRCodeComponent isMenuAvailable={false} value={wallet.getSecret()} size={qrCodeSize} logoSize={70} />
+            {wallet.type !== WatchOnlyWallet.type && (
+              <BlueText style={[styles.warning, stylesHook.warning]}>{loc.wallets.warning_do_not_disclose}</BlueText>
+            )}
+            <BlueSpacing20 />
+            {wallet.type === LightningCustodianWallet.type || wallet.type === WatchOnlyWallet.type ? (
+              <BlueCopyTextToClipboard text={wallet.getSecret()} />
+            ) : (
+              <BlueText style={[styles.secret, styles.secretWritingDirection, stylesHook.secret]} testID="Secret">
+                {wallet.getSecret()}
+              </BlueText>
+            )}
+            {wallet.type === WatchOnlyWallet.type && (
+              <HandoffComponent
+                title={loc.wallets.xpub_title}
+                type={HandoffComponent.activityTypes.Xpub}
+                userInfo={{ xpub: wallet.getSecret() }}
+              />
+            )}
+          </React.Fragment>
+        ))}
+      </ScrollView>
+    </SafeBlueArea>
+  );
+};
+
 const styles = StyleSheet.create({
   loading: {
     flex: 1,
@@ -38,113 +160,6 @@ const styles = StyleSheet.create({
   },
 });
 
-const WalletExport = () => {
-  const { wallets, saveToDisk } = useContext(BlueStorageContext);
-  const { walletID } = useRoute().params;
-  const [isLoading, setIsLoading] = useState(true);
-  const { goBack } = useNavigation();
-  const { colors } = useTheme();
-  const wallet = wallets.find(w => w.getID() === walletID);
-  const [qrCodeSize, setQRCodeSize] = useState(90);
-  const stylesHook = {
-    ...styles,
-    loading: {
-      ...styles.loading,
-      backgroundColor: colors.elevated,
-    },
-    root: {
-      backgroundColor: colors.elevated,
-    },
-    type: { ...styles.type, color: colors.foregroundColor },
-    secret: { color: colors.foregroundColor },
-    warning: { ...styles.secret, color: colors.failedColor },
-  };
-
-  useFocusEffect(
-    useCallback(() => {
-      Privacy.enableBlur();
-      const task = InteractionManager.runAfterInteractions(async () => {
-        if (wallet) {
-          const isBiometricsEnabled = await Biometric.isBiometricUseCapableAndEnabled();
-
-          if (isBiometricsEnabled) {
-            if (!(await Biometric.unlockWithBiometrics())) {
-              return goBack();
-            }
-          }
-          if (!wallet.getUserHasSavedExport()) {
-            wallet.setUserHasSavedExport(true);
-            saveToDisk();
-          }
-          setIsLoading(false);
-        }
-      });
-      return () => {
-        task.cancel();
-        Privacy.disableBlur();
-      };
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [goBack, wallet]),
-  );
-
-  if (isLoading || !wallet)
-    return (
-      <View style={stylesHook.loading}>
-        <ActivityIndicator />
-      </View>
-    );
-
-  // for SLIP39 we need to show all shares
-  let secrets = wallet.getSecret();
-  if (typeof secrets === 'string') {
-    secrets = [secrets];
-  }
-
-  const onLayout = e => {
-    const { height, width } = e.nativeEvent.layout;
-    setQRCodeSize(height > width ? width - 40 : e.nativeEvent.layout.width / 1.8);
-  };
-
-  return (
-    <SafeBlueArea style={stylesHook.root} onLayout={onLayout}>
-      <StatusBar barStyle="light-content" />
-      <ScrollView contentContainerStyle={styles.scrollViewContent} testID="WalletExportScroll">
-        <View>
-          <BlueText style={stylesHook.type}>{wallet.typeReadable}</BlueText>
-        </View>
-
-        {[LegacyWallet.type, SegwitBech32Wallet.type, SegwitP2SHWallet.type].includes(wallet.type) && (
-          <BlueCard>
-            <BlueText>{wallet.getAddress()}</BlueText>
-          </BlueCard>
-        )}
-        <BlueSpacing20 />
-        {secrets.map(s => (
-          <React.Fragment key={s}>
-            <QRCodeComponent isMenuAvailable={false} value={wallet.getSecret()} size={qrCodeSize} logoSize={70} />
-            {wallet.type !== WatchOnlyWallet.type && <BlueText style={stylesHook.warning}>{loc.wallets.warning_do_not_disclose}</BlueText>}
-            <BlueSpacing20 />
-            {wallet.type === LightningCustodianWallet.type || wallet.type === WatchOnlyWallet.type ? (
-              <BlueCopyTextToClipboard text={wallet.getSecret()} />
-            ) : (
-              <BlueText style={[styles.secret, styles.secretWritingDirection, stylesHook.secret]} testID="Secret">
-                {wallet.getSecret()}
-              </BlueText>
-            )}
-            {wallet.type === WatchOnlyWallet.type && (
-              <HandoffComponent
-                title={loc.wallets.xpub_title}
-                type={HandoffComponent.activityTypes.Xpub}
-                userInfo={{ xpub: wallet.getSecret() }}
-              />
-            )}
-          </React.Fragment>
-        ))}
-      </ScrollView>
-    </SafeBlueArea>
-  );
-};
-
 WalletExport.navigationOptions = navigationStyle(
   {
     closeButton: true,