presentation="modal" not working on android #1650

Kotpes · 2022-12-01T12:07:20Z

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

Add presentation="modal" to a screen options
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

The text was updated successfully, but these errors were encountered:

lokeshdangi · 2022-12-21T14:22:47Z

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 · 2023-02-08T17:28:29Z

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 · 2023-02-14T03:20:27Z

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

jsvelte · 2023-03-01T12:41:11Z

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

mustafaDabah · 2023-03-04T19:10:23Z

Is there anyone solved this issue ??

PranavRanjithKumar · 2023-03-22T18:13:43Z

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

kkafar · 2023-03-22T19:11:34Z

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 · 2023-05-17T05:11:25Z

hey, @kkafar did you find the solution 😛 ?

zackify · 2023-05-30T19:22:33Z

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

iraybi · 2023-06-14T02:45:28Z

Any solution yet?

titicarabina · 2023-06-22T01:39:49Z

anything on this?

GanongLS · 2023-06-25T11:13:51Z

let's change to use flutter.

atultiwaree · 2023-06-26T08:49:49Z

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

nitesh-kumar-gupta · 2023-07-05T17:33:32Z

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

rojingharooni · 2023-07-05T22:41:58Z

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 · 2023-08-06T20:30:54Z

Any update on this?

MahbubMorshed · 2023-08-09T18:11:35Z

working perfectly

sinonodd · 2023-09-21T16:37:50Z

Still not working

gaufranc · 2023-09-21T19:05:41Z

Still not working

DarlonHenrique · 2023-09-29T02:40:10Z

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

atultiwaree · 2023-09-29T11:16:15Z

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

sergiosrtd · 2023-10-05T03:53:09Z

still not working

Minkeun-Yun · 2023-10-11T01:24:48Z

add the below in screenOptions
: animation:"slide_from_bottom"

Paulods0 · 2023-10-12T19:34:19Z

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

izyspania · 2023-10-16T08:09:33Z

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 · 2023-10-16T12:47:42Z

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

qaezrun · 2024-04-01T09:14:52Z

any updates?

Khalidzo · 2024-04-01T17:38:37Z

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

jonanpogi · 2024-04-03T07:27:03Z

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

suryanshsingh2001 · 2024-04-03T09:06:43Z

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

Same

eric-everbright · 2024-04-03T12:43:54Z

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

issue gets fixed (looking unlikely on a timeframe suitable for any of us with in-progress projects)
update docs
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 · 2024-04-03T16:10:17Z

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

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

update docs

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

ArtyEmsee · 2024-04-03T19:44:01Z

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

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

update docs

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

With the plan being to host the sheets inside of your routes?

suryanshsingh2001 · 2024-04-08T18:11:21Z

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

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

update docs

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

With the plan being to host the sheets inside of your routes?

No, just using them like a modal.

suryanshsingh2001 · 2024-04-19T01:31:56Z

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}

        })}>

AnkushSarkar10 · 2024-05-02T03:56:16Z

damn

m-emre-yalcin · 2024-05-03T13:56:24Z

i wish the modal screen supported on android

T30-H0 · 2024-05-10T03:32:12Z

they all use iPhones only 😥 .

kkafar · 2024-05-10T04:52:05Z

Hey hey: you can track this PR: #2045 for progress in the matter. It's finally entering review process.

atultiwaree · 2024-05-10T12:18:39Z

Hey hey: you can track this PR: #2045 for progress in the matter. It's finally entering review process.

Finally 😅

suryanshsingh2001 · 2024-05-11T09:31:56Z

Hey hey: you can track this PR: #2045 for progress in the matter. It's finally entering review process.

Nice.

YosefOberlander · 2024-05-26T19:20:14Z

This works on android and IOS.
presentation: 'modal', gestureEnabled: true, ...(Platform.OS === 'android' && TransitionPresets.ModalPresentationIOS),

<ListStackNavigator.Group screenOptions={{ presentation: 'modal', gestureEnabled: true, ...(Platform.OS === 'android' && TransitionPresets.ModalPresentationIOS), }}> <ListStackNavigator.Screen name="NewList" component={NewList} options={{ headerShown: false, }} /> </ListStackNavigator.Group>

atultiwaree · 2024-05-27T08:03:21Z

This works on android.
presentation: 'modal', gestureEnabled: true, ...(Platform.OS === 'android' && TransitionPresets.ModalPresentationIOS),

<ListStackNavigator.Group screenOptions={{ presentation: 'modal', gestureEnabled: true, ...(Platform.OS === 'android' && TransitionPresets.ModalPresentationIOS), }}> <ListStackNavigator.Screen name="NewList" component={NewList} options={{ headerShown: false, }} /> </ListStackNavigator.Group>
Will it work on iOS??

YosefOberlander · 2024-05-27T11:01:32Z

@atultiwaree Yes.

00ricardo · 2024-05-27T21:51:47Z

I'll recommend to use presentation: "transparentModal" instead. It worked for me.

mpanac · 2024-06-07T08:34:57Z

Please fix this issue with presentation: modal on android.
For iOS there are no issues but on android i cannot make it work. Thanks!

brenosimonetti · 2024-06-07T13:19:34Z

any updates?

phoneticallySAARTHaK · 2024-06-15T08:41:44Z

Reading through the comments,

PR: #2045 is in progress

Workarounds:

Use Stack Navigator - with these screenOptions, and cardStyle to set its height
Bottom sheet

