I've figured out how to navigate from the signupScreen to homeScreen using React-navigation along with firebase-authentication but I've added an additional screen. This is the profileSetupScreen. My issue is that I can't navigate from the set-up screen to homeScreen after getting the data from the user. The finish button is suppposed to 'addData' then navigate to homeScreen but I can't figure that out.
Please ask if you need more info. Here is a portion of my code. What should I add?
//...
//This adds the users data onto firebase
const addData = () => {
try {
const docRef = addDoc(collection(db, "users"), {
nickname,
bio,
selectedImage,
dbEmail,
});
console.log("Document written with ID:", docRef.id);
} catch (e) {
console.error("Error adding document: ", e);
}
};
//Overall UI
return (
//Once 'Finish' is pressed, it saves the data onto FireStore and should navigate to homeScreen
<View style={styles.all}>
<Text style={styles.title}>Profile Setup</Text>
<View style={styles.selectionView}>
<TouchableOpacity style={styles.completebtn} onPress={onSignOut}>
<Text style={styles.backtxt}>Back</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.completebtn} onPress={addData}>
<Text style={styles.completetxt}>Finish</Text>
</TouchableOpacity>
</View>
//...
It depends on whether or not ProfileSetupScreen is a Screen defined in the navigator. If it is, then the navigation framework will pass the navigation prop to the ProfileSetupScreen and you can use it as follows via the screen props.
const ProfileSetupScreen = ({navigation}) => {
const addData = () => {
try {
const docRef = addDoc(collection(db, "users"), {
nickname,
bio,
selectedImage,
dbEmail,
});
console.log("Document written with ID:", docRef.id);
navigation.navigate(”HomeScreen”)
} catch (e) {
console.error("Error adding document: ", e);
}
};
return (…)
}
Notice, that navigation.navigate(”HomeScreen“) take the name of the screen to which we want to navigate and which is defined in the navigator, thus if your Home Screen is defined there with a different name, then you need to use that name.
If your ProfileSetupScreen is not a screen in your navigator, then the navigation prop will not be passed to the screen.
In this case you have two choices. Either pass the navigation prop down to the component from a parent screen that is a defined screen in the navigator or use the useNavigation hook as follows.
const ProfileSetupScreen = (props) => {
const navigation = useNavigation()
…
}