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

Question

I'm nesting screens and passing props to the screens such as header title, and a render of json. Earlier today everything was working but now it gives me the error of getParams.

HomeStack.js, here in the title I get the title by the FlatList render in the screen which navigates to this one.

        <Screen
          name='errorHP'
          component={errorHP}
          options={{
            headerTitle: () => <Header navigation={navigation} title={navigation.getParam('name')} />,
            headerTitleAlign: 'center',}}
        /> 

HP.js, here the flatlist renders and will export the render to the page errorHP

<FlatList data={filteredSearch} keyExtractor={(item) => item.key} renderItem={({item}) => (
                <TouchableOpacity onPress={() => navigation.navigate('errorHP', item)}>
                    <Card>
                        <Text style={globalStyles.titleText}> {item.name} </Text>
                    </Card>
                </TouchableOpacity>
            )} />

errorHP.js, here are listed the errors and after click, will pass again params to a new page which gets the error details.

export default function errorHP ({navigation}) {
    const data = navigation.getParam('errors');
    const errors = Object.keys(data);
    return (
        <View style={globalStyles.container}>
            <FlatList data={errors} renderItem={({item}) => (
                <TouchableOpacity>
                    <Card>
                        <Text style={globalStyles.titleText}> {item} </Text>
                    </Card>
                </TouchableOpacity>
            )} />

I've been messing around and still cant solve this problem. Thanks for your attention!

Answer 1

You need to get params from the route prop:

export default function errorHP ({navigation, route}) {
  const data = route.params.errors;

  // whatever
}

And

<Screen
  name="errorHP"
  component={errorHP}
  options={({ route, navigation }) => ({
    headerTitle: () => (
      <Header navigation={navigation} title={route.params.name} />
    ),
    headerTitleAlign: 'center',
  })}
/>