fix(mobile): lazy load transaction scanner

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" />

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 (

apps/mobile/locales/en/messages.po

@@ -124,7 +124,7 @@ msgstr ""
 msgid "Budgets"
 msgstr ""
 
-#: apps/mobile/components/transaction/scanner.tsx:120
+#: apps/mobile/components/transaction/scanner.tsx:139
 msgid "Camera permissions are not granted"
 msgstr ""
 
@@ -136,7 +136,7 @@ msgstr ""
 msgid "Cancel"
 msgstr ""
 
-#: apps/mobile/components/transaction/scanner.tsx:48
+#: apps/mobile/components/transaction/scanner.tsx:58
 msgid "Cannot extract transaction data"
 msgstr ""
 
@@ -274,7 +274,7 @@ msgstr ""
 msgid "Get started by setting your monthly budget."
 msgstr ""
 
-#: apps/mobile/components/transaction/scanner.tsx:122
+#: apps/mobile/components/transaction/scanner.tsx:141
 msgid "Grant camera permissions"
 msgstr ""
 
@@ -404,7 +404,7 @@ msgstr ""
 msgid "Privacy Policy"
 msgstr ""
 
-#: apps/mobile/components/transaction/scanner.tsx:139
+#: apps/mobile/components/transaction/scanner.tsx:158
 msgid "Processing transaction..."
 msgstr ""
 
@@ -540,11 +540,15 @@ msgstr ""
 msgid "Spending"
 msgstr ""
 
+#: apps/mobile/components/transaction/scanner.tsx:129
+msgid "Swift up to scan transaction"
+msgstr ""
+
 #: apps/mobile/app/(app)/appearance.tsx:38
 #~ msgid "System"
 #~ msgstr ""
 
-#: apps/mobile/components/transaction/scanner.tsx:163
+#: apps/mobile/components/transaction/scanner.tsx:182
 msgid "Take a picture of your transaction"
 msgstr ""
 
@@ -580,7 +584,7 @@ msgstr ""
 msgid "Tomorrow"
 msgstr ""
 
-#: apps/mobile/app/(app)/transaction/new-record.tsx:57
+#: apps/mobile/app/(app)/transaction/new-record.tsx:58
 msgid "Transaction created"
 msgstr ""
 

apps/mobile/locales/en/messages.ts

@@ -1,4 +1,4 @@
 /*eslint-disable*/ import type { Messages } from '@lingui/core'
 export const messages: Messages = JSON.parse(
-  '{"J/hVSQ":[["0"]],"6MIiOI":[["0"]," left"],"FEZKSz":[["language"]],"GDr6hQ":"* you can always change this later.","VE5ikN":"<0><1>Manage your expense seamlessly</1><2>Let <3>6pm</3> a good time to spend</2></0>","AYTmQ1":"<0>By continuing, you acknowledge that you understand and agree to the <1><2>Terms & Conditions</2></1> and <3><4>Privacy Policy</4></3></0>","LjsgKU":"0.00","y+OdTP":"Account deleted successfully","103Xyi":"Add your first transaction here","sxkWRg":"Advanced","Mxjwaz":"All accounts","pXc4dB":"All Accounts","LcouyV":"All your data will be deleted","Vw8l6h":"An error occurred","bhrKSa":"An error occurred while deleting the transaction","rBd1BM":"An error occurred while updating the transaction","2Yw5Eq":"App settings","rg8lHb":"App theme","aAIQg2":"Appearance","rH4FJH":"Are you sure you want to delete this budget? This action cannot be undone.","TE1tui":"Are you sure you want to delete your account? This action cannot be undone.","apLLSU":"Are you sure you want to sign out?","6foA8n":"Are you sure?","X2pgJW":"Ask AI anything...","kfcRb0":"Avatar","fsBGk0":"Balance","IGsZpB":"Budgets","HjYcC9":"Camera permissions are not granted","dEgA5A":"Cancel","dZYaqU":"Cannot extract transaction data","NUrY9o":"Categories","i+de8A":"Category name","h4wXn9":"Choose a preferred theme for the 6pm","xGVfLh":"Continue","RvVi9c":"Continue with Email","PxMcud":"Current balance","AJToWu":"Current state","7cFjHo":"Daily reminder","Zz6Cxn":"Danger zone","pvnfJD":"Dark","o5ooMr":"Debt","WRwm0h":"Default currency","cnGeoo":"Delete","chkudi":"Delete 6pm account","VbtMs5":"Delete wallet account will also delete all related transactions!","pfa8F0":"Display name","rrOW2A":"Edit account","j1Jl7s":"Edit category","O3oNi5":"Email","QOINDn":"empty","ak+zF8":"Enable Push Notifications","/AHxlh":"Enable spending alerts","lYGfRP":"English","EmV+r3":"Enter the code sent to your email","xRPn3U":"Enter your email address","/o/2Tm":"Expense","aSBbnl":"Expenses","AL8ocL":"Family budget","xRJSOj":"From date","Weq9zb":"General","h52e9T":"Get 6pm Pro","EVORi1":"Get started by setting your monthly budget.","M1w7jC":"Grant camera permissions","Uq/imr":"If you\'re not sure, start with how much you usually spend per month.","xxsw3W":"Income","Z2b5qm":"Incomes","13aTWr":"Investing","AhuqH6":"Keeping up with your spending and budgets.","vXIe7J":"Language","brkKQW":"Left per day","PRzhQh":"Left this month","1njn7W":"Light","UC3YIm":"Login using FaceID","lkAlEG":"Magic inbox","+8Nek/":"Monthly","iBONBd":"Monthly budget","6YtxFj":"Name","xYG/fs":"Negative","XejmNR":"Negative if your content balance is under zero","6WSYbN":["New ",["0"]],"Kcr9Fr":"New account","5OdwzH":"New budget","tl5vsv":"New category","ApQ2nt":"No budget selected","8bNIKG":"No transactions found","NuKR0h":"Others","198luN":"per day","NtQvjo":"Period","66fYpz":"Period end date","QTWhG5":"Period start date","FHx6kz":"Positive","ScJ9fj":"Privacy policy","LcET2C":"Privacy Policy","Z8pOEI":"Processing transaction...","vERlcd":"Profile","kUlL8W":"Profile updated successfully","++8ZXz":"Proudly open source","SZJG6+":"Push notifications","r7QRqI":"Push notifications are disabled","LI1qx1":"Push notifications are enabled","3yhyIW":"Push notifications are not enabled","kCxe8K":"Quarterly","j75BA9":"Rate 6pm on App Store","tfDRzk":"Save","y3aU20":"Save changes","uF9ruK":"Saving","WDgJiV":"Scanner","P9vd26":"Search currency...","+O3PfQ":"Select account","HfaFKV":"Select balance state","PtoMco":"Select budget type","5dfUzo":"Select period type","RoafuO":"Send feedback","wCqgpu":"Set Budget","oyi6Xa":"Set Monthly Budget","dY304N":"Set your monthly spending goal","Tz0i8g":"Settings","RDprz0":"Share with friends","5lWFkC":"Sign in","+EnZBU":"Sign in with Apple","dbWo0h":"Sign in with Google","fcWrnU":"Sign out","e+RpCP":"Sign up","TOm5Xo":"Specific dates","Q14cFX":"Spending","D+NlUC":"System","IL5Ibf":"Take a picture of your transaction","Yrrg+y":"Target","KWUgwY":"Terms & Conditions","Emv+V7":"Terms of use","OR1t9P":"This will delete the transaction. Are you sure you want to continue?","sH0pkc":"Time to enter your expenses!","w4eKlT":"To date","ecUA8p":"Today","BRMXj0":"Tomorrow","38Gho6":"Transaction created","6D8usS":"transaction note","+zy2Nq":"Type","b2vAoQ":"Uncategorized","Ef7StM":"Unknown","29VNqC":"Unknown error","QQX2/q":"Unlocks full AI power and more!","wPTug2":"Upload new photo","KALubG":"ver.","AdWhjZ":"Verification code","fROFIL":"Vietnamese","q19YJ1":"Wallet account name","rUcnTU":"Wallet accounts","mdad9N":"Wallet Accounts","4XSc4l":"Weekly","I+fC9+":"Welcome to 6pm!","zkWmBh":"Yearly","y/0uwd":"Yesterday","kDrMSv":"Your display name"}',
+  '{"J/hVSQ":[["0"]],"6MIiOI":[["0"]," left"],"FEZKSz":[["language"]],"GDr6hQ":"* you can always change this later.","VE5ikN":"<0><1>Manage your expense seamlessly</1><2>Let <3>6pm</3> a good time to spend</2></0>","AYTmQ1":"<0>By continuing, you acknowledge that you understand and agree to the <1><2>Terms & Conditions</2></1> and <3><4>Privacy Policy</4></3></0>","LjsgKU":"0.00","y+OdTP":"Account deleted successfully","103Xyi":"Add your first transaction here","sxkWRg":"Advanced","Mxjwaz":"All accounts","pXc4dB":"All Accounts","LcouyV":"All your data will be deleted","Vw8l6h":"An error occurred","bhrKSa":"An error occurred while deleting the transaction","rBd1BM":"An error occurred while updating the transaction","2Yw5Eq":"App settings","rg8lHb":"App theme","aAIQg2":"Appearance","rH4FJH":"Are you sure you want to delete this budget? This action cannot be undone.","TE1tui":"Are you sure you want to delete your account? This action cannot be undone.","apLLSU":"Are you sure you want to sign out?","6foA8n":"Are you sure?","X2pgJW":"Ask AI anything...","kfcRb0":"Avatar","fsBGk0":"Balance","IGsZpB":"Budgets","HjYcC9":"Camera permissions are not granted","dEgA5A":"Cancel","dZYaqU":"Cannot extract transaction data","NUrY9o":"Categories","i+de8A":"Category name","h4wXn9":"Choose a preferred theme for the 6pm","xGVfLh":"Continue","RvVi9c":"Continue with Email","PxMcud":"Current balance","AJToWu":"Current state","7cFjHo":"Daily reminder","Zz6Cxn":"Danger zone","pvnfJD":"Dark","o5ooMr":"Debt","WRwm0h":"Default currency","cnGeoo":"Delete","chkudi":"Delete 6pm account","VbtMs5":"Delete wallet account will also delete all related transactions!","pfa8F0":"Display name","rrOW2A":"Edit account","j1Jl7s":"Edit category","O3oNi5":"Email","QOINDn":"empty","ak+zF8":"Enable Push Notifications","/AHxlh":"Enable spending alerts","lYGfRP":"English","EmV+r3":"Enter the code sent to your email","xRPn3U":"Enter your email address","/o/2Tm":"Expense","aSBbnl":"Expenses","AL8ocL":"Family budget","xRJSOj":"From date","Weq9zb":"General","h52e9T":"Get 6pm Pro","EVORi1":"Get started by setting your monthly budget.","M1w7jC":"Grant camera permissions","Uq/imr":"If you\'re not sure, start with how much you usually spend per month.","xxsw3W":"Income","Z2b5qm":"Incomes","13aTWr":"Investing","AhuqH6":"Keeping up with your spending and budgets.","vXIe7J":"Language","brkKQW":"Left per day","PRzhQh":"Left this month","1njn7W":"Light","UC3YIm":"Login using FaceID","lkAlEG":"Magic inbox","+8Nek/":"Monthly","iBONBd":"Monthly budget","6YtxFj":"Name","xYG/fs":"Negative","XejmNR":"Negative if your content balance is under zero","6WSYbN":["New ",["0"]],"Kcr9Fr":"New account","5OdwzH":"New budget","tl5vsv":"New category","ApQ2nt":"No budget selected","8bNIKG":"No transactions found","NuKR0h":"Others","198luN":"per day","NtQvjo":"Period","66fYpz":"Period end date","QTWhG5":"Period start date","FHx6kz":"Positive","ScJ9fj":"Privacy policy","LcET2C":"Privacy Policy","Z8pOEI":"Processing transaction...","vERlcd":"Profile","kUlL8W":"Profile updated successfully","++8ZXz":"Proudly open source","SZJG6+":"Push notifications","r7QRqI":"Push notifications are disabled","LI1qx1":"Push notifications are enabled","3yhyIW":"Push notifications are not enabled","kCxe8K":"Quarterly","j75BA9":"Rate 6pm on App Store","tfDRzk":"Save","y3aU20":"Save changes","uF9ruK":"Saving","WDgJiV":"Scanner","P9vd26":"Search currency...","+O3PfQ":"Select account","HfaFKV":"Select balance state","PtoMco":"Select budget type","5dfUzo":"Select period type","RoafuO":"Send feedback","wCqgpu":"Set Budget","oyi6Xa":"Set Monthly Budget","dY304N":"Set your monthly spending goal","Tz0i8g":"Settings","RDprz0":"Share with friends","5lWFkC":"Sign in","+EnZBU":"Sign in with Apple","dbWo0h":"Sign in with Google","fcWrnU":"Sign out","e+RpCP":"Sign up","TOm5Xo":"Specific dates","Q14cFX":"Spending","w5QjWi":"Swift up to scan transaction","D+NlUC":"System","IL5Ibf":"Take a picture of your transaction","Yrrg+y":"Target","KWUgwY":"Terms & Conditions","Emv+V7":"Terms of use","OR1t9P":"This will delete the transaction. Are you sure you want to continue?","sH0pkc":"Time to enter your expenses!","w4eKlT":"To date","ecUA8p":"Today","BRMXj0":"Tomorrow","38Gho6":"Transaction created","6D8usS":"transaction note","+zy2Nq":"Type","b2vAoQ":"Uncategorized","Ef7StM":"Unknown","29VNqC":"Unknown error","QQX2/q":"Unlocks full AI power and more!","wPTug2":"Upload new photo","KALubG":"ver.","AdWhjZ":"Verification code","fROFIL":"Vietnamese","q19YJ1":"Wallet account name","rUcnTU":"Wallet accounts","mdad9N":"Wallet Accounts","4XSc4l":"Weekly","I+fC9+":"Welcome to 6pm!","zkWmBh":"Yearly","y/0uwd":"Yesterday","kDrMSv":"Your display name"}',
 )

apps/mobile/locales/vi/messages.po

@@ -124,7 +124,7 @@ msgstr "Số dư"
 msgid "Budgets"
 msgstr "Ngân sách"
 
-#: apps/mobile/components/transaction/scanner.tsx:120
+#: apps/mobile/components/transaction/scanner.tsx:139
 msgid "Camera permissions are not granted"
 msgstr "Quyền truy cập camera không được cấp"
 
@@ -136,7 +136,7 @@ msgstr "Quyền truy cập camera không được cấp"
 msgid "Cancel"
 msgstr "Huỷ"
 
-#: apps/mobile/components/transaction/scanner.tsx:48
+#: apps/mobile/components/transaction/scanner.tsx:58
 msgid "Cannot extract transaction data"
 msgstr "Không thể xử lý dữ liệu giao dịch"
 
@@ -274,7 +274,7 @@ msgstr "Nâng Cấp 6pm Pro"
 msgid "Get started by setting your monthly budget."
 msgstr "Bắt đầu bằng cách đặt ngân sách hàng tháng của bạn."
 
-#: apps/mobile/components/transaction/scanner.tsx:122
+#: apps/mobile/components/transaction/scanner.tsx:141
 msgid "Grant camera permissions"
 msgstr "Cấp quyền truy cập camera"
 
@@ -404,7 +404,7 @@ msgstr "Chính sách bảo mật"
 msgid "Privacy Policy"
 msgstr "Chính sách bảo mật"
 
-#: apps/mobile/components/transaction/scanner.tsx:139
+#: apps/mobile/components/transaction/scanner.tsx:158
 msgid "Processing transaction..."
 msgstr "Đang xử lý giao dịch..."
 
@@ -540,11 +540,15 @@ msgstr "Ngày cụ thể"
 msgid "Spending"
 msgstr "Chi tiêu"
 
+#: apps/mobile/components/transaction/scanner.tsx:129
+msgid "Swift up to scan transaction"
+msgstr "Vuốt lên để quét giao dịch"
+
 #: apps/mobile/app/(app)/appearance.tsx:38
 #~ msgid "System"
 #~ msgstr "Hệ thống"
 
-#: apps/mobile/components/transaction/scanner.tsx:163
+#: apps/mobile/components/transaction/scanner.tsx:182
 msgid "Take a picture of your transaction"
 msgstr "Chụp ảnh giao dịch của bạn"
 
@@ -580,7 +584,7 @@ msgstr "Hôm nay"
 msgid "Tomorrow"
 msgstr "Ngày mai"
 
-#: apps/mobile/app/(app)/transaction/new-record.tsx:57
+#: apps/mobile/app/(app)/transaction/new-record.tsx:58
 msgid "Transaction created"
 msgstr "Giao dịch đã được tạo"