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

[ancyrweb]

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.

[dan-fein]

Also experiencing this.

[tomeberle]

Same here.

[janpe]

Having this problem as well.

[epicbytes]

same problem on iOS 13
I tried using the module "react-native-swipe-gestures", but it was a terrible experience. Now at all there is no way to swipe to set the activity flag at the modal window, it is always true.

[akondo06]

any update on this? I was just about to use it when noticed the swipe down problem.

[AppKidd]

Also experiencing. So frustrating.

[jimcamut]

I had to change the presentationStyle to 'overFullScreen' to prevent swiping down. It's certainly no replacement for pageSheet, but if you need an onDismiss function to trigger it can be a temporary solution until this is fixed.

[kangfenmao]

I am using Modal from react-native, presentationStyle ="pageSheet" which means I can slide to dismiss.

However when I do that, no function is fired.

onDismiss only fires when I close it from a button.

The modal won't open again if I do like this because it doesn't change it's state.

[humphreyja]

I've been running into this issue. I wrote a library (basically just copied over React Native's Modal code) to see if I could fix this issue. I hook into the viewDidDisappear function in the ModalHostViewController which does get called when the Native iOS gesture for dismissing the modal happens. I then manually call the onDismiss function. Here's the library: https://github.com/HarvestProfit/react-native-modal-patch

I'm not that familiar with Objective-C so I'm not sure if this is a great solution, but hopefully it helps someone. If someone more familiar thinks this is a valid solution, then I'll create a PR.

[amidulanjana]

I am also experiencing this. Please release a fix for this.

[jpamarohorta]

Same. Does anyone knows how to prevent the swipe? Not a solution but a possible workaround for now

[beniaminrychter]

Same issue here. Because of that it's Modal component is useless.

[patrikmasiar]

Same problem with dismissing modal in presentation style. When I swipe it down to close, then state is not changed.

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

[r4mdat]

I wasn't able to get the workaround @lrholmes posted above to work. For whatever reason, the TouchableOpacity used to open the modal (and interestingly any adjacent TouchOpacity components) would no longer fire their onPress after the modal was swiped down. Desperate to get this working, I ended up putting a ScrollView around the entire modal content and used onDragEnd to flip the modal state variable. Works if your modal contents don't scroll. Not by any means ideal but was a reasonable trade-off in my situation.

[deniscreamer]

@r4mdat

Just try use Modal component inside TouchableWithoutFeedback.
Then onPress will does not blocked.
And use function like @lrholmes

<TouchableWithoutFeedback>
            <Modal
                visible={enable}
                presentationStyle={'formSheet'}
            </Modal>
</TouchableWithoutFeedback>



<TouchableOpacity
            onPress={() => {
                setModalSelectPhotos(false);
                setTimeout(() => {
                    setModalSelectPhotos(true);
                }, 50);
            }}>
.......
</TouchableOpacity>

It was help me

[scarlac]

Patch workaround for React Native 0.61.2
Here's a patch that triggers onDismiss callback when a modal is dismissed by swiping down, on iOS 13. However, there is a caveat: Once you patch the code, Xcode seems to change the default modal behavior for the entire app (at least for me), causing all modals to appear in the new style, on iOS 13. Depending on how your app is, this may be unwanted so please consider that before using the patch in production. Edit: There is no caveat anymore. Updated patch in link works as intended.

Download patch
https://gist.github.com/scarlac/ec162221e11927c52cfc9c94e7252824

Installation
You can apply it using either:

• Manually (which is temporary - yarn may remove it) using:
  patch < react-native+0.61.2.patch in your project root folder or...
• Automatically using patch-package (recommended)

[martsie]

Same issue - even with the patched versions.

[scarlac]

@martsie You need to recompile your app. Set a breakpoints in the newly added lines to verify

[scarlac]

Sorry, @martsie there was a line missing from my diff. You'll need to say that you're implementing a delegate as well (UIAdaptivePresentationControllerDelegate). I've updated the link. Not sure why it worked for me - perhaps I had a local modification that I forgot to include in the patch

[thomasttvo]

I wasn't able to get the workaround @lrholmes posted above to work. For whatever reason, the TouchableOpacity used to open the modal (and interestingly any adjacent TouchOpacity components) would no longer fire their onPress after the modal was swiped down. Desperate to get this working, I ended up putting a ScrollView around the entire modal content and used onDragEnd to flip the modal state variable. Works if your modal contents don't scroll. Not by any means ideal but was a reasonable trade-off in my situation.

@r4mdat just put your Modal in a View with height: 0

<View style={{height:0}}><Modal>....</Modal></View>

[bmkopp10]

@r4mdat

Just try use Modal component inside TouchableWithoutFeedback.
Then onPress will does not blocked.
And use function like @lrholmes

<TouchableWithoutFeedback>
            <Modal
                visible={enable}
                presentationStyle={'formSheet'}
            </Modal>
</TouchableWithoutFeedback>



<TouchableOpacity
            onPress={() => {
                setModalSelectPhotos(false);
                setTimeout(() => {
                    setModalSelectPhotos(true);
                }, 50);
            }}>
.......
</TouchableOpacity>

It was help me

This worked perfectly fine for me. I would suggest this over any other options as it takes the least amount of code and is the most understandable. Also, once the issue is fixed, it will be the simplest to revert.

[aca-hakan-pinar]

Hey everyone,

Im having the same issue. onDismiss property doesn't clear the Modal component (swipe down iOS). Can someone help me?

Thanks

[ps73]

Hey,
I have built a patch file for react-native 0.63.3 that fixes this issue: https://gist.github.com/ps73/012b8b97bb7866db4b2b4636a8396d98

If you embed this to your project you just have to set the onRequestClose property and the swipe down works as expected for formSheet and pageSheet modals on iOS. If you don't set onRequestClose the swipe down is disabled.

[alloy]

@ps73 It’s a little hard for me to judge if this is generic enough that it would be a solution for all. If you do think or want to let others weigh in, mind creating a PR for it?

[lsiqueira-jc]

Eu encontrei uma solução alternativa muito mais simples, parece em vez de:

onPress = { ( )  =>  setModalVisible ( true )

Você pode tentar isso

onPressIn = { ( )  =>  setModalVisible ( false ) } 
onPressOut = { ( )  =>  setModalVisible ( true ) }

Claro, isso significa que o componente do botão deve fornecer esses eventos (TouchableOpacity fornece)

Show man!
very good.

[jamesmcn1]

@vasiliicuhar solution worked for me with RN 0.62.2:

      <Modal
        visible={visible}
        animationType={animation || 'slide'}
        onRequestClose={onClose}
        presentationStyle={presentationStyle}
        onDismiss={onDismiss}
        statusBarTranslucent={statusBarTranslucent}
      >
        <TouchableWithoutFeedback
          // for bug which prevents dismiss from firing on swipe close
          // https://github.com/facebook/react-native/issues/26892
          onPressOut={onDismiss}
        >
          <SafeAreaView
            testID={generateDismissibleModalTestId(testIDBase)}
            style={styles.SafeAreaView}
            forceInset={{ bottom: 'always' }}
          >
            {this.content()}
          </SafeAreaView>
        </TouchableWithoutFeedback>
      </Modal>

[arvidnilber]

@alloy update on this bug? Not working yet in 0.63.4.

[alloy]

I alas have no updates on this, my last question was if somebody wanted to solve it.

[oarsoy]

That's embarrassing. Nobody could fix this Modal problem in React Native for long time.

[edi]

I've tried quite a few of the above, nothing works for me ... others are quite ugly to implement.

Any advice on how to work around this issue ... seems quite weird.

[ps73]

Hey,
I have built a patch file for react-native 0.63.3 that fixes this issue: https://gist.github.com/ps73/012b8b97bb7866db4b2b4636a8396d98

If you embed this to your project you just have to set the onRequestClose property and the swipe down works as expected for formSheet and pageSheet modals on iOS. If you don't set onRequestClose the swipe down is disabled.

@edi I've updated my patch-file for 0.63.4.

Just follow my instructions in the first comment. After that you have to reinstall your app on your simulator or real device.

After all these steps you can use onRequestClose property to allow the swipe down gesture (equivalent to android back button behavior). You can also disable swipe-gesture by unsetting onRequestClose.

[arvidnilber]

So there is a fix for this issue? Why not include this in a new release?

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

[jacobp100]

Have people tried in 0.64?

[Yerlan]

Have people tried in 0.64?

Not working in v0.64 as well

[oarsoy]

Have people tried in 0.64?

Not working in v0.64 as well

:) No surprise.

[Yerlan]

:) No surprise.

