Stack.navigator mode="modal" has no effect on android

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

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

const Stack = createStackNavigator();

const FeedNavigator = () => (
  <Stack.Navigator mode="modal" screenOptions={{ headerShown: false }}>
    <Stack.Screen name="Listings" component={ListingsScreen} />
    <Stack.Screen name="ListingDetails" component={ListingDetailsScreen} />
  </Stack.Navigator>
);

export default FeedNavigator;

Hi everyone, does anyone notice that setting the mode of the stack navigator to mode has no effect on android? the screen don’t slide from the bottom and you can’t swipe down to exit either?

Does anyone know how to fix it?

Solved

so after researching through multiple posts online lol… I came across this video Native Stack Navigator vs Stack Navigator | React Navigation v5 | Expo | React Native - YouTube and it literally save my night.

my code works perfectly on android, haven’t tried it on IOS yet. my code is below.

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

import ListingsScreen from "../screens/ListingsScreen";
import ListingDetailsScreen from "../screens/ListingDetailsScreen";
import AppText from "../components/Text";

const Stack = createStackNavigator();

const FeedNavigator = () => (
  <Stack.Navigator
    screenOptions={{
      headerShown: false,
      gestureEnabled: true,
      ...TransitionPresets.ModalSlideFromBottomIOS,
    }}
    mode="modal"
  >
    <Stack.Screen
      options={{
        headerShown: true,
        headerTitleAlign: "center",
      }}
      name="Marketplace"
      component={ListingsScreen}
    />
    <Stack.Screen name="ListingDetails" component={ListingDetailsScreen} />
  </Stack.Navigator>
);

export default FeedNavigator;