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;

Answer 1

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

Answer 2

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>;