Does a bottom tab need its own separate stack - react-native

Question

When navigating to a screen from my second bottom tab(tab2), the app switches to tab1 and then navigates to the screen. When you click on the text to change screens, you can see the tab1 screen flash right before it swipes to the page.
How can I stay on the tab I am navigating from? I want to navigate to screen3 while keeping the tab on tab2.
Why is it changing tabs upon navigation?
To reproduce the bug... Click Tab2 -> click the text -> and you can see the bottom tab switch and the tab1 screen flashing before going to screen3.
Here is a snack code reproducing my project exactly along with my app.js below.
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Stack.Navigator
initialRouteName="Home">
<Stack.Screen name="Home" component= {Home} options={{headerShown: false}}/>
<Stack.Screen name="Screen1" component= {Screen1} options={{headerShown: false}}/>
<Stack.Screen name="Screen2" component= {Screen2} options={{headerShown: false}}/>
<Stack.Screen name="Screen3" component= {Screen3} options={{headerShown: false}}/>
</Stack.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator
initialRouteName="Tab1"
screenOptions={{
tabBarActiveTintColor: 'white',
tabBarInactiveTintColor: '#4d4d4d',
tabBarStyle: {
backgroundColor: '#d1cfcf',
borderTopColor: 'transparent',
},
}}
>
<Tab.Screen
name="Tab1"
component={MyTabs}
options={{
tabBarLabel: 'Tab1',
headerShown: false,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Tab2"
component={Screen2}
options={{
tabBarLabel: 'Tab2',
headerShown: false,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
</NavigationContainer>
);
}
const Stack = createStackNavigator();

Answer 1

In your demo code, navigating to screen1 shows the bottomTabBar at the bottom, is this your required use case or a bug. I am assuming that it is bug and you don't want that.
To achieve that , it is recommended to use screens first and then BottomTabs. So define your bottomTabs in screen1 then your existing code works as you want it.
your App should return
<NavigationContainer>
<Stack.Navigator
initialRouteName="Tabs">
<Stack.Screen name="Tabs" component= {MyTabs} options={{headerShown: false}}/>
<Stack.Screen name="Screen1" component= {Screen1} options={{headerShown: false}}/>
<Stack.Screen name="Screen2" component= {Screen2} options={{headerShown: false}}/>
<Stack.Screen name="Screen3" component= {Screen3} options={{headerShown: false}}/>
</Stack.Navigator>
your MyTabs function should return
<Tab.Navigator
initialRouteName="Home"
screenOptions={{
tabBarActiveTintColor: 'white',
tabBarInactiveTintColor: '#4d4d4d',
tabBarStyle: {
backgroundColor: '#d1cfcf',
borderTopColor: 'transparent',
},
}}
>
<Tab.Screen
name="Home"
component={Home}
options={{
tabBarLabel: 'Tab1',
headerShown: false,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Tab2"
component={Screen2}
options={{
tabBarLabel: 'Tab2',
headerShown: false,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
Working snack code is here
Edit: for bottomTabs to be visible even after navigation, you should create another Stacknavigator as you did for Tab1.
your code should look something like this,
const Tab = createBottomTabNavigator();
function MyTabs() {
return (
<Stack.Navigator initialRouteName="Home">
<Stack.Screen
name="Home"
component={Home}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Screen1"
component={Screen1}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Screen2"
component={Screen2}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Screen3"
component={Screen3}
options={{ headerShown: false }}
/>
</Stack.Navigator>
);
}
function MySecondTabs() {
return (
<Stack.Navigator initialRouteName="Screen2">
<Stack.Screen
name="Home"
component={Home}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Screen1"
component={Screen1}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Screen2"
component={Screen2}
options={{ headerShown: false }}
/>
<Stack.Screen
name="Screen3"
component={Screen3}
options={{ headerShown: false }}
/>
</Stack.Navigator>
);
}
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator
initialRouteName="Tab1"
screenOptions={{
tabBarActiveTintColor: 'white',
tabBarInactiveTintColor: '#4d4d4d',
tabBarStyle: {
backgroundColor: '#d1cfcf',
borderTopColor: 'transparent',
},
}}>
<Tab.Screen
name="Tab1"
component={MyTabs}
options={{
tabBarLabel: 'Tab1',
headerShown: false,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Tab2"
component={MySecondTabs}
options={{
tabBarLabel: 'Tab2',
headerShown: false,
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="home" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
</NavigationContainer>
);
}
working snack code