fix(scanner): fix fix repeated scanning bug

now it actually scans again when you navigate back
and also if you fail the first time

Author: mnzaki

src/ui/interaction/component/scanner.tsx

@@ -91,6 +91,7 @@ interface Props {
   isTorchPressed: boolean
   onPressTorch: (state: boolean) => void
   reRenderKey: number
+  onScannerRef: (s: any) => void
   isError: boolean
   colorAnimationValue: Animated.Value
   textAnimationValue: Animated.Value
@@ -103,6 +104,7 @@ export const ScannerComponent = (props: Props) => {
     isTorchPressed,
     onPressTorch,
     reRenderKey,
+    onScannerRef,
     colorAnimationValue,
     textAnimationValue,
   } = props
@@ -123,6 +125,7 @@ export const ScannerComponent = (props: Props) => {
   return (
     <React.Fragment>
       <QRScanner
+        ref={onScannerRef}
         //@ts-ignore - see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/29651
         containerStyle={{
           position: 'absolute',
@@ -140,8 +143,7 @@ export const ScannerComponent = (props: Props) => {
       <View
         style={{
           flexDirection: 'row',
-        }}
-      >
+        }}>
         <View style={styles.horizontalOverlay} />
         <Animated.View
           style={[
@@ -165,8 +167,7 @@ export const ScannerComponent = (props: Props) => {
               {
                 opacity: textAnimationValue,
               },
-            ]}
-          >
+            ]}>
             {I18n.t(strings.LOOKS_LIKE_WE_CANT_PROVIDE_THIS_SERVICE)}
           </Animated.Text>
         ) : (
@@ -181,8 +182,7 @@ export const ScannerComponent = (props: Props) => {
           onPressOut={() => onPressTorch(false)}
           activeOpacity={1}
           underlayColor={'transparent'}
-          style={styles.torch}
-        >
+          style={styles.torch}>
           {isTorchPressed ? <TorchOnIcon /> : <TorchOffIcon />}
         </TouchableHighlight>
       </View>

src/ui/interaction/container/interactionScreen.tsx

@@ -57,11 +57,12 @@ interface Props
 
 const InteractionContainer = (props: Props) => {
   return (
-    <Wrapper dark centered withoutSafeArea>
+    <Wrapper dark centered withoutSafeArea withoutStatusBar>
       {IS_IOS && (
         <TouchableOpacity
           onPress={props.navigateHome}
-          style={styles.closeButton}>
+          style={styles.closeButton}
+        >
           <CloseIcon />
         </TouchableOpacity>
       )}

src/ui/interaction/container/scanner.tsx

@@ -39,25 +39,39 @@ export const ScannerContainer: React.FC<Props> = (props) => {
   const [isError, setError] = useState(false)
   const [colorAnimationValue] = useState(new Animated.Value(0))
   const [textAnimationValue] = useState(new Animated.Value(0))
+  const [scannerRef, setScannerRef] = useState(null)
+
+  // NOTE: this is needed because QRScanner behaves weirdly when the screen is
+  // remounted....
+  if (scannerRef) scannerRef.reactivate()
+
+  const rerender = () => {
+    setRenderKey(Date.now())
+    if (scannerRef) scannerRef.reactivate()
+  }
 
   useEffect(() => {
-    let focusListener!: NavigationEventSubscription
+    let listeners: NavigationEventSubscription[] = []
     if (navigation) {
-      focusListener = navigation.addListener('willFocus', () => {
-        // NOTE: the re-render and the re-mount should only fire during the willFocus event
-        setRenderKey(Date.now())
-      })
+      listeners.push(navigation.addListener('didFocus', () => {
+        rerender()
+        checkCameraPermissions()
+      }))
+    } else {
+      checkCameraPermissions()
     }
 
-    check(CAMERA_PERMISSION).then(perm => {
+    return () => listeners.forEach(l => l.remove())
+  }, [])
+
+  const checkCameraPermissions = async () => {
+    return check(CAMERA_PERMISSION).then(perm => {
       setPermission(perm)
       if (perm !== RESULTS.GRANTED && perm !== RESULTS.BLOCKED) {
         requestCameraPermission()
       }
     })
-
-    return focusListener.remove
-  }, [])
+  }
 
   const requestCameraPermission = async () => {
     const permission = await request(CAMERA_PERMISSION)
@@ -115,7 +129,7 @@ export const ScannerContainer: React.FC<Props> = (props) => {
       }),
     ])
 
-  const parseJWT = (jwt: string) => {
+  const onScan = (jwt: string) => {
     try {
       const interactionToken = JolocomLib.parse.interactionToken.fromJWT(jwt)
       onScannerSuccess(interactionToken)
@@ -124,6 +138,7 @@ export const ScannerContainer: React.FC<Props> = (props) => {
         setError(true)
         Animated.parallel([animateColor(), animateText()]).start(() => {
           setError(false)
+          rerender()
         })
       }
     }
@@ -133,7 +148,8 @@ export const ScannerContainer: React.FC<Props> = (props) => {
     return (
       <ScannerComponent
         reRenderKey={reRenderKey}
-        onScan={parseJWT}
+        onScan={onScan}
+        onScannerRef={r => setScannerRef(r)}
         isTorchPressed={isTorch}
         onPressTorch={(state: boolean) => setTorch(state)}
         isError={isError}
@@ -142,6 +158,7 @@ export const ScannerContainer: React.FC<Props> = (props) => {
       />
     )
   } else if (permission === RESULTS.UNAVAILABLE) {
+    // TODO: maybe add a message here like "do you even camera?"
     return (
       <View
         style={{