React Native Navigation: I renamed two files to swap them and the code. React native navigation messing up now. I had two files Register 4 and Register 5. I then renamed Register 4 to Register 5 and Register 5 to Register 4. React native navigation is now operating as if I did not make the change. It renders Register4 as if it was Register5 and does not register the new Register4 that i added renamed.
Register4 is supposed to be a form for a password and Register5 is supposed to be a form for a phone number.
Here is the App.js with the nav stack
const OutsideLayout = () => {
return(
<InsideStack.Navigator>
<InsideStack.Screen name="Login" component={Login}/>
<InsideStack.Screen name="Register" component={Register}/>
<InsideStack.Screen name="Register2" component={Register2}/>
<InsideStack.Screen name="Register3" component={Register3}/>
<InsideStack.Screen name="Register4" component={Register4}/>
<InsideStack.Screen name="Register5" component={Register5}/>
<InsideStack.Screen name="Register6" component={Register6}/>
</InsideStack.Navigator>
)
}
export default function App() {
const [user, setUser] = useState(null);
useEffect(() => {
onAuthStateChanged(FIREBASE_AUTH, (user) => {
console.log('user', user);
setUser(user);
})
}, [])
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Login">
{user ? (
<Stack.Screen name='Inside' component={InsideLayout} options={{headerShown:false}}/>
) : (
<Stack.Screen name='Outside' component={OutsideLayout} options={{headerShown:false}}/>
)
}
</Stack.Navigator>
</NavigationContainer>
);
}
Here is my register 4
onst Register4 = ({navigation, route}) => {
const[password, setPassword] = useState("");
return(
<KeyboardAvoidingView
style={styles.container}
behavior="padding"
>
<View style={styles.inputContainer}>
<Text> Password</Text>
<TextInput
style={styles.input}
placeholder="password"
onChangeText={setPassword}
/>
</View>
<View style={styles.buttonContainer}>
<TouchableOpacity
onPress={navigation.navigate("Register5", {firstName: route.firstName,
lastName: route.lastName, DateOfBirth: route.DateOfBirth, Username: route.Username,
Password: password}
)}
style={[styles.button, styles.buttonOutline]}
>
<Text style={styles.buttonOutlineText}>Next</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
inputContainer: {
width: '80%'
},
input: {
backgroundColor: 'white',
paddingHorizontal: 15,
paddingVertical: 10,
borderRadius: 10,
marginTop: 5,
},
buttonContainer: {
width: '60%',
justifyContent: 'center',
alignItems: 'center',
marginTop: 40,
},
button: {
backgroundColor: '#0782F9',
width: '100%',
padding: 15,
borderRadius: 10,
alignItems: 'center',
},
buttonOutline: {
backgroundColor: 'white',
marginTop: 5,
borderColor: '#0782F9',
borderWidth: 2,
},
buttonText: {
color: 'white',
fontWeight: '700',
fontSize: 16,
},
buttonOutlineText: {
color: '#0782F9',
fontWeight: '700',
fontSize: 16,
},
});
export default Register4;
Here is my Register5
const Register5 = ({navigation, route}) => {
const phoneInput = useRef(null);
const phonenumber = useRef(null);
const [fphonenumber, setFphonenumber] = useState('');
const setValid = useRef(null);
const recaptchaVerifier = useRef(null);
const [verificationId,setVerificationID] = useState('');
const [code,setCode] = useState('');
const sendVerification = () => {
const phoneProvider = new PhoneAuthProvider(FIREBASE_AUTH);
phoneProvider
.verifyPhoneNumber(fphonenumber, recaptchaVerifier.current)
.then((vid) => {
setVerificationID(vid);
setFphonenumber("");
})
.catch((error) => {
// show an alert in case of error
alert(error.message);
});
}
//Also check the wether the phone number is already in the database
const confirmCodeAndUpdateUser = async (verification, authcode) => {
const credential = PhoneAuthProvider.credential(verification, authcode);
const {user} = await signInWithCredential(FIREBASE_AUTH, credential)
.then(() => {
setCode("");
var user = FIREBASE_AUTH.currentUser
updateProfile(user, {
displayName: route.firstName + " " + route.lastName
}
)
}).then(() => {
var user = FIREBASE_AUTH.currentUser
updatePassword(user, route.Password).then(() => {}).catch((error) => {
console.log(error)})
var database_ref = Database.ref();
var user_data = {
full_name: user.displayName,
date_Of_Birth: route.DateOfBirth,
username: route.Username,
}
database_ref.child('users/' + user.uid).set(user_data);
})
.catch((error) => {
// show an alert in case of error
alert(error.message);
});
}
return(
<KeyboardAvoidingView
style={styles.container}
behavior="padding"
>
<FirebaseRecaptchaVerifierModal
ref={recaptchaVerifier}
firebaseConfig={firebaseConfig}
attemptInvisibleVerification={true}
/>
{
!verificationId && (
<><View style={styles.inputContainer}>
<Text> Phone Number</Text>
<PhoneInput
autoFocus={true}
ref={phoneInput}
style={styles.input}
defaultCode="US"
placeholder="999-999-9999"
autoFormat={false}
onChangeText={(number) => {
phonenumber.current = number;
} }
onChangeFormattedText={(number) => {
setFphonenumber(number);
} } />
</View><View style={styles.buttonContainer}>
<TouchableOpacity
disabled={!phonenumber?.current}
onPress={() => {
console.log(phonenumber.current);
console.log(route.password)
setValid.current = phoneInput.current?.isValidNumber(phonenumber.current);
if (setValid.current != true) {
alert("Phone Number is invalid. Please try a different number.");
} else {
sendVerification();
}
} }
style={[styles.button, styles.buttonOutline]}
>
<Text style={styles.buttonOutlineText}>Send Verification Code</Text>
</TouchableOpacity>
</View></>
)}
{verificationId && (
<View style={styles.buttonContainer}>
<TextInput
style={styles.input}
placeholder="0000000"
keyboardType='number-pad'
onChangeText={(text) => {
setCode(text);
console.log
}}
/>
<TouchableOpacity
onPress={() => {
console.log(code);
confirmCodeAndUpdateUser(verificationId, code)
}}
style={[styles.button, styles.buttonOutline]}
>
<Text style={styles.buttonOutlineText}>Confirm Verification Code</Text>
</TouchableOpacity>
</View>)}
