mobile-darmasaba/app/verification.tsx

import { ButtonForm } from "@/components/buttonForm";
import Text from '@/components/Text';
import { ConstEnv } from "@/constants/ConstEnv";
import Styles from "@/constants/Styles";
import { useAuthSession } from "@/providers/AuthProvider";
import { useTheme } from "@/providers/ThemeProvider";
import CryptoES from "crypto-es";
import React, { useState } from "react";
import { Image, View } from "react-native";
import { CodeField, Cursor, useBlurOnFulfill, useClearByFocusCell, } from 'react-native-confirmation-code-field';

export default function Index() {
   const [value, setValue] = useState('');
   const ref = useBlurOnFulfill({ value, cellCount: 4 });
   const [props, getCellOnLayoutHandler] = useClearByFocusCell({
      value,
      setValue,
   });
   const { colors } = useTheme();

   const { signIn } = useAuthSession();
   const login = (): void => {
      const random: string = 'contohLoginMobileDarmasaba';
      var mytexttoEncryption = "contohLoginMobileDarmasaba"
      const encrypted = CryptoES.AES.encrypt(mytexttoEncryption, ConstEnv.pass_encrypt).toString();
      signIn(encrypted);
   }
   return (
      <View style={[Styles.wrapLogin, { backgroundColor: colors.background }]} >
         <View style={{ alignItems: "center", marginVertical: 50 }}>
            <Image
               source={require("../assets/images/logo.png")}
               style={[{ width: 300, height: 150 }]}
               width={270}
               height={110}
            />
            {/* <Text style={[Styles.textSubtitle]}>PERBEKEL DARMASABA</Text> */}
         </View>
         <View style={[Styles.mb30]}>
            <Text style={[Styles.textDefaultSemiBold]}>Verifikasi Nomor Telepon</Text>
            <Text style={[Styles.textMediumNormal]}>Masukkan kode yang kami kirimkan melalui WhatsApp</Text>
            <Text style={[Styles.textMediumSemiBold]}>+628980185458</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, { borderColor: isFocused ? colors.tint : colors.icon, color: colors.text }]}
                  onLayout={getCellOnLayoutHandler(index)}>
                  {symbol || (isFocused ? <Cursor /> : null)}
               </Text>
            )}
         />
         <ButtonForm
            text="SUBMIT"
            // onPress={() => { router.push("/home") }}
            onPress={login}
         />
         <Text style={[Styles.textInformation, Styles.mt05, Styles.cDefault, { textAlign: 'center', color: colors.tint }]}>
            Tidak Menerima kode verifikasi? Kirim Ulang
         </Text>
      </View>
   );
}