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.

CodePudding user response：

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