React Navigation V6 Multi Modal Transition Setup

Today I wanted share a quick snippet for React Navigation V6, how to setup a multi-modal transition structure with the use of their Group API.

Let’s say you wanted 2 (or more) modal types, one group of modals that opened in full screen and another group that opened in the Presentation mode.

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator, TransitionPresets } from '@react-navigation/stack';

// stacks
import StackHome from './StackHome';

// modal screens
import ModalOnboarding from '../screens/ModalOnboarding';
import ModalSelectPhoto from '../screens/ModalSelectPhoto';

const RootStack = createStackNavigator();

export default () => (
      screenOptions={({ route, navigation }) => ({
        headerShown: false,
        gestureEnabled: true,
        cardOverlayEnabled: true
      /* your regular stack or tab navigation */
        <RootStack.Screen name="StackHome" component={StackHome} />

      /* modal(s) grouping for Slide From Bottom */
          presentation: 'modal',
        <RootStack.Screen name="ModalOnboarding" component={ModalOnboarding} />

      /* modal(s) grouping for Presentation */
          presentation: 'modal',