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

Please put the code in your question and convert it to a self-contained example so people can reference this question in the future. — Melle, Oct 20 '18 at 10:57

score 41 · Accepted Answer · edited Nov 17 '20 at 17:56

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>),
    });

Ravi Singh · Answer 2 · 2022-08-11T11:08:58.323

4

use object destructuring while receiving the parameters as :

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

edited Aug 11 '22 at 11:08

answered Oct 01 '19 at 11:20

Ravi Singh

1,049
1
10
25

score 1 · Answer 3 · edited May 17 '22 at 17:10

1

You're missing the {} for navigation

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

edited May 17 '22 at 17:10

Tyler2P

2,324
26
22
31

answered May 13 '22 at 15:05

Khanh Nguyen

27
3

navigation.navigate is not a function

3 Answers3

Linked