react-native-screens: presentation="modal" not working on android

let’s change to use flutter.

Hi, sorry for late response!

There is likely no workaround, because as @jaredly reported, indeed Android modal view are effectively not implemented. I recently started looking into it while attempting to implement bottom-sheets for Android – and unfortunately there are some technical reasons why it is the case and Android modals were left behind. It looks that documentation is indeed misleading, sorry! Once I’ll open PR with support for modals & I’ll try to remember to link it here so you can track progress.

use import {createStackNavigator} from “@react-navigation/stack”; instead of import {createNativeStackNavigator} from “@react-navigation/native-stack”; working for both Android and IOS

after upgrading to react navigation V6 this code worked for me:

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

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

</Stack.Group>

add the below in screenOptions : animation:“slide_from_bottom”

6 months and the docs still say this presentation works on android and ios. Would appreciate any update 😃

working perfectly

I want to make the previous screen appear a little bit in the current screen

Changing from modal to transparentModal worked for me. @Paulods0 @izyspania

{
   presentation: "transparentModal"
}

finally this is worked

`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

Let’s be honest I’ve been receiving emails through it everytime. This will not gonna fix the issue. Please close it!

<Stack.Group screenOptions={{ presentation: ‘modal’,animation:“slide_from_bottom” }}> <Stack.Screen name=“Shopp” component={Panier} options={{ title: ’ Shopp’, presentation: ‘modal’, }} /> </Stack.Group>

Well over a year and still what most would call a key facility is non functional. What, do they all use iphones or what?

so with "expo": "~50.0.5", and "expo-router": "~3.4.6", it’s still not working , shame because docs saying differently

Hey, I just found a temporary workaround for this for android, if you want modal to be a bit of away from screen like IOS version, just add these screen options and you are good to go.

 <Stack.Group screenOptions={({navigation}) => ({
          ...TransitionPresets.ModalSlideFromBottomIOS,
          gestureEnabled: true,
          presentation: "modal",
          cardStyle: {marginTop: 10, borderTopStartRadius: 20, borderTopEndRadius: 20}

        })}>

presentation=modal is still not working for bot ios and android

any updates?

I am having the same issue, my app heavily relies on modal to work correctly. Is there any kind of communication regarding this being in the pipeline to be fixed?

ModalSlideFromBottomIOS worked but the screen still show in fullscreen, any solution?

Mine is working well not covering full screen. I am using createStackNavigator (non native) and screenOptions={{presentation: ‘modal’}} I created a separated group for modal presentations by using <“StackName”.Group screenOptions={{presentation: ‘modal’}}>, hope that works

Still an issue with “expo”: “~49.0.15”, “expo-router”: “^2.0.0” First time trying Expo, lots of cool features but been flaky for certain features

finally this is worked

`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

This is using the javascript look-alike implementation (@react-navigation/stack), and not the native implementation from @react-navigation/native-stack

I want to make the previous screen appear a little bit in the current screen