How to Use AsyncStorage in react native expo cli functional component - firebase

Question

I am trying to use Async Storage in react native expo cli to use login credentials even after closing the app. I am using firebase otp authentication as a mode of login. I am struck here to use the previously used phone number and otp. Below is my code.
This is one screen where user will enter mobile number.
import React, {useState, useRef} from 'react'
import { Alert, View } from 'react-native';
import { NativeBaseProvider, Text, Image, Button, Input } from 'native-base';
import { Pressable } from 'react-native';
import { Col, Row, Grid } from "react-native-easy-grid";
import { LinearGradient } from 'expo-linear-gradient';
import styles from '../styles/styles';
import firebase, {phoneAuthProvider} from '../firebase';
import { FirebaseRecaptchaVerifierModal } from 'expo-firebase-recaptcha';
import AsyncStorage from '#react-native-async-storage/async-storage';
const DummyWelcome = ({ navigation }) => {
const [phoneNumber, setPhoneNumber] = useState("");
const [verificationId, setVerificationId] = useState(null);
const recaptchaVerifier = useRef(null);
const sendVerification = async () => {
try {
await AsyncStorage.setItem('phoneNumber', phoneNumber)
}
catch (erorr) {
console.log(error);
}
console.log('Storing phone Number') ;
phoneAuthProvider
.verifyPhoneNumber(phoneNumber, recaptchaVerifier.current)
.then((id) => {
// console.log('verification:',id);
setVerificationId(id);
navigation.navigate("DumOtp", {verificationId: id})
});
};
return (
<NativeBaseProvider>
<FirebaseRecaptchaVerifierModal
ref={recaptchaVerifier}
firebaseConfig={firebase.app().options} />
<Grid >
<LinearGradient
colors={['#64B278', '#03621B']}
style={styles.linearStyle}/>
<Row size={40}
style={styles.containerRow}>
<Image
source={{uri: 'https://d2j6dbq0eux0bg.cloudfront.net/images/30049435/1646525107.jpg'}}
alt="Subhiksha Logo"
width= {150}
height={150}/>
</Row>
<Row size={5}
style={styles.textStyle}>
<Text
style={styles.welcomeText}>Welcome</Text>
</Row>
<Row size={5}
style={styles.textStyle}>
<View>
<Text style={styles.phoneText}>Enter your phone number to contine</Text>
</View>
</Row>
<Row size={10}
style={styles.justifyCenter}>
<Input
style={styles.inputText}
placeholder="Enter your phone Number"
placeholderTextColor= "white"
onChangeText={text => setPhoneNumber(text)}
maxLength={13}
keyboardType='phone-pad'/>
</Row>
<Row size={20}
style={styles.justifyCenter}>
<Pressable
style={styles.pressableStyle}
onPress={sendVerification}>
{/* onPress = {() => */}
{/* text.length < 10 ? Alert.alert("Invalid Submission", "Please Enter 10 digit Mobile Number to continue") : navigation.navigate("DumOtp")}> */}
<Text
style={styles.pressableTextStyle}>Generate OTP</Text>
</Pressable>
</Row>
</Grid>
</NativeBaseProvider>
)
}
export default DummyWelcome
This is another screen where otp will be auto captured.
import React,{ useState, useEffect, useRef } from 'react'
import { NativeBaseProvider, Image, View, Pressable, Text, Button } from 'native-base'
import { Col, Row, Grid } from "react-native-easy-grid";
import { LinearGradient } from 'expo-linear-gradient';
import OTPInputView from '#twotalltotems/react-native-otp-input'
import Clipboard from '#react-native-community/clipboard'
import styles from '../styles/styles';
import AsyncStorage from '#react-native-async-storage/async-storage';
import firebase from '../firebase';
import { FirebaseRecaptchaVerifierModal } from 'expo-firebase-recaptcha';
const DummyOtp = ({ navigation, route }) => {
const [seconds, setSeconds] = useState(60);
const [code, setCode] = useState('');
// const [verificationId, setVerificationId] = useState(null);
const recaptchaVerifier = useRef(null);
const {verificationId} = route.params;
// console.log(code)
useEffect(() => {
if (seconds > 0) {
setTimeout(() => setSeconds(seconds - 1), 1000);
} else {
setSeconds('OTP Expired!');
}
});
const confirmCode = async () => {
try {
const dataa = await AsyncStorage.getItem('phoneNumber');
if(dataa!== null){
const credential = firebase.auth.PhoneAuthProvider.credential(
verificationId,
code
);
firebase
.auth()
.signInWithCredential(credential)
.then((result) => {
// console.log(result);
navigation.navigate("DumQuestion1");
});
}
}
catch (error) {
console.log(error)
}
}
return (
<NativeBaseProvider>
{/* <FirebaseRecaptchaVerifierModal
ref={recaptchaVerifier}
firebaseConfig={firebase.app().options}/> */}
<Grid >
<LinearGradient
colors={['#64B278', '#03621B']}
style={styles.linearStyle}
/>
<Row size={30}
style={styles.justifyCenter}>
<Image
source={{uri: 'https://d2j6dbq0eux0bg.cloudfront.net/images/30049435/1646525107.jpg'}}
alt="Subhiksha Logo"
width= {150}
height={150}
/>
</Row>
<Row size={5}
style={styles.textStyle}>
<Text
style={styles.welcomeText}>Welcome</Text>
</Row>
<Row size={5}
style={styles.textStyle}>
<View>
<Text style={styles.phoneText}>Enter one time password to contine</Text>
</View>
</Row>
<Row size={10}
style={styles.otpRow}>
<OTPInputView
style={styles.otpStyles}
pinCount={6}
autoFocusOnLoad
codeInputFieldStyle={styles.codeInputFieldStyle}
codeInputHighlightStyle={styles.codeInputHighlightStyle}
onChangeText={text => setCode(text)}
onCodeFilled = {(code => {
setCode(code);
})}
/>
</Row>
<Row size={10}
style={styles.centerContainer}>
<Text style={styles.otpTimerText}>{seconds}</Text>
</Row>
<Row size={10}
style={styles.centerContainer}>
<Text underline style={styles.otpNotRecieved}>Didn't receive OTP?</Text>
<Text style={styles.resendText}> Resend</Text>
</Row>
<Row size={15}
style={{alignItems: 'flex-start', justifyContent: 'center', marginTop: 10}}>
<Pressable
style={styles.pressableStyle}
onPress={confirmCode}>
<Text
style={styles.pressableTextStyle}>Authenticate</Text>
</Pressable>
</Row>
{/* <Row size={15}
style={{alignItems: 'flex-start', justifyContent: 'center', marginTop: 10}}>
<Pressable
style={styles.pressableStyle}
onPress={() => console.log(verificationId)}>
<Text
style={styles.pressableTextStyle}>Login</Text>
</Pressable>
</Row> */}
</Grid>
</NativeBaseProvider>
)
}
export default DummyOtp;