CODEWITHSUNDEEP
react-nativereact-navigation
kev.g
kev.g

Reputation: 361

react native :undefined is not an object (evaluating '_this2.props.navigation.navigate')

I'm new with react-native and i'm trying to use StackNavigator but it's not working I'm trying to call a component and render it when you click on a button. But i'm getting this error : undefined is not an object (evaluating '_this2.props.navigation.navigate')

This is my main Component:

export default class Home extends Component<{}> {

    constructor(props) {
        super(props);
        this.email = null;
        this.amount = null;
        this.device = null;
    }

    render() {
        return (
            <ScrollView style={styles.styleSV}>
                <Text
                    style={styles.styleLogin}>
                    Login
                </Text>
                <View style={styles.styleForm}/>
                <TextInput placeholder='email' onChangeText={(text) => this.email }/>
                <TextInput placeholder='amount' onChangeText={(text) => this.amount }/>
                <TextInput placeholder='device' onChangeText={(text) => this.device }/>
                <View style={styles.styleButtonSignup}/>
                <Button
                    onPress={() =>
                        this.props.navigation.navigate('PaypalPayment', { email: this.email })
                    }
                    title='Next'
                />
            </ScrollView>
        );
    }

}

const NavigationScreen = StackNavigator({
    PaypalPayment: { screen: PaypalPayment },
    Home: { screen: Home}
});

AppRegistry.registerComponent('paypal', () => NavigationScreen);

Upvotes: 2

Views: 2652

Answers (2)

Siraj Alam
Siraj Alam

Reputation: 10025

Tha's how I solved it.

Go to the parent component of the component in which you are using navigation. And call the component as follows.

<Component {...this.props} />

This makes the navigation also available to the child component.

Upvotes: 1

kev.g
kev.g

Reputation: 361

I found out what was my mistake:

On my App.js i didn't call my StackNavigator 

export const RootNavigation = StackNavigator({
    Home: { screen: Home },
    PaypalPayment: { screen: PaypalPayment }
});

AppRegistry.registerComponent('paypal', () => RootNavigation);

export default class App extends Component<{}> {

   render() {
        return (
            <RootNavigation/>
        )
    }
}

Now it's working.

I used this documentation: https://reactnavigation.org/docs/intro/#Introducing-Stack-Navigator

Upvotes: 1

Related Questions