navigation.navigate is not a function

Question

I'm using navigation to navigate my react native app and I couldn't Paypass this issue. I did as the docs but nothing works for me.

The problem is I'm trying to use the navigation option to add a header and right button to navigate me to another screen, but it keeps giving me this error: "navigation.navigate is not a function. (in navigation.navigate is undefined)

Here is my code:

    static navigationOptions = (navigation) => {
        return {
            title: 'Review Jobs',
            headerRight: (<Title onPress={()=>{navigation.navigate('settings')}}>Settings</Title>)
        };
    };

thank you

Answer 1

This is a common problem with React, specially when you don't understand the newest JS standard (like ES6, that is used by React).

So, your problem is conceptual here. React components receive a single object, named props, that contains all the props. Normally, you use the deconstructing form to obtain directly some attributes of props. In this case, you want to have props.navigation.

You can deconstruct the props object in the arrow function arguments, that is what the documentation says, with ({navigation}) => ... instead of (navigation) => ...

That is the same as using (props) => ... and later do props.navigation

You will also need to change your onPress function. Using a {...} block in arrow function will not return anything unless you specify return. If you doesn't wrap around your body function with {...}, then it is the same as writing { return ...}. So, if you want to return navigation.navigate('settings'), you have to delete the surrounding {...} or write return inside.

    static navigationOptions = ({navigation}) => {
        return {
            title: 'Review Jobs',
            headerRight: (<Title onPress={()=> navigation.navigate('settings')}>Settings</Title>)
        };
    };

Also, you could do the same with your navigationOptions function:

    static navigationOptions = ({navigation}) => ({
        title: 'Review Jobs',
        headerRight: (<Title onPress={() => navigation.navigate('settings')}> Settings </Title>),
    });