Open stack screen from Tab screen in react native navigation

Question

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.

Answer 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>