CODEWITHSUNDEEP
react-nativereact-navigation
Kevin Etore
Kevin Etore

Reputation: 1144

React navigation undefined params

I'm trying to pass params into a new screen, and implemented it like mentioned here.

I have the following TouchableOpacity button.

<TouchableOpacity
  onPress={() => {
    this.props.navigation.navigate('SomeScreen', {
      title: 'Title',
      subTitle: 'Subtitle',
    });
  }}
>

On the other page (let's call it Somescreen), I have the following:

render() {
  const { navigation } = this.props;
  const title = navigation.getParam('title');
}

But title above is undefined: 

{ params: undefined, routeName: "Somescreen", key: "id-xx" }

My rootStack:

const RootStack = createStackNavigator({
  SomescreenA: { screen: SomescreenA },
  SomescreenB: { screen: SomescreenB },
}, { headerMode: 'none' });

Why are my params undefined in a new screen?

Upvotes: 15

Views: 45878

Answers (5)

IAMSTR
IAMSTR

Reputation: 684

if you are on react navigation v6^ use the useRoute hook to access the params object

const route = useRoute();

useRoute is a hook that gives access to the route object. It's useful when you cannot pass the route prop into the component directly, or don't want to pass it in case of a deeply nested child.

below is an implementation of this


    import { useNavigation, useRoute } from '@react-navigation/native';
    import { Pressable, Text } from 'react-native';

    function Screen1() {
      const navigation = useNavigation();

      return (
        <Pressable
          onPress={() => {
            navigation.navigate('Screen2', { caption: 'hey' });
          }}
        >
          <Text> Go to Screen 2 </Text>
        </Pressable>
      );
    }

    function Screen2() {
      const route = useRoute();

      return <Text>{route.params.caption}</Text>;
    }

Upvotes: 6

Gerson Montenegro
Gerson Montenegro

Reputation: 486

In my specific case, I was calling a nested navigator, so I had to manage how send those params to their specific screen, so I did this:

Send params this way...the regular way:

    navigation.navigate(
        'OrderNavigator',
        {itemSelected},
    );

Then, from navigator stack I did this:

const OrderNavigator = ({route: {params}}) => {
return (
    <Stack.Navigator initialRouteName="Order">
        <Stack.Screen name="Order" component={Order} options={{headerShown: false}} initialParams={params} />
    </Stack.Navigator>
);

};

And that's it. Then from the screen I got them like this:

const Order = ({route}) => {
  const {itemSelected} = route.params;
  const {first_name, last_name} = itemSelected;
  return (...)
}

Upvotes: 9

Ali Radmanesh
Ali Radmanesh

Reputation: 2536

If you face a situation where your target screen get undefined params, probably you have a nested navigation stack.

Here you have to pass params to the navigate method in this way:

navigation.navigate('Root', {
  screen: 'Settings',
  params: { user: 'jane' },
});

For more information read this page in the official docs:

https://reactnavigation.org/docs/nesting-navigators/#navigating-to-a-screen-in-a-nested-navigator

Upvotes: 44

AJ Wazzan
AJ Wazzan

Reputation: 21

The accepted answer workaround did not work for me, so apparently if you use children to render your component (in screen options) and pass route as a prop, it works

Upvotes: 2

Kraylog
Kraylog

Reputation: 7563

I've, unfortunately, encountered cases where navigate(route, params, ...) wouldn't pass the params object, just like you did.

As a workaround, I use the other variant - navigate({routeName, params, action, key}) that you can find here. It always works.

Upvotes: 3

Related Questions