Redirect to screen after logging in - react-native

Question

I'd like to redirect a user to a view after login a user in with GoogleSignin instead of rendering a view
import React, { Component } from 'react';
import { AppRegistry, Platform, Text, Image, TouchableOpacity, View } from 'react-native'
import { StackNavigator, TabNavigator, NavigationActions } from 'react-navigation'
import { GoogleSignin, GoogleSigninButton } from 'react-native-google-signin'
import DashboardScreen from './Components/DashboardScreen'
// Routes
export const MyNavigator = StackNavigator({
DashboardScreen: {
name: 'DashboardScreen',
description: 'Dasboard available once logged in',
screen: DashboardScreen,
navigationOptions: {
title: 'Dashboard'
}
},
});
export default class MyApp extends Component {
//...
_signIn() {
GoogleSignin.signIn()
.then((user) => {
this.setState({
isLoggedIn: true,
user: user
})
// Redirect to screen here
})
.catch((err) => {
console.log('Signin error', err)
})
.done()
}
render() {
//...
}
}
I tried many things, I think it should be something like this:
const navigateAction = NavigationActions.navigate({
routeName: 'DashboardScreen',
params: { user: user.givenName }
})
this.props.navigation.dispatch(navigateAction)
But the console says that this.props is undefined.
Would you be able to help?
Thank you!

Answer 1

I am guessing this inside of _signIn is not bound to your class anymore but to the _signIn function.
To make it work you could modify _signIn into an arrow function :
_signIn = () => {
GoogleSignin.signIn()
.then((user) => {
this.setState({
isLoggedIn: true,
user: user
})
const navigateAction = NavigationActions.navigate({
routeName: 'DashboardScreen',
params: { user: user.givenName }
})
this.props.navigation.dispatch(navigateAction)
})
.catch((err) => {
console.log('Signin error', err)
})
.done()
}
Here is more info about how to bind this: https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56
You have several other articles you could look at as it is a common mistake in React.

Answer 2

please add myApp in stack navigator and follow this
render() {
const { navigate } = this.props.navigation;
return(
// your code
<Button onPress={() => navigate({ routeName: 'DashboardScreen' ,params: { user:userData }}) />
);
}
and you'll get the userData in DashboardScreen using this.
this.props.navigation.state.params.user