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.

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?

CodePudding user response：

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

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