Navigate after login - react-native

Question

I'm creating an app using React-Native. I added Firebase Auth to my application, but I can't navigate to the Homescreen after log in.
This is my code:
constructor (in LoginScreen):
constructor(props){
super(props)
this.state = {
email: '',
password: '',
status: '',
}
this.handlePress = this.handlePress.bind(this)
}
app.js:
import React from 'react';
import { AppRegistry } from 'react-native';
import { StackNavigator } from 'react-navigation';
import LoginScreen from './app/screens/LoginScreen';
import RegisterScreen from './app/screens/RegisterScreen';
import HomeScreen from './app/screens/HomeScreen';
const Stylelist = StackNavigator({
Login: { screen: LoginScreen },
Register: { screen: RegisterScreen},
Home: {screen: HomeScreen},
},{headerMode: "none"});
export default Stylelist;
handlePress function(function in the Loginscreen):
handlePress(){
firebaseRef.auth().signInWithEmailAndPassword(this.state.email, this.state.password).then(function(firebaseUser){
//Success, move to homepage.
console.log("logged in!")
navigate("Home")
}).catch(function(error){
//Failed to log in, print error.
});
}
This "logged in" does gets printed in the console but won't move to the Homescreen.
this is the render method in the loginScreen.js:
import React, { Component } from 'react';
import { View, StyleSheet, Text, TouchableOpacity, KeyboardAvoidingView, TextInput, StatusBar, Image } from 'react-native';
import { firebaseRef } from '../services/Firebase';
export default class LoginScreen extends Component{
constructor(props){
super(props)
this.state = {
email: '',
password: '',
status: '',
}
this.handlePress = this.handlePress.bind(this)
}
//Trying to login the account with email and password provided by the user.
handlePress(){
firebaseRef.auth().signInWithEmailAndPassword(this.state.email, this.state.password).then(function(firebaseUser){
//Success, move to homepage.
console.log("logged in!")
this.props.navigation.navigate("Home");
}).catch(function(error){
//Failed to log in, print error.
});
}
render(){
const { navigate } = this.props.navigation;
return(
<KeyboardAvoidingView behavior="padding" style={styles.container}>
<StatusBar
barStyle="light-content"
/>
<View style={styles.logoContainer}>
<Image
style={styles.logo}
source={require('../assets/Logo.png')}/>
</View>
<View style={styles.formContainer}>
<TextInput
style={styles.txtInput}
keyboardType="email-address"
placeholder="email"
onChangeText={(text)=> this.setState({email: text})}
placeholderTextColor="#FFFFFF"
onSumbitEditing={()=>this.passwordInput.focus()}
returnKeyType="next"
autoCapitalize="none"
autoCorrect={false}
/>
<TextInput
style={styles.txtInput}
placeholder="password"
placeholderTextColor="#FFFFFF"
onChangeText={(text)=> this.setState({password: text})}
returnKeyType="go"
autoCapitalize="none"
autoCorrect={false}
secureTextEntry
ref={(input)=>this.passwordInput = input}
/>
<TouchableOpacity style={styles.logBtn} onPress={this.handlePress}>
<Text style={styles.logTxt}>
Login
</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.regBtn} onPress={()=>navigate("Register")}>
<Text style={styles.regTxt}>
create account
</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
);
}
}
I don't get any error printed and the app does not crash, what am I doing wrong?

Answer 1

I think you are missing the context inside the promise and navigate no longer exists there. So let's pass a parameter navigate callback to make it work:
Firstly, add navigate as a parameter to handlePress
handlePress(navigate){
firebaseRef.auth().signInWithEmailAndPassword(this.state.email, this.state.password).then(function(firebaseUser){
//Success, move to homepage.
console.log("logged in!")
navigate("Home");
}).catch(function(error){
//Failed to log in, print error.
});
}
Secondly, modify the TouchableOpacity to call handlePress properly:
...
<TouchableOpacity style={styles.logBtn} onPress={() => this.handlePress(navigate)}>
<Text style={styles.logTxt}>
Login
</Text>
</TouchableOpacity>
...

Answer 2

I know this was resolved but, no resolution was posted here. If anyone is having issues make sure you can access the navigation prop (try console logging it) another issue may be if you're conditionally rending your navigation stack based if auth exists, that will mean that one stack does not have access to the to other