Passing data from one screen to another screen with react-navigation - reactjs

Question

I'm currently passing the data to one component in react-native with some code which is shown as below:
class Login extends Component {
signInWithGoogle = async () => {
try {
const result = await Google.logInAsync({
iosClientId: IOS_CLIENT_ID,
androidClientId: ANDROID_CLIENT_ID,
scopes: ["profile", "email"]
});
if (result.type === "success") {
console.log(
"LoginScreen.js.js 21 | ",
result.user.givenName,
result.user.familyName,
result.user.email,
result.user.photoUrl
);
this.props.navigation.navigate(
"MyDrawer",
(username = result.user.givenName),
(lastname = result.user.familyName),
(email = result.user.email),
(photoUrl = result.user.photoUrl)
);
return result.accessToken;
} else {
return { cancelled: true };
}
} catch (e) {
console.log("LoginScreen.js.js 30 | Error with login", e);
return { error: true };
}
};
}
My question is how do I pass the data to a different component?

Answer 1

you need to pass an object as second parameter to the navigate method that is in props.
to pass a data to a different component, provide an object as the second argument for the navigate function
change this
this.props.navigation.navigate(
"MyDrawer",
(username = result.user.givenName),
(lastname = result.user.familyName),
(email = result.user.email),
(photoUrl = result.user.photoUrl)
);
to
this.props.navigation.navigate("MyDrawer",{
name: result.user.givenName,
lastname : result.user.familyName,
email :result.user.email,
photoUrl = result.user.photoUrl
});
now in the component that you are passing the data to, you can get the keys using the getKey method of react-navigation
TargetComponent.js
render() {
email = this.props.navigation.getParam("email", defaultValue);
password= this.props.navigation.getParam("password", defaultValue);
}