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

Question

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. :/

add navigate at App.js so the import should import { StackNavigator, navigation} from 'react-navigation'; — flix
– flix, Commented Apr 16, 2018 at 11:47

Pritish Vaidya · Accepted Answer · 2018-04-16 11:54:52Z

2

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

edited Apr 16, 2018 at 11:54

answered Apr 16, 2018 at 11:47

Pritish Vaidya

22.3k4 gold badges62 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related