react-native-navigation giving error “undefined is not an object (evaluating '_this.props.navigation.navigate')”

Question

I'm trying to navigate to the home page from login page but my login-form is in another folder named "component", When I'm navigating from the login page using touchableOpacity it is working, But when I'm doing same thing from login-form component it is giving me an error. Can someone tell me what I'm doing wrong.

Here is the code which I'm trying to perform.

code of Login.js

import React, {Component} from 'react';
import {Text, View, ScrollView} from 'react-native';
import LoginForm from '../components/LoginForm';

type Props = {};
export default class Login extends Component<Props> {
    static navigationOptions = {
        header: null
    }
    render() {
        return (
            <ScrollView>
                <View>
                    <LoginForm/>
                </View>
                <View>
                    <Text> Skip login and goto</Text>
                    <Text onPress={()=>this.props.navigation.navigate('Home')}>
                        Home
                    </Text>
                </View>
            </ScrollView>
        );
    }
}

code of LoginForm.js

import React, {Component} from 'react';
import {
    View,
    Text,
    TextInput,
    TouchableOpacity,
} from 'react-native';

type Props = {};
export default class LoginForm extends Component<Props> {
    render() {
        return (
            <View>
                <TextInput
                    placeholder={'Email'}
                    keyboardType={'email-address'}
                    autoCapitalize={'none'}
                />
                <TextInput
                    placeholder={'Password'}
                    secureTextEntry={true}
                />
                <TouchableOpacity
                    activeOpacity={0.6}
                    onPress={()=>this.props.navigation.navigate('Home')}
                >
                    <Text>
                        Home
                    </Text>
                </TouchableOpacity>
            </View>
        );
    }
}

here is the screenshot of error: Error when navigating to page in another folder

Please help me to get out of this error. Thanks in advance. :)

Answer 1

In the end of your LoginForm.js you need to put export {LoginForm};

If only this not work, try make your import like this: import {LoginForm} from '../components/LoginForm';

Answer 2

You can use withNavigation or you should pass navigation as a props to child component.

 import React, {Component} from 'react'; import { View, Text, TextInput, TouchableOpacity, } from 'react-native'; import { withNavigation } from 'react-navigation'; type Props = {}; class LoginForm extends Component<Props> { render() { return ( <View> <TextInput placeholder={'Email'} keyboardType={'email-address'} autoCapitalize={'none'} /> <TextInput placeholder={'Password'} secureTextEntry={true} /> <TouchableOpacity activeOpacity={0.6} onPress={()=>this.props.navigation.navigate('Home')} > <Text> Home </Text> </TouchableOpacity> </View> ); } } export default withNavigation(LoginForm);