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

I was able to figure and solve the problem. Problem was that name of the screen I was trying to navigate to and the name of the stack navigator (name of the stack navigator in the containing/parent tab navigator) that contained that screen was the same. And although navigation was working, the parameters were not being passed as I said in the problem description. Navigation was working because the screen that I was trying to navigate was set as the initial route in the containing stack navigator. Apparently, I was navigating and passing the parameters to the containing stack navigator. Once I changed the name of the stack navigator, the problem was solved.

Answer 2

Use navigation.push instead of navigation.navigate.

Reference: Oficial Docs.