presentation="modal" not working on android

[Kotpes]

Description

Having set presentation="modal" for a screen has no effect on that screen on Android (still opens full screen view)

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

Works as expected on iOS.

Steps to reproduce

1. Add presentation="modal" to a screen options
2. See that it has no effect on android (still opens the full screen view) - see the snack attached

Snack or a link to a repository

https://snack.expo.dev/gg56CATOS

Screens version

6.6.1

React Native version

0.69.0

Platforms

Android

JavaScript runtime

Hermes

Workflow

React Native (without Expo)

Architecture

Paper (Old Architecture)

Build type

No response

Device

No response

Device model

No response

Acknowledgements

Yes

[lokeshdangi]

was facing the same issue. seems like native-stack has some issue with "modal" but 'containedTransparentModal' was working. "modal" works fine if we switch to a normal stack navigator

[jaredly]

Yeah it looks like it's just not implemented? 🤔 weird that the documentation says

modal, containedModal, fullScreenModal, formSheet will use Screen.StackPresentation.MODAL.

when MODAL is essentially ignored in the android code.

react-native-screens on main ➜ rg MODAL android
android/src/main/java/com/swmansion/rnscreens/Screen.kt
240:        PUSH, MODAL, TRANSPARENT_MODAL

android/src/main/java/com/swmansion/rnscreens/ScreenViewManager.kt
58:                Screen.StackPresentation.MODAL
60:                Screen.StackPresentation.TRANSPARENT_MODAL

android/src/main/java/com/swmansion/rnscreens/ScreenStack.kt
90:        var visibleBottom: ScreenStackFragment? = null // this is only set if newTop has TRANSPARENT_MODAL presentation mode
328:            fragment.screen.stackPresentation === Screen.StackPresentation.TRANSPARENT_MODAL

Given that Screen's are backed by androidx Fragments, I expect the fix will be to have modal screens inherit from DialogFragment.

[muteshi]

Also facing the same issue. Do we have a work around for this for android?

[jsvelte]

I'm facing the same issue. It's not working in android 💯

[mustafaDabah]

Is there anyone solved this issue ??

[PranavRanjithKumar]

Yes it is not working. Can anyone suggest a workaround?

[kkafar]

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.

[0xQuokka]

hey, @kkafar did you find the solution 😛 ?

[zackify]

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

[iraybi]

Any solution yet?

[titicarabina]

anything on this?

[GanongLS]

let's change to use flutter.

[atultiwaree]

I think we should try to use animation API provided by Stack as an alternative to it

[nitesh-kumar-gupta]

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

[rojingharooni]

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>

[izyspania]

Any update on this?

[MahbubMorshed]

working perfectly

[sinonodd]

Still not working

[gaufranc]

Still not working

[DarlonHenrique]

day 28 of september, Expo Router V2 and SDK 49, and still not working on android

[atultiwaree]

It's been a so long, Tag "Zuck" now. 😬

[sergiosrtd]

still not working

[Minkeun-Yun]

add the below in screenOptions : animation:"slide_from_bottom"

[Paulods0]

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

[izyspania]

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

I want the same but i dont think is intended to work that way on android from what ive seen.

[JulioMacedo0]

I'm using "expo": "~49.0.13", and I'm facing the same issue on Android. The Expo documentation has examples saying it should work, but I can't get it to work."

[radhey007]

I have tried tons of things and still its not working on android

[jsvelte]

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

[valdydev]

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>

[mshaheerz]

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