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

[ArtyEmsee]

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

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

[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

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

No, just using them like a modal.

[suryanshsingh2001]

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]

damn

[m-emre-yalcin]

i wish the modal screen supported on android

[T30-H0]

they all use iPhones only 😥 .

[kkafar]

Hey hey: you can track this PR: https://github.com/software-mansion/react-native-screens/pull/2045 for progress in the matter. It's finally entering review process.

[atultiwaree]

Hey hey: you can track this PR: https://github.com/software-mansion/react-native-screens/pull/2045 for progress in the matter. It's finally entering review process.

Finally 😅

[suryanshsingh2001]

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

Nice.

[YosefOberlander]

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]

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]

@atultiwaree Yes.

[00ricardo]

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

[mpanac]

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]

any updates?

[phoneticallySAARTHaK]

Reading through the comments,

PR: #2045 is in progress

Workarounds:

1. Use Stack Navigator - with these screenOptions, and cardStyle to set its height

2. Bottom sheet

[doyunnn]

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]

Still not working on android.

[karimelsaidy]

still not working

[kkafar]

Hey, I'm limiting conversation cause:

1. "still not working" comments do not bring anything to the discussion,
2. I've already mentioned that you can track progress on #2045 (comment link),
3. actually useful information gets lost in ton on "still not working" comments.

[kkafar]

And also let me update you on the status of

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