Navigating to another screen after user authentication - react-native

Question

I have a login app some users in a Firebase database. When a user logs in into their account succesfully, I want to redirect them to another screen I have. Unfortunately, every single approach I've tried since a couple of days does not work as intended.
This is my code, I'm omitting the StyleSheet and the libraries (and yes, I have my other screen imported into the App.js)
class HomeScreen extends Component {
state = { username: null, password: null, nonValidInput: null }
_onSubmit = ({ navigation }) =>{
const { navigate } = this.props.navigation;
if(EmailValidator.validate(this.state.username) == true) {
this.setState({ nonValidInput: false });
const { username, password } = this.state;
try {
firebase.auth().signInWithEmailAndPassword(this.state.username, this.state.password).then(navigator.navigate('Age'));
} catch {
Alert.alert(
'Error',
'Los datos no son correctos',
[
{ text: 'Ok' }
],
{ cancelable: false }
);
}
} else {
this.setState({ nonValidInput: true });
}
}
render() {
return (
<KeyboardAwareScrollView contentContainerStyle={styles.container} scrollEnabled
enableOnAndroid={true} resetScrollToCoords={{x:0, y:0}}>
<View style={styles.logo}>
<Image source = {logo} style={styles.img}/>
<Text style={styles.textLogoPrimary}>Neuron App</Text>
<Text style={styles.textLogoSecondary}>Test</Text>
</View>
<View style={styles.formElement}>
<Text style={styles.formText}>Correo Electrónico</Text>
<TextInput keyboardType='email-address' placeholder='Email' onChangeText={value => this.setState({ username: value })}
style={styles.formInput} />
{this.state.nonValidInput ? (
<Text style={styles.textAlert}>Correo electrónico no valido.</Text>
) : null}
</View>
<View style={styles.formElement}>
<Text style={styles.formText}>Contraseña</Text>
<TextInput style={styles.formInput} placeholder='Contraseña' onChangeText={value => this.setState({ password: value })}
secureTextEntry={true}/>
</View>
<View style={styles.buttonView}>
<TouchableOpacity style={styles.button} onPress={this._onSubmit}>
<Text style={styles.buttonText}>Iniciar</Text>
</TouchableOpacity>
</View>
</KeyboardAwareScrollView>
);
}
}
const Stack = createStackNavigator();
class App extends Component {
render() {
return (
<NavigationContainer>
<Stack.Navigator screenOptions={{headerShown: false}} initialRouteName="Home">
<Stack.Screen name='Home' component={HomeScreen} />
<Stack.Screen name='Age' component={AgeInput} />
</Stack.Navigator>
</NavigationContainer>
);
}
}
Thanks for your help

Answer 1

What is navigator? You can use navigate from navigation prop directly:
firebase.auth().signInWithEmailAndPassword(this.state.username, this.state.password).then(() => this.props.navigation.navigate('Age'));
Also, make sure you call the function in the then clause in the right way.