0

I have a set of screens set up in Stack.Navigation in the following manner

<Stack.Navigation>
 <Stack.Screen name = 'Home' />
 <Stack.Screen name = 'Tabs' />
 <Stack.Screen name = 'Settings' />
</Stack.Navigation>

I also have a tabs system set up in the Tabs screen in the following manner.

<Tab.Navigation>
 <Tab.Screen name = 'Tab1' />
 <Tab.Screen name = 'Tab2' />
 <Tab.Screen name = 'Settings' />
</Tab.Navigation>

Now I need the tab screen Settings to open up the Stack screen Settings. How do I go about doing this with React Native Navigation?

Any help or suggestion will be appreciated.

Edit:

My Tabs screen contains more than just the Tabs, example:

<View>
 <View>
  Lots of other content here 
 </View>
 <Tab.Navigation>
  <Tab.Screen name = 'Tab1' />
  <Tab.Screen name = 'Tab2' />
  <Tab.Screen name = 'Settings' />
 </Tab.Navigation>
</View>

So the tab content will only cover part of the screen. When I move to the Settings screen I need it to take up the whole screen as it would do automatically when invoked from Stack.Nav.

Zephyr
  • 1,612
  • 2
  • 13
  • 37

2 Answers2

1

You can add a listener to the tab screen, prevent the default action & navigate to the settings stack screen on tab press.

...

<Tab.Navigation>
 <Tab.Screen 
   name = 'Settings' 
   listeners={() => ({
      tabPress: (e) => {
          e.preventDefault();
          navigation.navigate('Settings');
      }
   })} />
</Tab.Navigation>
Pasindu Dilshan
  • 366
  • 1
  • 15
0

If I understand it correctly, you are wanting to open the stack Setting Screen from the tab navigator.

Would pointing them to the same component, achieve what you are aiming for?

example:

<Stack.Navigation>
 <Stack.Screen name = 'Home' />
 <Stack.Screen name = 'Tabs' />
 <Stack.Screen name = 'Settings' component={SettingsScreen}/>
</Stack.Navigation>

Followed by:

<Tab.Navigation>
 <Tab.Screen name = 'Tab1' />
 <Tab.Screen name = 'Tab2' />
 <Tab.Screen name = 'Settings' component={SettingsScreen} />
</Tab.Navigation>

If not, please share more details about the expected behavior.

g90
  • 506
  • 3
  • 18
  • Hi @g90! Thank you for responding. So I've tried what you've suggested. When I render the Settings screen from Stack.Navigation it renders a full screen. Problem is when I render Settings screen from Tab nav it comes with the bottom tab navigator. I need it to look exactly the same as when it is invoked from the Stack – Zephyr Aug 15 '21 at 20:43
  • I've updated my post to elaborate further on what the Tabs screen contains – Zephyr Aug 15 '21 at 20:49