Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

React Native nested Tab and Stack Navigation weird behavior: stack only works if I press on tabs when application first opens

I’m developing an application in React Native with the following layout:

A footer tab bar with 3 screens: screen1, screen2, screen3.
Additionally, I nested another screen in screen 1 and another in screen 2 with stack navigation.

When Screen2 tab is pressed, Screen2 opens with some default data.
However, a second button in Screen 1 that opens Screen2 with user entered data.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

The function in Screen1 that goes to Screen2 is:

function onPressHandler(){

  navigation.navigate('Screen2', {data: X});
}

And data in then retrieved on Screen2.js :

const information = !route.params? 'default' : route.params.data;

Now here’s what happens: when the application opens, if I go to Screen 2 via Tab Navigation (by pressing on the footer) then when I am on Screen1 I can also access screen 2 via button (with user entered data) as many times as I like.I can switch screens as many times as I like and it works all the time.

However, if I do not do this, and just go to screen2 via Screen1 button, never pressing on Screen2 tab in the footer, I get the following error:

The action ‘NAVIGATE’ with payload {"name":"Screen2","params":{"data: xxx"}} was not handled by any navigator.

Here’s a a visual rapresentation of the application layout (hope it helps):

Screen 1 | Screen 2(data: default) | Screen 3
On Press: nestedScreen1 on Press: nestedScreen2
On Press: Screen2(data: enteredByUser)

Here’s the code:

import Screen1 from './Screen1.js';
import Screen2 from './Screem2.js'       
import Screen3 from './screen3.js';

import NestedScreen1 from './NestedScreen1.js';
import NestedScreen2 from './NedstedScreen2.js';   


import { NavigationContainer } from '@react-navigation/native';            
import {createNativeStackNavigator} from '@react-navigation/native-stack';  
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';


export default function App() {

 const Tab = createBottomTabNavigator();

 const Stack = createNativeStackNavigator();

 const StackNavigationForScreen1= () => {

    return(
      <Stack.Navigator>
          <Stack.Screen name="Screen1" component={Screen1} />
          <Stack.Screen name="NestedScreen1" component={NestedScreen1} />
     
      </Stack.Navigator>
   );}


const StackNavigationForScreen2 = () => {

   return(
     <Stack.Navigator  >
         <Stack.Screen name='Screen2' component={Screen2} />
         <Stack.Screen name='NestedScreen2' component={NestedScreen2} />

     </Stack.Navigator> 
  );}

return (

   <NavigationContainer>

     <Tab.Navigator>

        <Tab.Screen name='Screen1Tab' component={StackNavigationForScreen1}/>
        <Tab.Screen name='Screen2Tab' component={StackNavigationForScreen2}/> 
        <Tab.Screen name='Screen3' component={Screen3}/>

     </Tab.Navigator>
   </NavigationContainer>
  );}

Any idea what I might have done wrong or how to open Screen2 from Screen1 without having to press on Screen2 tab at least once first?

>Solution :

to navigate b/w nested stack you have to use something like this:-

navigation.navigate('nested_stack_screen', {
                screen: 'screen1',
                params: {
                    name:'anything'
                },
            })
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading