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

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?

[DanielMarkiel]

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

[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 ?