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

React Native
1 
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?

2

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

This answer might come a little bit late (IDK if 1 year is a little bit :joy:) It might help someone. The issue was that gestureEnabled is set to false by default on Android. You are supposed to set gestureEnabled to true on options. For the gestures to work, you are supposed to add the following at the top (make sure it’s at the top and there’s nothing else before it) of your entry file, such as index.js or App.js as per the docs:

import 'react-native-gesture-handler';