I am learning React Native and Expo. I trying to build an application that enables the user to log in using the phone number I have an issue “iOS Bundling failed 6ms Unable to resolve module ./screens/Phone Auth form ..”
I have been trying for almost a while to find a way to log in via the mobile number through Expo and React Native, but I have not found useful resources.
In all my attempts, many problems appear. I have tried several methods. Can I win from using the registration feature via the phone number?
App.js
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import PhoneAuth from './screens/PhoneAuth';
export default function App() {
return (
<View style={styles.container}>
<PhoneAuth/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
PhoneAuth.js
import React, { useRef, useState } from 'react';
import { TouchableOpacity, Text, TextInput, View } from 'react-native';
import { FirebaseRecaptchaVerifierModal } from 'expo-firebase-recaptcha';
import Constants from 'expo-constants';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";
// other services is needed
// import styles from './styles';
const PhoneAuth = () => {
const [phoneNumber, setPhoneNumber] = useState('');
const [code, setCode] = useState('');
const [verificationId, setVerificationId] = useState(null);
const recaptchaVerifier = useRef(null);
const sendVerification = () => {
const phoneProvider = new firebase.auth.PhoneAuthProvider();
phoneProvider
.verifyPhoneNumber(phoneNumber, recaptchaVerifier.current)
.then(setVerificationId);
};
const confirmCode = () => {
const credential = firebase.auth.PhoneAuthProvider.credential(
verificationId,
code
);
firebase
.auth()
.signInWithCredential(credential)
.then((result) => {
console.log(result);
});
};
return (
<KeyboardAwareScrollView contentContainerStyle={styles.container}>
<View>
<FirebaseRecaptchaVerifierModal
ref={recaptchaVerifier}
firebaseConfig={Constants.manifest.extra.firebase}
/>
<TextInput
placeholder="Phone Number"
onChangeText={setPhoneNumber}
keyboardType="phone-pad"
autoCompleteType="tel"
style={styles.textInput}
/>
<TouchableOpacity
style={styles.sendVerification}
onPress={sendVerification}
>
<Text style={styles.buttonText}>Send Verification</Text>
</TouchableOpacity>
<TextInput
placeholder="Confirmation Code"
onChangeText={setCode}
keyboardType="number-pad"
style={styles.textInput}
/>
<TouchableOpacity style={styles.sendCode} onPress={confirmCode}>
<Text style={styles.buttonText}>Send Verification</Text>
</TouchableOpacity>
</View>
</KeyboardAwareScrollView>
)
}
export default PhoneAuth;
