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

[matis-dk]

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

[rafael-mingossi]

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

It only works using JS Based (@react-navigation/stack), when you try with Native (@react-navigation/native) it won't work on Android. You will loose performance but it works.

[wolak]

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

[mubarakshow]

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

Same here.

[mubarakshow]

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"
}

[fukemy]

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

[rafael-mingossi]

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

[fukemy]

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

thanks, but I native-stack is better performance, so I dont want to use non-native

[rafael-mingossi]

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

thanks, but I native-stack is better performance, so I dont want to use non-native

Yeah, your are right, but with Native unfortunately it won't work, I hope they fix that.

[eidan66]

Any update on this problem? :( react-navigation/stack didn't work also.

[wujekbizon]

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

[ExarchDB]

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

[vikrant699]

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?

[ser-emejia]

My workaround using expo:

import Constants from 'expo-constants';

    <View
      style={{
        flex: 1,
        paddingTop: IS_ANDROID ? Constants.statusBarHeight : 0,
      }}>

      //...

    </View>

[qaezrun]

any updates?

[Khalidzo]

Please this info should be included in expo docs, since this is causing confusion for many of us.

[jonanpogi]

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

[suryanshsingh2001]

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

Same

[eric-everbright]

looks like a few things could happen here for a way forward:

1. issue gets fixed (looking unlikely on a timeframe suitable for any of us with in-progress projects)
2. update docs

3. some kind of console warning if used on android

   as for my project, just living with the push navigation for now, unfortunately, and had to figure out a hack to hide the bottom navigation bar, because the purpose of the modal presentation was so that the presented flow was apart from the root navigation

[suryanshsingh2001]

looks like a few things could happen here for a way forward:

1. issue gets fixed (looking unlikely on a timeframe suitable for any of us with in-progress projects)
2. update docs

3. some kind of console warning if used on android

   as for my project, just living with the push navigation for now, unfortunately, and had to figure out a hack to hide the bottom navigation bar, because the purpose of the modal presentation was so that the presented flow was apart from the root navigation

You are absolutely right !. I am thinking of using this instead react-native-bottom-sheet