remove react-native-vision-camera for already existing expo-camera (#849

)

ios/Podfile.lock

@@ -1568,12 +1568,6 @@ PODS:
     - React
   - Toast (4.0.0)
   - Turf (3.0.0)
-  - VisionCamera (4.5.3):
-    - VisionCamera/Core (= 4.5.3)
-    - VisionCamera/React (= 4.5.3)
-  - VisionCamera/Core (4.5.3)
-  - VisionCamera/React (4.5.3):
-    - React-Core
   - Yoga (0.0.0)
   - ZXingObjC/Core (3.6.9)
   - ZXingObjC/OneD (3.6.9):
@@ -1697,7 +1691,6 @@ DEPENDENCIES:
   - RNSVG (from `../node_modules/react-native-svg`)
   - RNTestFlight (from `../node_modules/react-native-test-flight`)
   - TcpSockets (from `../node_modules/react-native-tcp`)
-  - VisionCamera (from `../node_modules/react-native-vision-camera`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -1941,8 +1934,6 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-test-flight"
   TcpSockets:
     :path: "../node_modules/react-native-tcp"
-  VisionCamera:
-    :path: "../node_modules/react-native-vision-camera"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -2071,7 +2062,6 @@ SPEC CHECKSUMS:
   TcpSockets: 14306fb79f9750ea7d2ddd02d8bed182abb01797
   Toast: 91b396c56ee72a5790816f40d3a94dd357abc196
   Turf: a1604e74adce15c58462c9ae2acdbf049d5be35e
-  VisionCamera: cb84d0d8485b3e67c91b62931d3aa88f49747c92
   Yoga: 2246eea72aaf1b816a68a35e6e4b74563653ae09
   ZXingObjC: 8898711ab495761b2dbbdec76d90164a6d7e14c5
 

package.json

@@ -214,7 +214,6 @@
     "react-native-udp": "2.7.0",
     "react-native-url-polyfill": "^2.0.0",
     "react-native-video": "5.2.1",
-    "react-native-vision-camera": "^4.5.3",
     "react-native-webview": "13.10.5",
     "react-redux": "8.0.4",
     "readable-stream": "3.6.0",

src/features/hotspot-onboarding/screens/mobile/ScanQRCodeScreen.tsx

@@ -1,56 +1,69 @@
 import Box from '@components/Box'
-import React, { useCallback, useState } from 'react'
-import { StyleSheet } from 'react-native'
+import React, { useCallback, useEffect, useState } from 'react'
+import { Linking, Platform, StyleSheet } from 'react-native'
 import Text from '@components/Text'
 import { useTranslation } from 'react-i18next'
 import TouchableOpacityBox from '@components/TouchableOpacityBox'
 import { useColors } from '@config/theme/themeHooks'
 import RightArrow from '@assets/svgs/rightArrow.svg'
-import {
-  Camera,
-  useCameraDevice,
-  useCodeScanner,
-} from 'react-native-vision-camera'
-import useAppear from '@hooks/useAppear'
-import useDisappear from '@hooks/useDisappear'
 import useHaptic from '@hooks/useHaptic'
 import { useAsync } from 'react-async-hook'
 import Config from 'react-native-config'
+import { BarcodeScanningResult, Camera, CameraView } from 'expo-camera'
+import useAlert from '@hooks/useAlert'
 import { useHotspotOnboarding } from '../../OnboardingSheet'
 import CheckButton from '../../../../components/CheckButton'
 import Loading from '../../../../components/LoadingButton'
 
 const ScanQRCodeScreen = () => {
-  const { t } = useTranslation()
   const colors = useColors()
-  const [isActive, setIsActive] = useState(false)
   const { triggerImpact } = useHaptic()
   const [qrCode, setQrCode] = useState<string | null>(null)
+  const [scanned, setScanned] = useState(false)
+  const [hasPermission, setHasPermission] = useState<boolean>()
+  const { showOKCancelAlert } = useAlert()
+  const { t } = useTranslation()
 
   const {
     carouselRef,
     setManualEntry,
     getDeviceInfo,
     getDeviceInfoLoading,
     getDeviceInfoError,
-    onboardDetails,
   } = useHotspotOnboarding()
 
+  useEffect(() => {
+    Camera.requestCameraPermissionsAsync().then(
+      ({ status }: { status: string }) => {
+        setHasPermission(status === 'granted')
+      },
+    )
+  }, [])
+
+  useAsync(async () => {
+    if (hasPermission !== false) return
+
+    // if permission is not granted, show alert to open settings
+    const decision = await showOKCancelAlert({
+      title: t('qrScanner.deniedAlert.title'),
+      message: t('qrScanner.deniedAlert.message'),
+      ok: t('qrScanner.deniedAlert.ok'),
+    })
+
+    // if user clicks ok, open settings
+    if (decision) {
+      if (Platform.OS === 'ios') {
+        await Linking.openURL('app-settings:')
+      } else {
+        await Linking.openSettings()
+      }
+    }
+  }, [hasPermission, showOKCancelAlert])
+
   const onManualEntry = useCallback(() => {
     setManualEntry(true)
   }, [setManualEntry])
 
-  const device = useCameraDevice('back', {
-    physicalDevices: ['ultra-wide-angle-camera'],
-  })
-
-  useAppear(() => {
-    setIsActive(true)
-  })
-
-  useDisappear(() => {
-    setIsActive(false)
-  })
   const onNext = useCallback(async () => {
     if (__DEV__ && Config.MOCK_HMH === 'true') {
       // Make sure MOCK_HMH is set to true in .env
@@ -68,14 +81,15 @@ const ScanQRCodeScreen = () => {
     }
   }, [carouselRef, getDeviceInfo, qrCode])
 
-  const codeScanner = useCodeScanner({
-    codeTypes: ['qr'],
-    onCodeScanned: (codes) => {
-      if (!codes.length || !codes[0].value || onboardDetails.qrCode) return
+  const handleBarCodeScanned = useCallback(
+    async (result: BarcodeScanningResult) => {
+      if (scanned) return
 
-      setQrCode(codes[0].value)
+      setScanned(true)
+      setQrCode(result.data)
     },
-  })
+    [scanned],
+  )
 
   useAsync(async () => {
     if (!qrCode) return
@@ -105,16 +119,12 @@ const ScanQRCodeScreen = () => {
             borderRadius: 24,
           }}
         >
-          {device ? (
-            <Camera
-              style={{ ...StyleSheet.absoluteFillObject }}
-              device={device}
-              isActive={isActive}
-              codeScanner={codeScanner}
-            />
-          ) : (
-            <Box flex={1} backgroundColor="primaryText" />
-          )}
+          <CameraView
+            onBarcodeScanned={handleBarCodeScanned}
+            barcodeScannerSettings={{ barcodeTypes: ['qr'] }}
+            style={StyleSheet.absoluteFillObject}
+            ratio="16:9"
+          />
         </Box>
       </Box>
       <Text variant="displayMdSemibold" color="primaryText" marginBottom="2.5">

yarn.lock

@@ -15656,7 +15656,6 @@ __metadata:
     react-native-udp: 2.7.0
     react-native-url-polyfill: ^2.0.0
     react-native-video: 5.2.1
-    react-native-vision-camera: ^4.5.3
     react-native-webview: 13.10.5
     react-redux: 8.0.4
     react-test-renderer: 17.0.2
@@ -22030,26 +22029,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-native-vision-camera@npm:^4.5.3":
-  version: 4.5.3
-  resolution: "react-native-vision-camera@npm:4.5.3"
-  peerDependencies:
-    "@shopify/react-native-skia": "*"
-    react: "*"
-    react-native: "*"
-    react-native-reanimated: "*"
-    react-native-worklets-core: "*"
-  peerDependenciesMeta:
-    "@shopify/react-native-skia":
-      optional: true
-    react-native-reanimated:
-      optional: true
-    react-native-worklets-core:
-      optional: true
-  checksum: 99d57a70f93134903ae25ef798947f79804ea00e3b58cbb21131115552e6f2950d2a3be9a6a237232ca6bab7b5031aa12d9ca2df659be39dc607d75997317abc
-  languageName: node
-  linkType: hard
-
 "react-native-webview@npm:13.10.5":
   version: 13.10.5
   resolution: "react-native-webview@npm:13.10.5"