[native-stack] [iOS] BottomTabNavigator hide/show bug in Native Stack

Moved from react-navigation/react-navigation#6772. Originally opened by @guvenakcoban

---

The problem

• When I tried to hide bottom tabs in native stack, tabs going out but the screen’s height doesn’t update. If I change orientation of device or pull the status bar, it’s fixing. See the gif.
• This problem is only appear when using native stack navigator, there’s no problem with createStackNavigator.

Code

• Basic tab based navigation with native stack

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { NavigationNativeContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { useScreens } from 'react-native-screens';

useScreens();

const Home = props => {
  return (
    <View
      style={{
        flex: 1,
        backgroundColor: 'red',
        alignItems: 'center',
        justifyContent: 'center',
      }}>
      <Text>Home Screen</Text>
      <TouchableOpacity onPress={() => props.navigation.navigate('Settings')}>
        <Text>GoToSettings</Text>
      </TouchableOpacity>
    </View>
  );
};

const Profile = props => {
  return (
    <View
      style={{
        flex: 1,
        backgroundColor: 'red',
        alignItems: 'center',
        justifyContent: 'center',
      }}>
      <Text>Profile Screen</Text>
    </View>
  );
};

const Settings = props => {
  return (
    <View
      style={{
        flex: 1,
        backgroundColor: 'red',
        alignItems: 'center',
        justifyContent: 'center',
      }}>
      <Text>Settings Screen</Text>
    </View>
  );
};

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

function HomeStackScreen() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

const App = () => {
  return (
    <NavigationNativeContainer>
      <Tab.Navigator
        screenOptions={({ route }) => {
          const routeName = route.state
            ? route.state.routes[route.state.index].name
            : 'Home';

          return { tabBarVisible: routeName === 'Home' };
        }}
        tabBarOptions={{ inactiveBackgroundColor: 'green' }}>
        <Tab.Screen name="Home" component={HomeStackScreen} />
        <Tab.Screen name="Profile" component={Profile} />
      </Tab.Navigator>
    </NavigationNativeContainer>
  );
};

export default App;

Your Environment

software	version
@react-navigation/core	^5.0.0-alpha.27
@react-navigation/native	^5.0.0-alpha.18
@react-navigation/native-stack	^5.0.0-alpha.16
react-native-screens	^2.0.0-alpha.18
@react-navigation/bottom-tabs	^5.0.0-alpha.25

[satya164]

The page doesn’t exist doesn’t mean that you can’t do it. I’m pretty sure you can nest a tab navigator inside the first screen of the stack in v4.

[watadarkstar]

@satya164 Haha yeah I realized that after I posted this comment. Long day!