javascript - React Native <Modal > onDismiss not invoked - Stack Overflow

admin管理员组

文章数量:1326282

Based on the code below, I would expect to see 'onDismiss!' when I swipe down on the modal view.

When I swipe down on the modal view it does not invoke the provided function. I can't find any other React Native users experiencing this problem. I am using React Native version 0.60.6.

Am I using Modal the wrong way or is this a bug?

<Modal
  animationType="slide"
  presentationStyle="pageSheet"
  visible={showSetup}
  hardwareAccelerated
  onDismiss={() => alert('onDismiss!')}
  onRequestClose={() => alert('onRequestClose!')}
>
  <SetupView closeView={() => this.willClose()} />
</Modal>

Based on the code below, I would expect to see 'onDismiss!' when I swipe down on the modal view.

When I swipe down on the modal view it does not invoke the provided function. I can't find any other React Native users experiencing this problem. I am using React Native version 0.60.6.

Am I using Modal the wrong way or is this a bug?

<Modal
  animationType="slide"
  presentationStyle="pageSheet"
  visible={showSetup}
  hardwareAccelerated
  onDismiss={() => alert('onDismiss!')}
  onRequestClose={() => alert('onRequestClose!')}
>
  <SetupView closeView={() => this.willClose()} />
</Modal>

• javascript
• reactjs
• react-native

Share Improve this question Follow asked Nov 19, 2019 at 15:49 jskidd3jskidd3 4,7831515 gold badges6666 silver badges131131 bronze badges 3

• Have you checked out the library from this answer? I'd imagine you could trigger onDismiss from within the modal with a swipe event handler. – Chris B. Commented Nov 19, 2019 at 15:53
• @ChrisB I am familiar with the library but it seems a bit overkill for this. I just want to know when the the view is dismissed so I can set showSetup back to false so the modal view can be accessed again. – jskidd3 Commented Nov 19, 2019 at 15:55
• This does indeed appear to be a bug, I had the same issue (that re-clicking wasn't working due to incorrect functionality of the onDismiss). In my case I could solve it, by checking the visibility state in the action, and manually calling the closing action. It's important that you wait until the state is persisted though (with a timeout or the callback). Completely unrelated .. but may I ask how you managed to get the black background color behind the pageSheet? – visscher Commented Nov 19, 2019 at 17:15

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

This issue on the React Native issue tracker accurately describes this issue: https://github./facebook/react-native/issues/26892

I hope it's fixed soon!

Hey there you should try something like that

This is the code for the ponent rendered in my modal:

  <TouchableWithoutFeedback
        onPressOut={() => {
          this.refs.view_ref.measure((fx, fy, width, height, px, py) => {
            if (py === Dimensions.get('window').height) {
              this.props.hide(false);
            }
          });
        }}
      >
        <View style={styles.view} ref={'view_ref'}>
          <View style={styles.nav}>
            <Text style={styles.nav_title}>New Currency</Text>
            <TouchableOpacity
              onPress={() => {
                this.props.hide(false);
              }}
            >
              <Icon
                style={styles.nav_close}
                name={'close'}
                size={30}
                color={mode === 'dark' ? 'white' : 'black'}
              />
            </TouchableOpacity>
          </View>
        </View>
      </TouchableWithoutFeedback>

When wrapping the view you want to render in a TouchableWithoutFeedback, you get the "onPressOut" functionality. Then with this portion of code:

onPressOut={() => {
          this.refs.view_ref.measure((fx, fy, width, height, px, py) => {
            if (py === Dimensions.get('window').height) {
              this.props.hide(false);
            }
          });
        }}

you basically tell the view to listen on touch events happening at the top of the modal, thus it will be also executed when you swipe to dismiss

I was inspired by this answer: https://github./facebook/react-native/issues/26892#issuement-605516625

Enjoy

本文标签： javascriptReact Native ltModal gt onDismiss not invokedStack Overflow