fix: verification code

Deskripsi:
- ganti package karena tidak kompatibel dengan versi react yg sekarang

No Issues

android/app/src/main/res/values/styles.xml

@@ -5,6 +5,7 @@
     <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
     <item name="colorPrimary">@color/colorPrimary</item>
     <item name="android:statusBarColor">#ffffff</item>
+    <item name="android:windowOptOutEdgeToEdgeEnforcement" tools:targetApi="35">true</item>
   </style>
   <style name="ResetEditText" parent="@android:style/Widget.EditText">
     <item name="android:padding">0dp</item>

android/gradle.properties

@@ -54,3 +54,6 @@ EX_DEV_CLIENT_NETWORK_INSPECTOR=true
 
 # Use legacy packaging to compress native libraries in the resulting APK.
 expo.useLegacyPackaging=false
+
+# Whether the app is configured to use edge-to-edge via the app config or `react-native-edge-to-edge` plugin
+expo.edgeToEdgeEnabled=false

components/auth/viewVerification.tsx

@@ -4,7 +4,7 @@ import { useAuthSession } from "@/providers/AuthProvider";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { useState } from "react";
 import { Image, Text, ToastAndroid, View } from "react-native";
-import { CodeField, Cursor, useBlurOnFulfill, useClearByFocusCell } from "react-native-confirmation-code-field";
+import { OtpInput } from "react-native-otp-entry";
 import { ButtonForm } from "../buttonForm";
 
 type Props = {
@@ -15,15 +15,8 @@ type Props = {
 export default function ViewVerification({ phone, otp }: Props) {
    const [value, setValue] = useState('');
    const [otpFix, setOtpFix] = useState(otp)
-   const ref = useBlurOnFulfill({ value, cellCount: 4 });
-   const [props, getCellOnLayoutHandler] = useClearByFocusCell({
-      value,
-      setValue,
-   });
    const { signIn, encryptToken } = useAuthSession();
 
-
-
    const login = async () => {
       const valueUser = await AsyncStorage.getItem('user');
       if (valueUser != null) {
@@ -73,22 +66,18 @@ export default function ViewVerification({ phone, otp }: Props) {
                <Text style={[Styles.textMediumNormal]}>Masukkan kode yang kami kirimkan melalui WhatsApp</Text>
                <Text style={[Styles.textMediumSemiBold]}>+{phone}</Text>
             </View>
-            <CodeField
+            <OtpInput
-               ref={ref}
+               numberOfDigits={4}
-               {...props}
+               onTextChange={(text) => setValue(text)}
-               value={value}
+               focusColor={'#19345E'}
-               rootStyle={{ width: '80%', alignSelf: 'center' }}
+               type="numeric"
-               onChangeText={setValue}
+               theme={{
-               cellCount={4}
+                  containerStyle: {
-               keyboardType="number-pad"
+                     width: '80%',
-               renderCell={({ index, symbol, isFocused }) => (
+                     alignSelf: 'center'
-                  <Text
+                  },
-                     key={index}
+                  pinCodeContainerStyle: Styles.verificationCell,
-                     style={[Styles.verificationCell, isFocused && Styles.verificationFocusCell]}
+               }}
-                     onLayout={getCellOnLayoutHandler(index)}>
-                     {symbol || (isFocused ? <Cursor /> : null)}
-                  </Text>
-               )}
             />
             <ButtonForm
                text="SUBMIT"

package.json

@@ -27,6 +27,7 @@
     "dayjs": "^1.11.13",
     "expo": "^53.0.9",
     "expo-blur": "~14.1.4",
+    "expo-clipboard": "^7.1.4",
     "expo-constants": "~17.1.6",
     "expo-document-picker": "^13.1.5",
     "expo-file-system": "^18.1.10",
@@ -56,6 +57,7 @@
     "react-native-gifted-charts": "^1.4.57",
     "react-native-image-picker": "^8.2.1",
     "react-native-modal": "^14.0.0-rc.1",
+    "react-native-otp-entry": "^1.8.4",
     "react-native-reanimated": "~3.17.4",
     "react-native-reanimated-carousel": "^4.0.2",
     "react-native-render-html": "^6.3.4",