TypeError : props.navigation.getParam is not a function. In(props.navigation.getParam('name')

Question

I am facing issue on TypeError : props.navigation.getParam is not a function. In (props.navigation.getParam('name'). I am using reactNavigation version 5.x. this code is working in reactNavigation 3. What am I doing wrong?

Here is my code

export default class ChatScreen extends Component {
static navigationOption = ({ navigation }) => {
    return {
        title: navigation.getParam('name', null)
    }
}
 
constructor(props) {
    super(props);
   
  
    this.state = {
        person:{
           name:props.navigation.getParam('name'),
            phone:props.navigation.getParam('phone'),
            // name:'Raushan',
          //   phone:9931428888
        },
        textMessage: ''
    };
   
}

Error in state section value. Stack navigator

`

const Stack = createStackNavigator();
function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Auth">
        <Stack.Screen name="AuthLoading" component={AuthLoadingScreen} />
        <Stack.Screen name="App" component={HomeScreen} options={{ title: 'Chats' }}/>
        <Stack.Screen name="Chat" component={ChatScreen} options={({ route }) => ({ title: route.params.name })}/>
        <Stack.Screen name="Auth" component={LoginScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
export default App;

`

and Navigate screen

onPress={()=>this.props.navigation.navigate('Chat',item)}

Have you checked the value of `navigation` in your constructor and in your navigationOptions? — Benjamin Godlove, Mar 21 '20 at 20:06
Check react navigation version I think you are using 5.x, they have changed this functionality see this https://reactnavigation.org/docs/params — Abhi, Jul 02 '20 at 09:12
React Navigation v5 has a lot of breaking changes if you are coming from v3 or v4. Read this `Upgrading from 4.x` docs to know more about the changes of library in detail. https://reactnavigation.org/docs/upgrading-from-4.x/ — KeshavDulal, Jan 08 '21 at 16:55

score 60 · Accepted Answer · answered Mar 22 '20 at 14:00

60

use props.route.params.name this is working

 this.state = {
    person:{
      name: props.route.params.name,
      phone: props.route.params.phone,
    },
    textMessage: ''
};

answered Mar 22 '20 at 14:00

Raushan Singh

1,070
1
9
18

1

any reason why to use props.route.params.name instead of this.props.navigation.getParam("name") ? – Swift Oct 23 '20 at 12:41
2

@Swift it's probably because of new version of navigation library – Boris Mitioglov Jan 13 '21 at 18:16
3

This works. Also it's wild that everywhere navigation.getParams is being used but it is not valid anymore – Vishwas Singh Chouhan Jul 09 '21 at 09:44
1

It's wild that react-navigation has so many breaking changes over their major releases. I've been working on this app for over 4 years and when anything breaks because of an update, it's usually react-navigation. Combine that with Apple not supporting older versions of software and you've got a lot of work that nobody asked for. – ThaJay Apr 26 '22 at 16:26

score 4 · Answer 2 · answered Dec 24 '20 at 21:56

Mostly you are using the latest version of React-Navigation with the same old setup.

So, You gonna pass your custom param as the second argument in the navigation function that I pointed HERE:

// Index SCREEN:=>
const IndexScreen = ({ navigation: { navigate } }) => {

  return (
      <View style={Styles.container}>
      <FlatList
        data={state}
        keyExtractor={(item) => `${item.id}`}
        renderItem={({ item }) => (
          <TouchableOpacity
            style={{ ...Styles.singleBlog, ...Styles.rowing }}
            onPress={() => navigate('Previewing', { id: item.id })} // HERE
          >
            <Text style={Styles.blogTitle}>{`${item.title}`}</Text>
          </TouchableOpacity>
        )}
      />
    </View>
  );
};

Then you will be able to extract the id wirth a new function called params like so:

// PREVIEWING SCREEN:=>
const PreviewScreen = ({ route: { params } }) => {
  const { state } = useContext(Context);

  const { id } = params;
  return (
    <View style={Styles.container}>
      <Text>preview post with id {id}</Text>
    </View>
  );
};

score 3 · Answer 3 · answered Mar 09 '22 at 19:47

As of version 6.x you need to use route.

function Index({ navigation }) {
  return (
    <View>
      <Button
        title="Details"
        onPress={() => {
          navigation.navigate('Details', {
            itemId: abcdef
          });
        }}
      />
    </View>
  );
}

function DetailsScreen({ route, navigation }) {
  const { itemId } = route.params;

  // console.log(itemId);
  // abcdef

  return (
    // Content...
  );
}

Source: https://reactnavigation.org/docs/params

Swift · Answer 4 · 2020-10-27T07:51:45.917

1

Yes I found that in version2, 3, 4 of navigation using getParam. Link is as follows: https://reactnavigation.org/docs/2.x/params/ when using version5 of navigation using props.navigation.route.param as per documentation. https://reactnavigation.org/docs/params/ - version5.

edited Oct 27 '20 at 07:51

answered Oct 23 '20 at 12:48

Swift

829
2
12
33

score 0 · Answer 5 · answered Mar 20 '20 at 06:06

0

In class component props can be access using this keyword. So try this :

export default class ChatScreen extends Component {
  static navigationOption = ({ navigation }) => {
    return {
      title: navigation.getParam('name', null)
    }
  }

  constructor(props) {
    super(props);
    this.state = {
      person: {
        name: this.props.navigation.getParam('name'), // access with this.
        phone: this.props.navigation.getParam('phone'), //access with this.
        // name:'Raushan',
        //   phone:9931428888
      },
      textMessage: ''
    };
  }
}

answered Mar 20 '20 at 06:06

Kishan Bharda

5,446
3
30
57

Is this screen is in your stack navigator or outside ? – Kishan Bharda Mar 20 '20 at 06:11
Yes. chatscreen is in stacknavigator ({ title: route.params.name })}/> onPress={()=>this.props.navigation.navigate('Chat',item)} – Raushan Singh Mar 20 '20 at 06:13

TypeError : props.navigation.getParam is not a function. In(props.navigation.getParam('name')

5 Answers5