fix(mobile): lazy load transaction scanner

get6pm · Aug 20, 2024 · c0ccdba · c0ccdba
1 parent 9626094
commit c0ccdba
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 3 deletions.
diff --git a/apps/mobile/app/(app)/transaction/new-record.tsx b/apps/mobile/app/(app)/transaction/new-record.tsx
@@ -17,7 +17,7 @@ import { PortalHost, useModalPortalRoot } from '@rn-primitives/portal'
 import { useQueryClient } from '@tanstack/react-query'
 import * as Haptics from 'expo-haptics'
 import { useLocalSearchParams, useRouter } from 'expo-router'
-import { useRef } from 'react'
+import { useRef, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import { ActivityIndicator, Alert, View } from 'react-native'
 import PagerView from 'react-native-pager-view'
@@ -31,6 +31,7 @@ export default function NewRecordScreen() {
   const defaultCurrency = useDefaultCurrency()
   const defaultWallet = walletAccounts?.[0]
   const { sideOffset, ...rootProps } = useModalPortalRoot()
+  const [page, setPage] = useState<number>(0)
 
   const params = useLocalSearchParams()
   const parsedParams = zUpdateTransaction.parse(params)
@@ -86,6 +87,8 @@ export default function NewRecordScreen() {
         orientation="vertical"
         initialPage={0}
         style={{ flex: 1 }}
+        onPageSelected={({ nativeEvent }) => setPage(nativeEvent.position)}
+        offscreenPageLimit={2}
       >
         <TransactionForm
           sideOffset={sideOffset}
@@ -111,6 +114,7 @@ export default function NewRecordScreen() {
             ref.current?.setScrollEnabled(true)
             ref.current?.setPage(0)
           }}
+          shouldRender={page === 1}
         />
       </PagerView>
       <PortalHost name="transaction-form" />

diff --git a/apps/mobile/components/transaction/scanner.tsx b/apps/mobile/components/transaction/scanner.tsx
@@ -12,7 +12,12 @@ import { type CameraType, CameraView, useCameraPermissions } from 'expo-camera'
 import * as Haptics from 'expo-haptics'
 import { SaveFormat, manipulateAsync } from 'expo-image-manipulator'
 import * as ImagePicker from 'expo-image-picker'
-import { CameraIcon, ImagesIcon, SwitchCameraIcon } from 'lucide-react-native'
+import {
+  CameraIcon,
+  ChevronsUpIcon,
+  ImagesIcon,
+  SwitchCameraIcon,
+} from 'lucide-react-native'
 import { cssInterop } from 'nativewind'
 import { useRef, useState } from 'react'
 import { ActivityIndicator, Alert } from 'react-native'
@@ -28,9 +33,14 @@ cssInterop(CameraView, {
 type ScannerProps = {
   onScanStart?: () => void
   onScanResult: (result: UpdateTransaction) => void
+  shouldRender?: boolean
 }
 
-export function Scanner({ onScanStart, onScanResult }: ScannerProps) {
+export function Scanner({
+  onScanStart,
+  onScanResult,
+  shouldRender,
+}: ScannerProps) {
   const camera = useRef<CameraView>(null)
   const [facing, setFacing] = useState<CameraType>('back')
   const [permission, requestPermission] = useCameraPermissions()
@@ -112,6 +122,15 @@ export function Scanner({ onScanStart, onScanResult }: ScannerProps) {
     )
   }
 
+  if (!shouldRender) {
+    return (
+      <View className="flex-1 items-center gap-4 bg-muted p-4">
+        <ChevronsUpIcon className="size-10 text-muted-foreground" />
+        <Text>{t(i18n)`Swift up to scan transaction`}</Text>
+      </View>
+    )
+  }
+
   if (!permission.granted) {
     // Camera permissions are not granted.
     return (