import React , { FC } from 'react' ; import { createStackNavigator , TransitionPresets } from '@react-navigation/stack' ; import Homepage from '@scenes/Homepage' ; import OtherPage from '@scenes/OtherPage' ; import ModalPage from '@scenes/ModalPage' ; import { routeOverlayOption } from './routeOptions' ; const RootStack = createStackNavigator ( ) ; const MainStack = createStackNavigator ( ) ; export const MainStackScreen = ( ) => { return ( < MainStack . Navigator initialRouteName = { 'Home' } > < MainStack . Screen name = "Home" component = { Homepage } options = { { headerShown : false , ... TransitionPresets . SlideFromRightIOS , } } /> < MainStack . Screen name = "OtherPage" component = { OtherPage } options = { { headerShown : false , ... TransitionPresets . SlideFromRightIOS , } } /> < /MainStack.Navigator>); } ; export const RootStackScreen = ( ) => { return ( < RootStack . Navigator mode = "modal" screenOptions = { routeOverlayOption } > < RootStack . Screen name = "Main" component = { MainStackScreen } options = { { headerShown : false , } } /> < RootStack . Screen name = "MyModal" component = { ModalPage } options = { { headerShown : false , ... TransitionPresets . ModalPresentationIOS , } } /> < /RootStack.Navigator>); } ;