Navigation issue react native - reactjs

Question

I'm doing wrong with the navigation, I use SwitchNavigator to handle the auth and app navigation
After performing login I try to redirect user to the AppNavigation but Im got this error :
undefined is not an object (evaluating 'this.props.navigation')
Navigation.js
import { createSwitchNavigator, createAppContainer } from 'react-navigation'
import AuthNavigation from './AuthNavigation'
import AppNavigation from './AppNavigation'
const SwitchNavigator = createSwitchNavigator(
{
Auth: AuthNavigation,
App: AppNavigation
},
{
initialRouteName: 'Auth'
}
)
const AppContainer = createAppContainer(SwitchNavigator)
export default AppContainer
LoginScreen.js
import React, { memo, useState } from 'react';
import { TouchableOpacity, StyleSheet, Text, View } from 'react-native';
import Background from '../Components/Background';
import Logo from '../Components/Logo';
import Header from '../Components/Header';
import Button from '../Components/Button';
import TextInput from '../Components/TextInput';
import BackButton from '../Components/BackButton';
import { theme } from '../CustomProperties/Themes';
import { emailValidator, passwordValidator } from '../CustomProperties/utils';
import Login from '../Components/Login';
const LoginScreen = ({ navigation }) => {
const [email, setEmail] = useState({ value: '', error: '' });
const [password, setPassword] = useState({ value: '', error: '' });
const _onLoginPressed = () => {
const emailError = emailValidator(email.value);
const passwordError = passwordValidator(password.value);
if (emailError || passwordError) {
setEmail({ ...email, error: emailError });
setPassword({ ...password, error: passwordError });
return;
}
else {
const login = new Login();
login.realmLogin(email.value, password.value);
}
};
return (
<Background>
<BackButton goBack={() => navigation.navigate('HomeScreen')} />
<Logo />
<Header>Welcome back.</Header>
<TextInput
label="Email"
returnKeyType="next"
value={email.value}
onChangeText={text => setEmail({ value: text, error: '' })}
error={!!email.error}
errorText={email.error}
autoCapitalize="none"
autoCompleteType="email"
textContentType="emailAddress"
keyboardType="email-address"
/>
<TextInput
label="Password"
returnKeyType="done"
value={password.value}
onChangeText={text => setPassword({ value: text, error: '' })}
error={!!password.error}
errorText={password.error}
secureTextEntry
/>
<View style={styles.forgotPassword}>
<TouchableOpacity
onPress={() => navigation.navigate('ForgotPasswordScreen')}
>
<Text style={styles.label}>Forgot your password?</Text>
</TouchableOpacity>
</View>
<Button mode="contained" onPress={_onLoginPressed}>
Login
</Button>
<View style={styles.row}>
<Text style={styles.label}>Don’t have an account? </Text>
<TouchableOpacity onPress={() => navigation.navigate('RegisterScreen')}>
<Text style={styles.link}>Sign up</Text>
</TouchableOpacity>
</View>
</Background>
);
};
const styles = StyleSheet.create({
forgotPassword: {
width: '100%',
alignItems: 'flex-end',
marginBottom: 24,
},
row: {
flexDirection: 'row',
marginTop: 4,
},
link: {
fontWeight: 'bold',
},
});
export default memo(LoginScreen);
Login.js
import React, { Component } from 'react';
import {
Alert,
Button,
KeyboardAvoidingView,
Image,
StyleSheet,
Text,
TouchableHighlight,
View
} from 'react-native';
import Auth0 from 'react-native-auth0';
var credentials = require('../auth0-credentials');
const auth0 = new Auth0(credentials);
export default class Login {
constructor(props) {
//super(props);
this.state = { viewLogin: true };
this.realmLogin = this.realmLogin.bind(this);
this.createUser = this.createUser.bind(this);
}
navigateHomeApp() {
this.props.navigation.navigate("App");
};
onSuccess(credentials) {
auth0.auth
.userInfo({ token: credentials.accessToken })
.then(profile => {
//console.log(credentials);
//console.log(profile);
this.props.onAuth(credentials, profile);
})
.catch(console.error);
}
alert(title, message) {
Alert.alert(
title,
message,
[{ text: 'OK', onPress: () => console.log('OK Pressed') }],
{ cancelable: false }
);
}
realmLogin(username, password) {
auth0.auth
.passwordRealm({
username: username,
password: password,
realm: 'Username-Password-Authentication',
scope: 'openid profile email',
audience: 'https://' + credentials.domain + '/userinfo'
})
.then(credentials => {
this.onSuccess(credentials);
this.navigateHomeApp();
})
.catch(console.error);
}
createUser(username, password) {
auth0.auth
.createUser({
email: username,
password: password,
connection: 'Username-Password-Authentication',
})
.then(success => {
console.log(success)
this.alert('Success', 'New user created')
//navigation.navigate('LoginScreen');
})
.catch(error => {
this.alert('Error', error.json.description)
});
}
webAuth(connection) {
auth0.webAuth
.authorize({
scope: 'openid profile email',
connection: connection,
audience: 'https://' + credentials.domain + '/userinfo'
})
.then(credentials => {
this.onSuccess(credentials);
})
.catch(error => this.alert('Error', error.error_description));
};
}
Sound like I can't access the navigation object who was first declare on the LoginScreen
const LoginScreen = ({ navigation })
Any help would be appreciate

Answer 1

You are calling this.props.navigation.navigate("App") in Login.js class which is just utility class. Navigation works in component
LoginScreen.js
const onNavigateCallback = () => {
this.props.navigation.navigate("App");
}
const _onLoginPressed = () => {
........
if (emailError || passwordError) {
......
}
else {
const login = new Login();
login.realmLogin(email.value, password.value, onNavigateCallback); // Add this here
}
};
Login.js
realmLogin(username, password, callback = undefined) {
auth0.auth
.passwordRealm({
username: username,
password: password,
realm: 'Username-Password-Authentication',
scope: 'openid profile email',
audience: 'https://' + credentials.domain + '/userinfo'
})
.then(credentials => {
this.onSuccess(credentials);
// this.navigateHomeApp(); // remove this from here
if(callback) callback(); // Add this here
})
.catch(console.error);
}

Answer 2

try
navigateHomeApp =()=> {
this.props.navigation.navigate("App");
};