0

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.

Antoni
  • 1,316
  • 2
  • 16
  • 42
  • If you use the inspector from the device debug menu, when does it say you are tapping on? might be a modal issue, where it navigates back but the modal is still present – Krismu Oct 06 '21 at 11:50
  • @Krismu when I open the toggle the inspector, the modal apperes. – Antoni Oct 06 '21 at 12:01
  • then have a look at this answer: https://stackoverflow.com/questions/49804332/how-to-close-a-react-navigation-modal-with-multiple-screens-in-it – Krismu Oct 06 '21 at 12:44
  • @Krismu sadly this is outdated and do not work. – Antoni Oct 06 '21 at 13:26
  • what version are you using? – Krismu Oct 06 '21 at 13:34
  • if you are on v6.x you can just use ```navigation.getParent()?.goBack()``` – Krismu Oct 06 '21 at 13:44
  • @Krismu yes I am using v6.x. I already tried `getParent()` but this still do not work – Antoni Oct 06 '21 at 13:56
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/237890/discussion-between-antoni-and-krismu). – Antoni Oct 06 '21 at 13:58
  • @Krismu I found this at the docs https://reactnavigation.org/docs/nesting-navigators/#navigation-actions-are-handled-by-current-navigator-and-bubble-up-if-couldnt-be-handled – Antoni Oct 06 '21 at 13:59

2 Answers2

0

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.

Antoni
  • 1,316
  • 2
  • 16
  • 42
0

Try set detachPreviousScreen: false on your cardOptions

Matheus Souza
  • 11
  • 1
  • 1
    You answer would be better to posted as a comment rather than a post. – David Dec 03 '22 at 05:52
  • This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/33300164) – Vojin Purić Dec 05 '22 at 15:55