Independent stack navigation outside tab and drawer navigation in React-Native - react-native

Question

I use
react-native:0.68.2
react-navigation/bottom-tabs:6.3.1
react-navigation/drawer:6.4.1
react-navigation/native:6.0.10
react-navigation/stack:6.2.1
And I have next navigation structure:
<Drawer.Navigator>
<Tab.Navigator>
<Stack.Navigator>
<Screen1>
<Screen2>
</Stack.Navigator>
</Tab.Navigator>
</Drawer.Navigator>
It looks like drawer slide menu from left side and bottom tabs on the main screen. You can see short video of it by next link
What do I want
I want to open new screen from Screen1 like independent screen (without tabs and drawer). It looks like new Activity in Android or new view controller in iOS.

Answer 1

you need to try this
const TabStack = () => {
return (
<Tab.Navigator
initialRouteName="LiveRate"
screenOptions={{
tabBarActiveBackgroundColor: colors.activeTabColor,
tabBarInactiveBackgroundColor: colors.inactiveTabColor,
tabBarStyle: {
backgroundColor: '#f46023',
height:60
},
}}>
<Tab.Screen
name="LiveRate"
component={LiveRateScreen}
options={{
tabBarLabel: () => {
return (<Text style={{color:'white', fontSize:12, marginBottom:5}}>Live Rate</Text>)
},
headerShown: false,
tabBarIcon: ({ focused }) => (
<Image
source={
focused
? Images.liverate
: Images.liverate
}
style={{
width: 30,
height: 30,
resizeMode:'contain'
// padding:5
}}
/>
),
}}
/>
<Tab.Screen
name="AboutUs"
component={AboutUsScreen}
options={{
tabBarLabel: () => {
return (<Text style={{color:'white', fontSize:12, marginBottom:5}}>About Us</Text>)
},
headerShown: false,
tabBarIcon: ({ focused, color, size }) => (
<Image
source={
focused
? Images.aboutus
: Images.aboutus
}
style={{
width: 30,
height: 30,
resizeMode:'contain'
// padding:5
}}
/>
),
}}
/>
<Tab.Screen
name="booking"
component={BookingNumberScreen}
options={{
tabBarLabel: () => {
return (<Text style={{color:'white', fontSize:12, marginBottom:5}}>Booking Number</Text>)
},
headerShown: false,
tabBarIcon: ({ focused, color, size }) => (
<Image
source={
focused
? Images.booking
: Images.booking
}
style={{
width: 30,
height: 30,
resizeMode:'contain'
}}
/>
),
}}
/>
<Tab.Screen
name="notification"
component={NotificationScreen}
options={{
tabBarLabel: () => {
return (<Text style={{color:'white', fontSize:12, marginBottom:5}}>Notification</Text>)
},
headerShown: false,
tabBarIcon: ({ focused, color, size }) => (
<Image
source={
focused
? Images.notificationbell
: Images.notificationbell
}
style={{
width: 30,
height: 30,
resizeMode:'contain'
}}
/>
),
}}
/>
</Tab.Navigator>
);
};
const NavigationUtil = () => {
return (
<NavigationContainer ref={navigationRef}>
<Stack.Navigator initialRouteName="SlpashScreen">
<Stack.Screen
name="tabStack"
component={TabStack} <----- you also pass your drawer stack
options={{headerShown: false}}
/>
<Stack.Screen
name="Registration"
component={RegistrationScreen}
options={{headerShown: false}}
/>
<Stack.Screen
name="SlpashScreen"
component={SlpashScreen}
options={{headerShown: false}}
/>
</Stack.Navigator>
</NavigationContainer>
);
};
this is my code
hop it's working