[0.61][iOS 13] pageSheet/formSheet dismissal from swipe not propagated

When the user dismisses the modal by a swipe gesture using a custom presentation style, the event isn’t caught by onDismiss.

React Native version: 0.61.0

Sample code :

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  Button,
  View,
  Modal as RNModal,
} from 'react-native';

export default class Example extends Component {
  state = {
    visible: false,
  };
  
  render() {
    return (
      <View style={styles.container}>
        <Button
          onPress={() => this.setState({ visible: true })}
          title="Default"
        />
        <RNModal
          visible={this.state.visible}
          onDismiss={() => console.log("on dismiss")}
          onRequestClose={() => console.log("on dismiss")}
          presentationStyle={"pageSheet"}>
          <View style={styles.content}>
            <Text style={styles.contentTitle}>Open</Text>
            <Button
              onPress={() => this.setState({ visible: false })}
              title="Close"
            />
          </View>
        </RNModal>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  content: {
    backgroundColor: 'white',
    padding: 22,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 4,
    borderColor: 'rgba(0, 0, 0, 0.1)',
  },
  contentTitle: {
    fontSize: 20,
    marginBottom: 12,
  },
});

I’m no expert in iOS, but this article might give a hint.

I can fill in a PR with some help.

[oarsoy]

Airbnb was right. React Native really s*cks. After every version change, even so basic functionalities stop working for no reason and it’s really tiring to track these things. And it seems Facebook or repository admins do NOT want to fix/merge the most of these issues.

I’m switching to Flutter.

[lrholmes]

Here is a (not-ideal/hacky!) workaround while awaiting a proper fix if anyone is also desperate for the pull-down modal behaviour. It does not solve the problem that there’s no way to fire a callback when user dismisses the modal, but enables reopening the modal after being pulled-down.

The idea behind the logic is to check if an imperative modal-open is being attempted on an “already open” modal, and forcing a couple of re-renders to reset the value on the modal.

import { useState, useEffect } from 'react';

export const useModalState = initialState => {
  const [modalVisible, setModalVisible] = useState(initialState);
  const [forceModalVisible, setForceModalVisible] = useState(false);

  const setModal = modalState => {
    // tyring to open "already open" modal
    if (modalState && modalVisible) {
      setForceModalVisible(true);
    }
    setModalVisible(modalState);
  };

  useEffect(() => {
    if (forceModalVisible && modalVisible) {
      setModalVisible(false);
    }
    if (forceModalVisible && !modalVisible) {
      setForceModalVisible(false);
      setModalVisible(true);
    }
  }, [forceModalVisible, modalVisible]);

  return [modalVisible, setModal];
};

// use it the same way as before (as docs recommend)
const [modalVisible, setModalVisible] = useModalState(false)

Hope it may help some of you!