Opening/Closing Modal From Nested Screen Animation Issue

[cmrigney]

Current Behavior

Opening/closing a modal from a nested screen creates a jumpy animation in the background screen (which does not occur when navigating from the root level).

Expected Behavior

I would expect it to animate the background screen the same way the root level modal navigation does.

How to reproduce

Run on iOS with this snack: https://snack.expo.io/EztQ1YPCk
I followed recommendations here to setup the modal navigation: https://reactnavigation.org/docs/modal/#creating-a-modal-stack

Your Environment

software	version
iOS or Android	iOS 14.2
@react-navigation/native	5.8.10
@react-navigation/stack	5.12.8
react-native-gesture-handler	^1.5.0
react-native-safe-area-context	^3.1.9
react-native-screens	2.10.1
react-native	0.63.2
expo	N/A
node	12.16.3
npm or yarn	1.21.1

[jacobmolby]

For anybody having this problem, try having a RootNavigator with no screens, but only navigators.
Nested under the RootNavigator, you would then have two navigators:

• Screens
• Modals
  They would then contain the actual screens, you will navigate to.

<RootStackNavigator.Navigator
      initialRouteName="Screens"
      screenOptions={{
        headerShown: false,
        cardOverlayEnabled: true,
        gestureEnabled: true,
      }}>
      <RootStackNavigator.Screen
        name="Screens"
        component={ScreensNavigator}
      />
      <RootStackNavigator.Screen
        name="Modals"
        options={{
          gestureEnabled: true,
            screenOptions: {
            cardStyle: { backgroundColor: 'transparent', opacity: 0.99 },
            ...TransitionPresets.ModalPresentationIOS,
            },
          mode: 'modal',
        }}
        component={ModalsNavigator}
      />
</RootStackNavigator.Navigator>

[satya164]

As mentioned here, the modal presentation animation needs to be configured on the whole stack: https://reactnavigation.org/docs/stack-navigator/#transitionpresets

We also recommend having a modal stack at root as in the documentation you have linked.

[arunim2405]

@satya164 @jacobmolby I have a drawer navigator at the root of my app, any suggestions on how I should proceed?

[github-actions]

Hey! This issue is closed and isn't watched by the core team. You are welcome to discuss the issue with others in this thread, but if you think this issue is still valid and needs to be tracked, please open a new issue with a repro.

[minhlenhat-itr]

have anyone solved this problem yet? :( i have the same issuse @cmrigney