How can I create a bottom tab navigator that navigates to a full-screen modal without covering the SafeAreaView? It seems that in order to use a modal outside of SafeAreaView, AppContainer must be rendered within it. However, this setup makes it difficult to achieve a truly full-screen modal.
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>
);
};
The current implementation causes the modal to slide up from the bottom, but it starts at the SafeAreaView on an iPhone X, showing the blue background just below. What is the best approach to have the modal slide up from the very bottom of an iPhone X while keeping the tabs within SafeAreaView?