React-native-screens: [native-stack] modals are only dismissible on iOS 13

[alexichristakis]

In a barebones project I can't get a modal to dismiss on iOS 11 or 12.

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from 'react-native-screens/native-stack';
import {enableScreens} from 'react-native-screens';

enableScreens();

import Root from './Root';
import Modal from './Modal';

const Stack = createNativeStackNavigator();

const App = () => (
  <NavigationContainer>
    <Stack.Navigator screenOptions={{stackPresentation: 'modal'}}>
      <Stack.Screen name="ROOT" component={Root} />
      <Stack.Screen name="MODAL" component={Modal} />
    </Stack.Navigator>
  </NavigationContainer>
);

export default App;

When an action is fired from Modal to dismiss or navigate back to Root the screen seems to be unmounted based on the performance monitor.

before navigation.goBack() or navigation.navigate('ROOT') is called:

after navigation.goBack() or navigation.navigate('ROOT') is called:

It doesn't animate away and loses all responsiveness.

Everything works fine in iOS 13. Any thoughts?

[WoLewicki]

The problem seems to be here: https://github.com/software-mansion/react-native-screens/blob/master/ios/RNSScreen.m#L85, the UIModalPresentationFullScreen causes the block. You can check it if you set stackPresentation="fullScreenModal", then it will resolve to UIModalPresentationFullScreen as well and block the application. Am I right @alexichristakis?

[alexichristakis]

yep, you're correct. any ideas on how we can fix this?

[WoLewicki]

You can wait for #438 to be merged or change the presentation to containedModal. It should look the same on iOS < 13. Does it fix your issue?

[alexichristakis]

containedModal does fix the issue, but #438 does not fix fullScreenModal. is it working for you?

[WoLewicki]

It worked for me, can you make a quick repro where it is not working? And is it failing on iOS < 13?

[WoLewicki]

It looks like I made a mistake by adding the check in the wrong method. Try #441 and please tell if it fixes your issue.

[SmirnovM91]

Hi, When update is going to be released?

[limaAniceto]

Hi @WoLewicki,
Really appreciate all the work you've done on this project

I'm afraid I tried #441 and it still happens on fullScreenModal 😞

@alexichristakis do you mind testing #441 to confirm?

Note: It's happening for me on iOS 13.3

[WoLewicki]

@limaAniceto can you provide a repo with minimal configuration needed to reproduce the issue?

[limaAniceto]

Hi @WoLewicki,
I've managed to identify that the issue is on the usage of the prop transparentCard from react-navigation (we're on v4, need someone to check if it happens on v5)

transparentCard - Experimental - Prop to keep all cards in the stack visible and add a transparent background instead of a white one. This is useful to implement things like modal dialogs where the previous scene should still be visible underneath the current one.

https://reactnavigation.org/docs/4.x/stack-navigator-1.0/#specifying-the-transition-mode-for-a-stacks-screens-explicitly

You can see the issue on this GIF (iOS 13.3 - iphone 11)

Reproducible repo: https://github.com/limaAniceto/RN-Screens-Bug

Note: In this repo I did not apply #441, I'm using the release 2.4.0 as is

Edit! After reading the docs again I've just realised that I'm not using the createNativeStackNavigator. I'll try on the repo I just did and update this comment if it works

UPDATE Using the createNativeStackNavigator, the modal is dismissable

[tdoran]

I think there may be two issues being discussed here:

1. When using react-screens' createNativeStackNavigator, on iOS devices below iOS13, modals are not dismissable. I believe this is what is being references in the first post in this issue.

2. When using react-native-screens 2.4.0 and the transparentCard option on a createStackNavigator from react-navigation: after dismissing a modal, it immediately reappears and is not dismissable.

No. 2 is solvable by using createNativeStackNavigator.

I believe 1 should be fixed by https://github.com/software-mansion/react-native-screens/pull/441 , but I've tested it and this hasn't fixed it for me.

I don't suppose you've had any recent luck with this @alexichristakis ?

[WoLewicki]

@tdoran so can you provide a repo with a minimal configuration that shows the bug so I can work on it?

[WoLewicki]

I am closing it due to no response in more than 30 days. Feel free to comment to reopen it.

[TheEhsanSarshar]

@WoLewicki I am using the modal stackTransition. it work find in Iphone X (with safeArea). but in iphone 7 and 8 it's not dismissable. it seems that it goes behind the status bar, far away.

[TheEhsanSarshar]

@WoLewicki the issue still exist in latest release.

[WoLewicki]

@EhsanSarshar can you provide a repo/snack with minimal configuration needed to reproduce the issue?

[henninghall]

Having the same problem, the app becomes unresponsive when trying to close a modal on iOS 12, reproduced with iPhone 6, iOS 12.4.5. The problem occurs when stackPresentation is set to modal but not when set to transparentModal.

[WoLewicki]

Can you apply https://github.com/software-mansion/react-native-screens/pull/643 and check if it fixes your issue @henninghall @EhsanSarshar ?

[DanielMarkiel]

@WoLewicki I can confirm that #643 fixes the issue described above.

[ajsmth]

just tested this on iPhone 8 and iPhone X (iOS 12) - the modals are not dismissable with #643

[WoLewicki]

@ajsmth please provide a repo that shows the issue so it can be reproduced.