Passing params to nested navigators

[thijs-qv]

Current Behavior

Params are not passed between nested navigators.

Expected Behavior

Access to the passed params via the route.params object.

How to reproduce

TabNavigator
**StackNavigator
****Screen A
****Screen B
**StackNavigator
****Screen C

When Navigating from screen A or B to C (or vice versa) with props.navigation.navigate('C', {myParam: myValue}), route.params is undefined on screen C. When navigating from A to B the params do get passed. Is there any way to access these props on screen C?

I have found these threads which I believe deal with the same issue:
issue 4811
rfc 43

How can I pass params from screen A to C?

If needed I will create an example project which shows the issue.

[satya164]

Please provide a full repro

[thijs-qv]

import React from 'react';
import { View, Text, } from 'react-native';

import 'react-native-gesture-handler';
import { NavigationNativeContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';


const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

function MyTabs() {
  return (
    <Tab.Navigator initialRouteName='Stack1'>
      <Tab.Screen name="Stack1" component={Stack1} />
      <Tab.Screen name="Stack2" component={Stack2} />
    </Tab.Navigator>
  );
}

function Stack1() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="ScreenA" component={Screen1} />
      <Stack.Screen name="ScreenB" component={Screen2} />
    </Stack.Navigator>
  );
}

function Stack2() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="ScreenC" component={Screen2} />
    </Stack.Navigator>
  );
}

function Screen1(props) {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text onPress={() => props.navigation.navigate('ScreenB', {myParam: 'myValue'})} style={{marginBottom: 32}}>navigate to screen B with params</Text>
      <Text onPress={() => props.navigation.navigate('Stack2', {myParam: 'myValue'})}>navigate to screen C with params</Text>
    </View>
  );
}

function Screen2(props) {
  console.log(props)
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>myParam: {props?.route?.params?.myParam || 'params was undefined'}</Text>
    </View>
  );
}


const App: () => React$Node = () => {
  return (
    <>
     <NavigationNativeContainer>
      {MyTabs()}
      </NavigationNativeContainer>
    </>
  );
};

export default App;

This shows the issue well. Pressing the text "Navigate to screen B" will navigate to ScreenB, which shows the previously added params. Pressing the text "Navigate to screen C" will navigate to Stack2, which in turn mounts ScreenC. On ScreenC the params object is undefined.

[satya164]

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

[thijs-qv]

My bad, thanks for your help!

[v0lume]

@satya164 sorry for interrupting, but what's a workaround for 4 version? This is working only for 5 version

[Nkats]

Even for version 5 I couldn't get this to work. I think I'll use UseContext as I saw suggested on another related thread...

[raajnadar]

@Nkats read this section https://reactnavigation.org/docs/nesting-navigators/#passing-params-to-a-screen-in-a-nested-navigator

[Nkats]

@raajnadar, I must have read that link at least 10 times... still doesn't work...

Parent stack:

const MainStack = createStackNavigator()
function MainNavigator(){
  return(
    <MainStack.Navigator>
      <MainStack.Screen
        name={"CreateExpeMultiForms"}
        component={CreateExpeMultiForms}    
        />
      <MainStack.Screen
      name={"TabsNavigator"}
      component={TabsNavigator}/>
    </MainStack.Navigator>
  )
}

I'm trying to move from a screen inside the tab navigator, to one inside the stack as follows -:

  navigation.navigate("CreateExpeMultiForms", {
                screen: 'expeFormOneScreen',
                params: {
                  currentItem: someValue
                },
              })

And accessing the params as follows -:

const route = useRoute()
const {currentItem} = route.params

Navigation works. But route.params.currentItem is undefined...

[raajnadar]

Can you create a snack demo I can help you!

PS: I created an example https://snack.expo.io/@raajnadar/pass-params-from-stack-nav-to-tab-nav check for screen name & spelling

[raajnadar]

Check line no 66, name is wrong.

screen: 'InsideScreen1',

[elgambet]

Check line no 66, name is wrong.

screen: 'InsideScreen1',

Yes, I saw that error after sending the snak, thats why I delete it.

Here is the snak link (sory for the deletion y tried to delete it before your answer).

For others, as @raajnadar said be sure to be using the correct screen name.

[Jorge-L-Herrera]

What is the solution? i have the same problem that thijs-qv

[github-actions]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.

[Nkats]

What is the solution? i have the same problem that thijs-qv

If you are navigating from/to/past a modal screen, change that in some way. That was my problem, and once I reorganized the screens to not require navigation to/from modal components built on top of the screens in the navigator, passing params as defined in the documents finally worked.

[m-abdullah-nabeel]

import React from 'react';
import { View, Text, } from 'react-native';

import 'react-native-gesture-handler';
import { NavigationNativeContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';


const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

function MyTabs() {
  return (
    <Tab.Navigator initialRouteName='Stack1'>
      <Tab.Screen name="Stack1" component={Stack1} />
      <Tab.Screen name="Stack2" component={Stack2} />
    </Tab.Navigator>
  );
}

function Stack1() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="ScreenA" component={Screen1} />
      <Stack.Screen name="ScreenB" component={Screen2} />
    </Stack.Navigator>
  );
}

function Stack2() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="ScreenC" component={Screen2} />
    </Stack.Navigator>
  );
}

function Screen1(props) {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text onPress={() => props.navigation.navigate('ScreenB', {myParam: 'myValue'})} style={{marginBottom: 32}}>navigate to screen B with params</Text>
      <Text onPress={() => props.navigation.navigate('Stack2', {myParam: 'myValue'})}>navigate to screen C with params</Text>
    </View>
  );
}

function Screen2(props) {
  console.log(props)
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>myParam: {props?.route?.params?.myParam || 'params was undefined'}</Text>
    </View>
  );
}


const App: () => React$Node = () => {
  return (
    <>
     <NavigationNativeContainer>
      {MyTabs()}
      </NavigationNativeContainer>
    </>
  );
};

export default App;

This shows the issue well. Pressing the text "Navigate to screen B" will navigate to ScreenB, which shows the previously added params. Pressing the text "Navigate to screen C" will navigate to Stack2, which in turn mounts ScreenC. On ScreenC the params object is undefined.

Solved my issue