import 'react-native-gesture-handler';
import React, {useState} from 'react';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import auth from "@react-native-firebase/auth";
import firestore from "@react-native-firebase/firestore";
import { useNavigation } from '@react-navigation/native';
import { TextInput } from 'react-native-gesture-handler';
export default function App() {
const [phoneNumber, setPhoneNumber] = useState('');
const [code, setCode] = useState('');
const [confirm, setConfirm] = useState(null);
const navigation = useNavigation();
const signInWithPhoneNumber = async () =>{
try{
const confirmation = await auth().signInWithPhoneNumber(phoneNumber);
setConfirm(confirmation);
}catch(error){
console.log("Error sending code: ", error.message);
}
};
const confirmCode = async () => {
try{
const userCredential = await confirm.confirm(code);
const user = userCredential.user;
const userDocument = await firestore()
.collection("users")
.doc(user.uid)
.get();
if(userDocument.exists){
navigation.navigate("Dashboard");
}else{
navigation.navigate("Detail", {uid:user.uid});
}
}catch(error){
console.log("Invalid code.", error.message);
}
};
return (
<View style={styles.container}>
<Text>phone number authentication using firebase</Text>
{!confirm ? (
<>
<Text>enter phone number</Text>
<TextInput
placeholder='+7 (000) 000 00 00'
value={phoneNumber}
onChange={setPhoneNumber}
keyboardType='phone-pad'
/>
<TouchableOpacity onPress={signInWithPhoneNumber}>
<Text>Send code</Text>
</TouchableOpacity>
</>
):(
<>
<Text>Enter the code sent to your phone</Text>
<TextInput
placeholder='enter code'
value={code}
onChange={setCode}
keyboardType='number-pad'
/>
<TouchableOpacity onPress={confirmCode}>
<Text></Text>
</TouchableOpacity>
</>
)}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});