CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
Q. Eude
Q. Eude

Reputation: 881

undefined is not an object (evaluating 'this.props.navigation') react navigation

I'm using React Stack Navigator in React Native App. I have a problem with the navigation props.

Here is my component where I call my navigate method.

class CommandsList extends React.Component {
    constructor(props){
        super(props);
    }


    addCommand(){
        this.props.navigation.navigate("CreateCommand");
    }
    render() {
        return (
            <SafeAreaView style={{flex:1}}>
                <MyList itemsUrl="http://localhost:9000/commands"/>
                <Button title="Ajouter" onPress={this.addCommand}></Button>
            </SafeAreaView>
        );
    }
}

export default StackNavigator({
    CommandsList : {
        screen : CommandsList,
    },
});

And my App.js

const RootStack = StackNavigator(
    {
        CommandsList: {
            screen: CommandsList,
        },
        CreateCommand: {
            screen: CreateCommand,
        }
    },
    {
        initialRouteName: 'CommandsList'
    }
);

export default class App extends React.Component {
    render() {
        return <RootStack/>;
    }
}

I don't understand why I have an error on navigate methods. :/

Upvotes: 1

Views: 688

Answers (1)

Pritish Vaidya
Pritish Vaidya

Reputation: 22189

You need to bind your reference either using bind in the constructor or by using the fat arrow function to reference this to the context

addCommand = () => {
        this.props.navigation.navigate("CreateCommand");
}

or 

constructor() {
   super()
   this.addCommand = this.addCommand.bind(this);
}

Also you may check this article

Upvotes: 2

Related Questions