fix(mobile): fix transform with key of translateY crashes (#227)

related to some incomplete implementation of nativewind animations
get6pm · Aug 20, 2024 · d4b2549 · d4b2549
1 parent 2b84b2d
commit d4b2549
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 21 deletions.
diff --git a/apps/mobile/app/(app)/transaction/[transactionId].tsx b/apps/mobile/app/(app)/transaction/[transactionId].tsx
@@ -17,9 +17,8 @@ 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 { LoaderIcon } from 'lucide-react-native'
 import { useForm } from 'react-hook-form'
-import { Alert, View } from 'react-native'
+import { ActivityIndicator, Alert, View } from 'react-native'
 
 export default function EditRecordScreen() {
   const { i18n } = useLingui()
@@ -110,7 +109,7 @@ export default function EditRecordScreen() {
   if (!transaction) {
     return (
       <View className="flex-1 items-center justify-center bg-muted">
-        <LoaderIcon className="size-7 animate-spin text-primary" />
+        <ActivityIndicator size="large" />
       </View>
     )
   }

diff --git a/apps/mobile/app/(app)/transaction/new-record.tsx b/apps/mobile/app/(app)/transaction/new-record.tsx
@@ -17,10 +17,9 @@ 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 { LoaderIcon } from 'lucide-react-native'
 import { useRef } from 'react'
 import { useForm } from 'react-hook-form'
-import { Alert, View } from 'react-native'
+import { ActivityIndicator, Alert, View } from 'react-native'
 import PagerView from 'react-native-pager-view'
 
 export default function NewRecordScreen() {
@@ -74,7 +73,7 @@ export default function NewRecordScreen() {
   if (!defaultWallet) {
     return (
       <View className="flex-1 items-center justify-center bg-muted">
-        <LoaderIcon className="size-7 animate-spin text-primary" />
+        <ActivityIndicator size="large" />
       </View>
     )
   }

diff --git a/apps/mobile/components/auth/auth-email.tsx b/apps/mobile/components/auth/auth-email.tsx
@@ -146,6 +146,7 @@ export function AuthEmail() {
                     setVerifying(false)
                     authEmailForm.reset()
                   }}
+                  className="!-right-1.5 top-0.5"
                 >
                   <XCircleIcon className="h-5 w-5 text-muted-foreground" />
                 </Button>

diff --git a/apps/mobile/components/common/toolbar.tsx b/apps/mobile/components/common/toolbar.tsx
@@ -18,7 +18,7 @@ export function Toolbar() {
           // editable={false}
           pointerEvents="none"
         />
-        <View className="-translate-y-1/2 absolute top-1/2 left-3 transform">
+        <View className="absolute top-3 left-3">
           <Sparkles className="h-5 w-5 text-muted-foreground" />
         </View>
       </TouchableOpacity>

diff --git a/apps/mobile/components/form-fields/input-field.tsx b/apps/mobile/components/form-fields/input-field.tsx
@@ -37,9 +37,7 @@ export const InputField = forwardRef(
         {!!label && <Label nativeID={`label-${name}`}>{label}</Label>}
         <View>
           {leftSection && (
-            <View className="-translate-y-1/2 absolute top-1/2 z-10 transform">
-              {leftSection}
-            </View>
+            <View className="absolute top-0 z-10">{leftSection}</View>
           )}
           <Input
             ref={ref}
@@ -55,9 +53,7 @@ export const InputField = forwardRef(
             {...props}
           />
           {rightSection && (
-            <View className="-translate-y-1/2 absolute top-1/2 right-2 transform">
-              {rightSection}
-            </View>
+            <View className="absolute top-0 right-2">{rightSection}</View>
           )}
         </View>
         {!!fieldState.error && (

diff --git a/apps/mobile/components/transaction/scanner.tsx b/apps/mobile/components/transaction/scanner.tsx
@@ -12,15 +12,10 @@ 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,
-  LoaderIcon,
-  SwitchCameraIcon,
-} from 'lucide-react-native'
+import { CameraIcon, ImagesIcon, SwitchCameraIcon } from 'lucide-react-native'
 import { cssInterop } from 'nativewind'
 import { useRef, useState } from 'react'
-import { Alert } from 'react-native'
+import { ActivityIndicator, Alert } from 'react-native'
 import { ImageBackground, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 
@@ -112,7 +107,7 @@ export function Scanner({ onScanStart, onScanResult }: ScannerProps) {
     // Camera permissions are still loading.
     return (
       <View className="flex-1 items-center justify-center bg-muted">
-        <LoaderIcon className="size-7 animate-spin text-primary" />
+        <ActivityIndicator size="large" />
       </View>
     )
   }