Github Project Sample

React Native Notes 30: How to iOS Modal Presentation like Navigation on Android?

with iOS 13, we got the full screen modal presentation like navigation, let’s see how to do it the same on Android with react-navigation

GitHub - WrathChaos/react-native-ios-like-navigation-transition

I just love this transition modal navigation style when I first see it. Really cool and extremely useful for lots of use-cases.

First let’s see how to do this on iOS with react-navigation v6

How to achieve this?

We’re going to use Stack.Navigator and Stack.Group for achieving this modal transition.

<Stack.Navigator
        initialRouteName="home"
        screenOptions={{
          gestureEnabled: true,
          ...(isAndroid && TransitionPresets.ModalPresentationIOS),
        }}
      >
        <Stack.Group
          screenOptions={{
            headerShown: false,
            presentation: "modal",
          }}
        >
          <Stack.Screen name="home" component={HomeScreen} />
        </Stack.Group>
        <Stack.Group
          screenOptions={{
            headerShown: false,
            presentation: "modal",
          }}
        >
          <Stack.Screen name="detail" component={DetailScreen} />
        </Stack.Group>
</Stack.Navigator>

The point is screenOptions with presentation: “modal” part. We HAVE TO set this. This will set the default iOS Presentation Modal with the Stack Group. It will simply set it self.

Android Specific Part

screenOptions={{
    gestureEnabled: true,
    ...(isAndroid && TransitionPresets.ModalPresentationIOS),
}}

We have to set ...TransitionPresets.ModalPresentationIOS on container Stack.Navigator. For closing the screen like a modal gestureEnabled: true is a must for Android as well.

I suggest that you should check if it is android or not to set the TransitionPreset.

iOS & Android Sample

That’s it 🍻
You will achieve this transition modal just like that 🥳

Here is the fully functional example on Github:

GitHub - WrathChaos/react-native-ios-like-navigation-transition