React Native Stack Navigation Modal Not Sliding

Question

I'm new to React Native and I'm trying to navigate to one of my screens. I would like the screen to open as a modal. Apparently, you should apply the screenOptions={{ presentation: 'modal'}} to the Stack.Navigator. The screen is opening but not as a modal i.e it does not slide from bottom to top and does not function like a modal does. It just opens the default way. I've added my Navigator code below. I'm also nesting navigators? Could the nesting be the issue?

import React from 'react';
import { createNativeStackNavigator } from "@react-navigation/native-stack";

import ListingsScreen from '../screens/ListingsScreen';
import ListingDetailsScreen from '../screens/ListingDetailsScreen';

const Stack = createNativeStackNavigator()
const FeedNavigator = () => (
  <Stack.Navigator screenOptions={{ presentation: 'modal' }}>
    <Stack.Screen name="Listings" component={ListingsScreen} />
    <Stack.Screen name="Listing Details" component={ListingDetailsScreen} options={{ headerShown: false }} />
  </Stack.Navigator>
)

export default FeedNavigator;

also you need to add one more option in screenOptions - animation:'slide_from_bottom' — Ajith, Oct 28 '21 at 12:58
Thanks for the reply I tried this but I didn't do anything. But I've figured out the issue. — Ashraf Lobo, Oct 29 '21 at 08:22

score 2 · Accepted Answer · edited Oct 29 '21 at 08:47

2

I figured out my problem.

I was using

import { createNativeStackNavigator } from "@react-navigation/native-stack";

I changed it to

import { createStackNavigator } from "@react-navigation/stack";

I don't know why it worked for createStackNavigator and not createNativeStackNavigator.

I'm not going to question it, too much to do, too little time

edited Oct 29 '21 at 08:47

Peter Csala

17,736
16
35
75

answered Oct 29 '21 at 08:25

Ashraf Lobo

137
4
16

Thanks for the clue! Mine was sliding tho, but the transparency acts weird and the screenOption has contentStyle instead of cardStyle. After change to createStackNavigator, I can use cardStyle and the animation of my modal component runs smoothly. – Jeaf Gilbert Jul 26 '22 at 18:31

score 0 · Answer 2 · answered Jul 01 '23 at 00:22

this worked for me:

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

// ...

<Stack.Navigator
  screenOptions={({ route, navigation }) => ({
    gestureEnabled: true,
    ...TransitionPresets.ModalPresentationIOS,
  })}
>
  <Stack.Screen name="Home" component={Home} />
  <Stack.Screen name="Profile" component={Profile} />
</Stack.Navigator>;

score 0 · Answer 3 · answered Jul 05 '23 at 22:44

0

<Stack.Group screenOptions={{ presentation: 'modal' }}>

    <Stack.Screen name="ComponentName" component={Component} options={() => ({
            presentation: 'modal'
    })} />

</Stack.Group>

this solved my problem using react navigation V6

answered Jul 05 '23 at 22:44

Rojin Gharooni

39
4

React Native Stack Navigation Modal Not Sliding

3 Answers3