How do I create a react-native full-screen modal that will cover a SafeAreaView with tabs?

Question

If I have a bottom tab navigator and I the screens within that navigator to navigate to a modal which will be truly full-screen (covering SafeAreaView), how do i I do that? From what i understand, AppContainer has to be rendered within SafeAreaView, if I'm using SafeAreaView. So that makes it tricky to use a modal outside of SafeAreaView.

const Tabs = createBottomTabNavigator(
  {
    Home,
    ScreenA,
    ScreenB,
    ScreenC,
  },
  {
    tabBarOptions: {
      safeAreaInset: { bottom: 'never' },
    },
  }
);

const TabsAndModal = createStackNavigator(
  {
    Tabs,
    Modal,
  },
  {
    mode: 'modal',
    headerMode: 'none',
    initialRouteName: 'Tabs',
  },
);

const AppContainer = createAppContainer(TabsAndModal);

const App = () => {
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: 'blue' }}>
      <AppContainer />
    </SafeAreaView>
  );
};

This causes the modal to slide up from the bottom, but it starts at the SafeAreaView on an iphone X, so the blue background is visible just below. What is the right way to do this, so that the modal slides up from the very bottom of an an iphone x and the tabs are still rendered within SafeAreaView?

Answer 1

I overlooked something fairly straightforward in createBottomTabNavigator:

tabBarOptions: {
  style: {
    backgroundColor: 'readTheDocsOfReactNavigationTabs',
  },
}