fix: verification code

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

No Issues

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
-               ref={ref}
-               {...props}
-               value={value}
-               rootStyle={{ width: '80%', alignSelf: 'center' }}
-               onChangeText={setValue}
-               cellCount={4}
-               keyboardType="number-pad"
-               renderCell={({ index, symbol, isFocused }) => (
-                  <Text
-                     key={index}
-                     style={[Styles.verificationCell, isFocused && Styles.verificationFocusCell]}
-                     onLayout={getCellOnLayoutHandler(index)}>
-                     {symbol || (isFocused ? <Cursor /> : null)}
-                  </Text>
-               )}
+            <OtpInput
+               numberOfDigits={4}
+               onTextChange={(text) => setValue(text)}
+               focusColor={'#19345E'}
+               type="numeric"
+               theme={{
+                  containerStyle: {
+                     width: '80%',
+                     alignSelf: 'center'
+                  },
+                  pinCodeContainerStyle: Styles.verificationCell,
+               }}
             />
             <ButtonForm
                text="SUBMIT"