I created multiple pages, but when I use goBack()
on Android, I go back to the defaultView but can not press anything and the screen looks smaller than the usual.
My screens will be created like following:
...
const cardOptions = {
cardOverlayEnabled: true,
gestureEnabled: true,
...TransitionPresets.ModalPresentationIOS,
}
export const MainStack: React.FC<Props> = ({ initialRouteName }) => {
return (
<PushProvider>
<TopicCreateFormProvider>
<WorkgroupCreateFormProvider>
<NavigationContainer>
<Stack.Navigator
screenOptions={{
headerShown: false,
}}
initialRouteName={initialRouteName}
>
<Stack.Screen name="BottomTabs" component={BottomTabs} />
<Stack.Group screenOptions={cardOptions}>
<Stack.Screen
name="ScreenOne"
component={ScreenOne}
/>
<Stack.Screen
name="ScreenTwo"
component={ScreenTwo}
/>
</Stack.Group>
...
I navigate between the screens with navigation.navigate('ScreenOne')`` from the
useNavigation` hook
Then I use on a screen const { goBack } = useNavigation()
and trigger goBack()
onPress on a Button.
Then the screen looks like this, and I am not able to interact with it.
---- EDIT ----
It seems to be a problem with the nested route.
So I found the issue. The problem is with TransitionPresets.ModalPresentationIOS
when you use it in android the goBack
something brokes. It seams that the screen will be not rendered, because whenn I toggle the inspector the screen appers.