React Native: Stack Navigator mode='card' or mode='modal' is not working (expo project)

Question

Neither mode="card" or mode="modal" is working while Stack Navigating. Tested in OnePlus 5T and Android Studio(Google Pixel)

On Android and IOS, default Stack Navigator mode is "card", but when tested, a simple navigate transition takes place. Even after specifying the mode="card" or mode="modal", still no effect on the transition is shown while navigating.

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Text, Button } from 'react-native';


const First=({navigation})=>{
  return (
    <>
    <Text>First Page</Text>
    <Button title="Second Page" onPress={()=>navigation.navigate("Second")}/>
    </>);
}


const Second=()=>{
  return (
    <Text>Second Page</Text>);
}


const Stack=createStackNavigator();

const StackNavigate=()=>{
  return (
  <Stack.Navigator mode='modal'>
    <Stack.Screen name="First" component={First}/>
    <Stack.Screen name="Second" component={Second}/>
  </Stack.Navigator>)
}


export default function App() {
    return (
      <NavigationContainer >
        <StackNavigate/>
      </NavigationContainer>

  );
}

You must set `headerMode='flaot' or 'screen'` if you use `mode='modal'` and want to change the transition. Also check this: https://reactnavigation.org/docs/stack-navigator/#mode — OAslan, Dec 15 '20 at 07:12

score 8 · Answer 1 · edited Jul 27 '21 at 23:28

I faced a similar issue trying to apply screen transitions to my react native app. It seems the mode visual option requires some more information as to how the screens would require a transition. The thing that actually works without fail is the Transition Presets in the Pre-Made Configs described in the documentation.

Reference from the link:

import { TransitionPresets } from '@react-navigation/stack';

// ...

<Stack.Screen
  name="Profile"
  component={Profile}
  options={{
    title: 'Profile',
    ...TransitionPresets.ModalSlideFromBottomIOS,
  }}
/>;

The currently available transitions are:

SlideFromRightIOS , ModalSlideFromBottomIOS , ModalPresentationIOS , FadeFromBottomAndroid , RevealFromBottomAndroid , ScaleFromCenterAndroid , DefaultTransition , ModalTransition

All of these are the standard transitions provided by iOS and Android

To make this process much more concise and easier, you could try adding these transitions using the defaultNavigationOptions while defining a navigator, just how it is done in ReactNavigation4.x and this will add the transitions into all the aforementioned screens.

score 2 · Answer 2 · answered Nov 21 '21 at 10:31

mode="modal" is removed in favor of presentation: 'modal'

presentation: 'modal' shows the new presentation style modal introduced in iOS 13. It also adjusts things like status bar height in the header automatically that you had to do manually before.

If you don't want to use the new animations, you can change it to your liking using the animation related options. To use the iOS modal animation from React Navigation 5, use TransitionPresets.ModalSlideFromBottomIOS.

In addition, a new presentation: 'transparentModal' option to make it easier to build transparent modals.

score 0 · Answer 3 · answered Jun 30 '23 at 23:46

this worked for me::::

import { TransitionPresets } from '@react-navigation/stack';

// ...

<Stack.Navigator
  screenOptions={({ route, navigation }) => ({
    ...TransitionPresets.ModalPresentationIOS,
  })}
>
  <Stack.Screen name="first" component={first} />
  <Stack.Screen name="second" component={second} />
</Stack.Navigator>;```

React Native: Stack Navigator mode='card' or mode='modal' is not working (expo project)

3 Answers3