doyunnn · 2024-06-19T09:06:08Z

I'm using @react-navigation/native-stack "^6.9.13" and below props should work.

{
  presentation: Platform.select({
    ios: 'transparentModal',
    android: 'containedTransparentModal',
  }),
  animation: 'slide_from_bottom',
  animationDuration: 100,
}

mapleroyal · 2024-06-23T22:46:47Z

Still not working on android.

karimelsaidy · 2024-06-26T09:28:34Z

still not working

kkafar · 2024-06-26T09:33:03Z

Hey, I'm limiting conversation cause:

"still not working" comments do not bring anything to the discussion,
I've already mentioned that you can track progress on feat!: iOS custom detents & Android form sheets #2045 (comment link),
actually useful information gets lost in ton on "still not working" comments.

kkafar · 2024-06-26T09:42:12Z

And also let me update you on the status of

feat!: iOS custom detents & Android form sheets #2045

It is quite a big PR with tons of new logic introduced to the library, also bringing some breaking changes to the API - I'm actively progressing through the review & patching rough edges, but I wouldn't be surprised if it took even few more weeks to get the necessary approvals.

github-actions bot added Repro provided A reproduction with a snack or repo is provided Platform: Android This issue is specific to Android labels Dec 1, 2022

kkafar self-assigned this Dec 2, 2022

jaredly mentioned this issue Feb 8, 2023

Fix documentation to indicate that "modal" presentation is not yet implemented on Android #1715

Open

brentvatne mentioned this issue May 9, 2024

Modal presentation opens as a stack push on Android expo/expo#28731

Closed

hollanderbart mentioned this issue Jun 17, 2024

Modal presentation not working? expo/expo#29797

Closed

software-mansion locked as spam and limited conversation to collaborators Jun 26, 2024

presentation="modal" not working on android #1650

presentation="modal" not working on android #1650

Comments

Kotpes commented Dec 1, 2022 • edited Loading

Description

Steps to reproduce

Snack or a link to a repository

Screens version

React Native version

Platforms

JavaScript runtime

Workflow

Architecture

Build type

Device

Device model

Acknowledgements

lokeshdangi commented Dec 21, 2022

jaredly commented Feb 8, 2023

muteshi commented Feb 14, 2023

jsvelte commented Mar 1, 2023

mustafaDabah commented Mar 4, 2023

PranavRanjithKumar commented Mar 22, 2023

kkafar commented Mar 22, 2023

0xQuokka commented May 17, 2023

zackify commented May 30, 2023

iraybi commented Jun 14, 2023

titicarabina commented Jun 22, 2023

GanongLS commented Jun 25, 2023

atultiwaree commented Jun 26, 2023

nitesh-kumar-gupta commented Jul 5, 2023

rojingharooni commented Jul 5, 2023

izyspania commented Aug 6, 2023

MahbubMorshed commented Aug 9, 2023

sinonodd commented Sep 21, 2023

gaufranc commented Sep 21, 2023

DarlonHenrique commented Sep 29, 2023

atultiwaree commented Sep 29, 2023

sergiosrtd commented Oct 5, 2023

Minkeun-Yun commented Oct 11, 2023

Paulods0 commented Oct 12, 2023

izyspania commented Oct 16, 2023

JulioMacedo0 commented Oct 16, 2023

qaezrun commented Apr 1, 2024

Khalidzo commented Apr 1, 2024

jonanpogi commented Apr 3, 2024

suryanshsingh2001 commented Apr 3, 2024

eric-everbright commented Apr 3, 2024 • edited Loading

suryanshsingh2001 commented Apr 3, 2024 • edited Loading

some kind of console warning if used on android

ArtyEmsee commented Apr 3, 2024

some kind of console warning if used on android

suryanshsingh2001 commented Apr 8, 2024 • edited Loading

some kind of console warning if used on android

suryanshsingh2001 commented Apr 19, 2024 • edited Loading

AnkushSarkar10 commented May 2, 2024

m-emre-yalcin commented May 3, 2024

T30-H0 commented May 10, 2024

kkafar commented May 10, 2024

atultiwaree commented May 10, 2024

suryanshsingh2001 commented May 11, 2024

YosefOberlander commented May 26, 2024 • edited Loading

atultiwaree commented May 27, 2024

YosefOberlander commented May 27, 2024

00ricardo commented May 27, 2024

mpanac commented Jun 7, 2024

brenosimonetti commented Jun 7, 2024

phoneticallySAARTHaK commented Jun 15, 2024 • edited Loading

doyunnn commented Jun 19, 2024 • edited Loading

mapleroyal commented Jun 23, 2024

karimelsaidy commented Jun 26, 2024

kkafar commented Jun 26, 2024 • edited Loading

kkafar commented Jun 26, 2024

Kotpes commented Dec 1, 2022 •

edited

Loading

eric-everbright commented Apr 3, 2024 •

edited

Loading

suryanshsingh2001 commented Apr 3, 2024 •

edited

Loading

suryanshsingh2001 commented Apr 8, 2024 •

edited

Loading

suryanshsingh2001 commented Apr 19, 2024 •

edited

Loading

YosefOberlander commented May 26, 2024 •

edited

Loading

phoneticallySAARTHaK commented Jun 15, 2024 •

edited

Loading

doyunnn commented Jun 19, 2024 •

edited

Loading

kkafar commented Jun 26, 2024 •

edited

Loading