Navigating back to start screen - react-native

Question

I have two different documents with two different screens. After an e-mail validation on the first screen, I'm now able to go to the second screen. However, I want to return to the first screen. None of the mentioned approaches on the React Navigation 5.x documentation works for me.
This is the code on the App.js:
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import firebase from './firebase';
import * as EmailValidator from 'email-validator';
import { HitTestResultTypes } from 'expo/build/AR';
import logo from './assets/Circulo.png';
import AgeInput from './AgeInput';
// Clase que representa el diseño de la pantalla inicial de la app
class HomeScreen extends Component {
state = { username: null, password: null, nonValidInput: null }
_onSubmit = ({ navigation }) =>{
if(EmailValidator.validate(this.state.username) == true) {
this.setState({ nonValidInput: false });
const { username, password } = this.state;
try {
// THIS IS WHERE I GO TO THE SECOND SCREEN
firebase.auth().signInWithEmailAndPassword(this.state.username, this.state.password).then(() => this.props.navigation.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>
);
}
}
and this is the code on the AgeInput.js
import { NavigationContainer } from '#react-navigation/native';
import { createStackNavigator } from '#react-navigation/stack';
import Home from './App';
class App extends Component { // AgeInput
state = { date: null, edad: null, day: null, month: null, year: null }
_ageCalc = () => {
if(this.state.day < 32 && this.state.day > 0 && this.state.month < 13 && this.state.month > 0 && this.state.year != 0) {
var fecha = Date.parse(this.state.year + '-' + this.state.month + '-' + this.state.day);
var hoy = new Date();
var fechaNacimiento = new Date(fecha);
var edad_ahora = hoy.getFullYear() - fechaNacimiento.getFullYear();
var mes = hoy.getMonth() - fechaNacimiento.getMonth();
if (mes < 0 || (mes === 0 && hoy.getDate() < fechaNacimiento.getDate())) {
edad_ahora--;
}
this.setState({ edad: edad_ahora });
} else {
Alert.alert(
'Error',
'Por favor introduce una fecha valida',
[
{ text: 'Ok' }
],
{ cancelable: false },
);
}
}
render () {
return (
<KeyboardAwareScrollView contentContainerStyle={styles.container} scrollEnabled enableOnAndroid={true}
resetScrollToCoords={{x:0, y:0}}>
<View style={styles.topView}>
// This is the button I press to go back to the first screen
<TouchableOpacity style={styles.img} onPress={() => this.props.navigator.navigate('Home')}>
<Image source={flecha} />
</TouchableOpacity>
<View style={styles.topTextWrapper}>
<Text style={styles.topTextPrimary}>Bienvenido a Neuron</Text>
<Text style={styles.topTextSecondary}>¿O no?</Text>
</View>
</View>
<View style={styles.middleView}>
<Text style={styles.formText}>Fecha de nacimiento</Text>
<View style={styles.formRow}>
<View style={styles.textInputWrapper}>
<TextInput style={styles.formInput} placeholder='DD' keyboardType='number-pad'
onChangeText={ value => this.setState({ day: value }) }/>
</View>
<View style={styles.textInputWrapper}>
<TextInput style={styles.formInput} placeholder='MM' keyboardType='number-pad'
onChangeText={ value => this.setState({ month: value }) }/>
</View>
<View style={styles.textInputWrapper}>
<TextInput style={styles.formInput} placeholder='AA' keyboardType='number-pad'
onChangeText={ value => this.setState({ year: value }) }/>
</View>
</View>
</View>
<View style={styles.buttonView}>
<TouchableOpacity style={styles.button} onPress={this._ageCalc}>
<Text style={styles.buttonText}>CALCULAR EDAD</Text>
</TouchableOpacity>
</View>
<View style={styles.ageView}>
<Text style={styles.ageTextPrimary}>Tu edad es:</Text>
<Text style={styles.ageNumber}>{this.state.edad}</Text>
<Text style={styles.ageTextSecondary}>Años</Text>
</View>
</KeyboardAwareScrollView>
);
}
}
export default App; // AgeInput
Thanks for your help

Answer 1

You can do something like this...
render () {
const { navigate } = props.navigation;
//function to go to next screen
goToNextScreen = () => {
return navigate('Home');
return (
<KeyboardAwareScrollView contentContainerStyle={styles.container} scrollEnabled enableOnAndroid={true}
resetScrollToCoords={{x:0, y:0}}>
<View style={styles.topView}>
// This is the button I press to go back to the first screen
<TouchableOpacity style={styles.img} onPress={() => this.goToNextScreen()}>
<Image source={flecha} />
</TouchableOpacity>
<View style={styles.topTextWrapper}>
<Text style={styles.topTextPrimary}>Bienvenido a Neuron</Text>
<Text style={styles.topTextSecondary}>¿O no?</Text>
</View>
</View>
<View style={styles.middleView}>
<Text style={styles.formText}>Fecha de nacimiento</Text>
<View style={styles.formRow}>
<View style={styles.textInputWrapper}>
<TextInput style={styles.formInput} placeholder='DD' keyboardType='number-pad'
onChangeText={ value => this.setState({ day: value }) }/>
</View>
<View style={styles.textInputWrapper}>
<TextInput style={styles.formInput} placeholder='MM' keyboardType='number-pad'
onChangeText={ value => this.setState({ month: value }) }/>
</View>
<View style={styles.textInputWrapper}>
<TextInput style={styles.formInput} placeholder='AA' keyboardType='number-pad'
onChangeText={ value => this.setState({ year: value }) }/>
</View>
</View>
</View>
<View style={styles.buttonView}>
<TouchableOpacity style={styles.button} onPress={this._ageCalc}>
<Text style={styles.buttonText}>CALCULAR EDAD</Text>
</TouchableOpacity>
</View>
<View style={styles.ageView}>
<Text style={styles.ageTextPrimary}>Tu edad es:</Text>
<Text style={styles.ageNumber}>{this.state.edad}</Text>
<Text style={styles.ageTextSecondary}>Años</Text>
</View>
</KeyboardAwareScrollView>
);
}
}
export default App;

Answer 2

Just replace this :
// This is the button I press to go back to the first screen
<TouchableOpacity style={styles.img} onPress={() => this.props.navigator.navigate('Home')}>
with
// This is the button I press to go back to the first screen
<TouchableOpacity style={styles.img} onPress={() => this.props.navigation.navigate('Home')}>
Hope it help.s