I can't pass parameters using react-navigation in react-native while navigating from a tab navigator screen to a stack navigator screen

Question

I think this is pretty straight forward when it comes to passing between screens of tab navigators but there seems to be a problem while trying to pass parameters from a tab navigator screen to a stack navigator screen in react-native using react-navigation.

I tried this:

onPress={() => {
    this.props.navigation.navigate('review', {
    aa1: 86,
    bb1: 'anything you want here',
    });
}}

And this:

onPress={() => this.props.navigation.dispatch(NavigationActions.navigate({ routeName: 'review', params: { aa1: 'x' }, }))}

as the onPress handler of my TouchableOpacity. None of them work. I can navigate but I can't get the params.

Below is how I try to get the parameters in the target stack navigator screen:

const { navigation } = this.props;
//if a is not passed, No a is the default value.
const a = this.props.navigation.getParam('aa1', 'NO a');
const b = navigation.getParam('bb1', 'No b');

Any ideas?

Answer 1

Use navigation.push instead of navigation.navigate.

Reference: Oficial Docs.

Answer 2

I was facing the same problem, and i saw your own answer. The reason why this happens easily is that you are sending information to the stack, and not to the screens. As you can see in https://reactnavigation.org/docs/nesting-navigators, when you want to pass parameters to another screen inside a stack you need to specify the stack, then the screen and then the parameters, just like that:

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

To be honest you can just put the parameters right with the screen, as in:

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