Yeah, there must be a good reason (I assume it's performance) why the patch was included and then removed from the recent version.

As a temporary workaround, you can use React Native Modalize, I think they pretty much have everything you want to work with page/form sheet modals (inc. swipe down to close).

[enestatli]

My solution works only who uses react-navigation v5 in her/his project.

Create a modal stack in your navigator and nest a regular stack inside it. Then simply call your modal screen anywhere in your project, just like your other screens. navigation.navigate('MyModalScreen')

Now, you can have ModalPresentationIOS transition in both platform.

When you cannot pass the navigation prop into the component directly, you can use useNavigation()hook which gives access to navigation object.

 <RootStack.Navigator mode="modal">
      <RootStack.Screen
        name="Main"
        component={MainStackScreen}
        options={{ headerShown: false }}
      />
      <RootStack.Screen name="MyModalScreen" component={MyModalScreen} />
</RootStack.Navigator>

[rockwotj]

@rewieer can this be reopened? This is still an issue.

[fallaciousreasoning]

I just encountered this too. I was pretty surprised @thomasttvo's suggestion fixed it. Would you mind explaining how the fix works?

@r4mdat just put your Modal in a View with height: 0

<View style={{ height: 0 }}>
    <Modal ...>
        <YourModalContent />
    </Modal>
<View>

[rockwotj]

@fallaciousreasoning the height=0 trick doesn't seem to work for me :/

[thomasttvo]

I just encountered this too. I was pretty surprised @thomasttvo's suggestion fixed it. Would you mind explaining how the fix works?

@r4mdat just put your Modal in a View with height: 0

<View style={{ height: 0 }}>
    <Modal ...>
        <YourModalContent />
    </Modal>
<View>

That was a long time ago, but I vaguely remember it has something to do with event propagation and TouchableWithoutFeedback, not entirely sure tho.

[oarsoy]

:) No surprise.

Yeah, there must be a good reason (I assume it's performance) why the patch was included and then removed from the recent version.

As a temporary workaround, you can use React Native Modalize, I think they pretty much have everything you want to work with page/form sheet modals (inc. swipe down to close).

Modal is very base functionality. And it should stay as native. It doesn't make sense to use a third party dependency or library to be able to solve this basic problem or to be able to use modal.

[anthlasserre]

@vasiliicuhar solution worked for me with RN 0.62.2:

      <Modal
        visible={visible}
        animationType={animation || 'slide'}
        onRequestClose={onClose}
        presentationStyle={presentationStyle}
        onDismiss={onDismiss}
        statusBarTranslucent={statusBarTranslucent}
      >
        <TouchableWithoutFeedback
          // for bug which prevents dismiss from firing on swipe close
          // https://github.com/facebook/react-native/issues/26892
          onPressOut={onDismiss}
        >
          <SafeAreaView
            testID={generateDismissibleModalTestId(testIDBase)}
            style={styles.SafeAreaView}
            forceInset={{ bottom: 'always' }}
          >
            {this.content()}
          </SafeAreaView>
        </TouchableWithoutFeedback>
      </Modal>

Thanks @vasiliicuhar
I Confirm! Actually the only trick to close this type of modal is to do like this

<Modal
  visible={showModal}
  animationType="slide"
  presentationStyle="formSheet"
>
  <TouchableWithoutFeedback
    // for bug which prevents dismiss from firing on swipe close
    // https://github.com/facebook/react-native/issues/26892
    onPressOut={() => console.log('Close modal')}
  >
    <View style={{ flex: 1 }}>
      {/* YOUR CONTENT */}
    </View>
  </TouchableWithoutFeedback>
</Modal>

[oarsoy]

<Modal
  visible={showModal}
  animationType="slide"
  presentationStyle="formSheet"
>
  <TouchableWithoutFeedback
    // for bug which prevents dismiss from firing on swipe close
    // https://github.com/facebook/react-native/issues/26892
    onPressOut={() => console.log('Close modal')}
  >
    <View style={{ flex: 1 }}>
      {/* YOUR CONTENT */}
    </View>
  </TouchableWithoutFeedback>
</Modal>

I can confirm too, this example finally works with 0.63 & 0.64. I hope they will not break again this base functionality.

[whalemare]

This solution close modal on any touch outside, not on swipe.

We are waiting for merge this pr: #31500

[oarsoy]

This solution close modal on any touch outside, not on swipe.

We are waiting for merge this pr: #31500

I agree it's not ideal but only working solution so far. I hope they merge this because I think FB hates iOS and they love to keep it broken.

[sgup]

Still having this issue

[Jonatthu]

I am still having issues with this. Waiting on #31500