react-native: iOS can't dismiss Modal!

Implemented the solution suggested by @alexandersandberg and it works!

Combine https://reactnavigation.org/docs/modal with https://stackoverflow.com/questions/62283000/is-it-possible-to-present-modals-with-the-uimodalpresentationpagesheet-or-uimoda

Here’s my code. You should be able to paste this in and have it work (assuming you have the correct dependencies)

import React from 'react'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'

import {
  View,
  Text,
  Button
} from 'react-native'

import { createNativeStackNavigator } from 'react-native-screens/native-stack'
import { enableScreens } from 'react-native-screens'

enableScreens()

const MainStack = createStackNavigator()
const RootStack = createNativeStackNavigator()

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{ fontSize: 30 }}>This is the home screen!</Text>
      <Button
        onPress={() => navigation.navigate('MyModal')}
        title="Open Modal"
      />
    </View>
  )
}

function DetailsScreen() {
  return (
    <View>
      <Text>Details</Text>
    </View>
  )
}

function MainStackScreen() {
  return (
    <MainStack.Navigator>
      <MainStack.Screen name="Home" component={HomeScreen} />
      <MainStack.Screen name="Details" component={DetailsScreen} />
    </MainStack.Navigator>
  )
}

function ModalScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text style={{ fontSize: 30 }}>This is a modal!</Text>
      <Button onPress={() => navigation.goBack()} title="Dismiss" />
    </View>
  )
}

// We use React Navigation's modal to be able to use swipeable native modals
function RootStackScreen() {
  return (
    <RootStack.Navigator
      mode="modal"
      screenOptions={{
        headerShown: false,
        stackPresentation: 'formSheet'
      }}
    >
      <RootStack.Screen
        name="Main"
        component={MainStackScreen}
        options={{ headerShown: false }}
      />
      <RootStack.Screen
        name="MyModal"
        component={ModalScreen}
      />
    </RootStack.Navigator>
  )
}

export default function AppNavigator() {
  return (
    <NavigationContainer>
      <RootStackScreen />
    </NavigationContainer>
  )
}

Not a solution to this issue, but a perfectly working alternative for some:

React Navigation’s createNativeStackNavigator with a stackPresentation set to modal, formSheet, or whatever you prefer.

Edit: Some more information on how to implement a modal like this can be found in the React Navigation docs: Opening a full-screen modal.

Hi, is someone able to dismiss the modal with React Native 0.64? I upgraded, and this is not working for me…

I just tried with a brand new project and it’s not working. Here’s my example code:

import React, {useState} from 'react';
import {SafeAreaView, StatusBar, Text, Modal, Button} from 'react-native';

const App = () => {
  const [visible, setVisible] = useState(false);

  return (
    <SafeAreaView>
      <StatusBar barStyle="light-content" />
      <Button title="Open" onPress={() => setVisible(true)} />
      <Modal
        visible={visible}
        presentationStyle="pageSheet"
        animationType="slide"
        onRequestClose={() => {
          console.log('close');
          setVisible(false);
        }}
        onDismiss={() => {
          console.log('dismiss');
          setVisible(false);
        }}>
        <Text>Modal</Text>
      </Modal>
    </SafeAreaView>
  );
};

export default App;

Unfortunately, neither function is firing. Is there anything I missed? Everything is fine in react-native doctor, and I started the new project with react-native globally installed:

yarn global add react-native
react-native init ExampleProject

Then just changed the App.js.

Hi all, how about this issue, i still find this issue on RN. 0.63.4

Any updates on this issue? I’m on 0.72 and I still see the issue.

This patch works for me react-native+0.63.3.patch