My React Native app has a root Stack Navigator with some screens and nested navigators:
/* Root Stack Navigator */
const disableBackButtonOpts = {
headerBackVisible: false,
gestureEnabled: false
}
<Stack.Navigator
initialRouteName={Routes.MainTab}
screenOptions={({route}) => ({
headerTitle: getHeaderTitle(route, t),
headerShown: false
})}
>
{/* Screens handling authentication and registration phases */}
<Stack.Group screenOptions={{headerShown: true, ...disableBackButtonOpts}}>
<Stack.Screen component={Authentication} name={Routes.Auth} />
<Stack.Screen component={UserDataRegistration} name={Routes.UserData} />
{/* 3 more screens ... */}
</Stack.Group>
{/* Application screens nested in BottomTab and Stack navigators */}
<Stack.Group>
<Stack.Screen component={MainTabNavigator} name={Routes.MainTab} />
<Stack.Screen component={PersonalAreaStackNavigator} name={Routes.Profile} />
{/* Home, Messages and Documents stack screens */}
</Stack.Group>
{/* Others */}
</Stack.Navigator>
What I want to achieve is that the Tab Navigator displays 4 screens belonging to 4 stack navigators and, when navigating to different screens of these stack navigators, hide the tab bar.
Therefore I declared the Tab Navigator as follows:
const screenOptions: (route: any) => BottomTabNavigationOptions = ({route}) => ({
headerTitle: getHeaderTitle(route, t),
headerShown: true,
tabBarActiveTintColor: style.activecolor,
tabBarInactiveTintColor: style.inactivecolor,
tabBarLabelStyle: style.tabBarLabel,
tabBarStyle: style.tabBar
})
<Tab.Navigator screenOptions={screenOptions}>
<Tab.Screen
component={PersonalArea} name={Routes.PersonalArea}
/>
{/* 3 more tab screens */}
</Tab.Navigator>
With PersonalArea component that is the initial screen of PersonalAreaStackNavigator, inside the root stack navigator:
/* PersonalAreaStackNavigator */
<Stack.Navigator
screenOptions={({route}) => ({
headerTitle: getHeaderTitle(route, t),
headerShown: true,
headerBackButtonMenuEnabled: true,
headerBackTitleVisible: true
})}
>
<Stack.Screen component={PersonalArea} name={Routes.PersonalArea} />
<Stack.Screen component={PersonalData} name={Routes.PersonalData} />
<Stack.Screen component={ScreenC} name={Routes.ScreenC} />
<Stack.Screen component={ScreenD} name={Routes.} />
</Stack.Navigator>
So, in this way, I have a structure as follows:
RootStack
|--Authentication Page
|--Registration Page
|--TabNavigator
| |--PersonalArea
| |--Screen B
| |--Screen C
| |--Screen D
|--PersonalAreaStack
| |--PersonalArea
| |--PersonalData
| |--Screen E
| |-- ...
|--ScreenBStack
| |--Screen B
| |-- ...
| ScreenCStack
| |--Screen C
| |-- ...
|-- ...
Following the React Navigation guide I was able to navigate between screens of the hiding the tab bar, but my problem here is that the back button is not displayed when navigating from one of the screens of the tab navigator to a stack navigator screen. For example, the path TabNavigator -> PersonalArea -> PersonalData doesn't show the back button in PersonalData screen, but TabNavigator -> PersonalArea -> PersonalData -> Screen E does (pointing to PersonalData screen).
This happens only on iOS.
How can I make the back button appear also in the first screen of the stack navigator to point to its first page included also in the tab bar?
