androidreact-nativereact-navigationreact-navigation-stack

react-navigation/native goBack bug on android


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. enter image description here

---- EDIT ----

It seems to be a problem with the nested route.


Solution

  • 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.