score:2

Accepted answer

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

I hope it's fixed soon!

score:0

Hey there you should try something like that

This is the code for the component 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.com/facebook/react-native/issues/26892#issuecomment-605516625

Enjoy 😊

score:0

This is a bug with React Native, but I have found a workaround that works for me. Basically I have a TouchableWithoutFeedback fill the entire Modal. Then I use the onPressOut prop, which receives an event from which you can measure the locationY. What I have found is that if locationY < 0, the swipe was successful in dismissing the Modal, and in that case you can call setModalVisible(false). Then, next time you want to re-show the Modal, it will work. Hope it helps!

<Modal animationType="slide" presentationStyle="pageSheet" visible={ modal }>
  <TouchableWithoutFeedback onPressOut={(e) => {
    if (e.nativeEvent.locationY < 0) {
      handleModal(false)
    }}
  >
    <View style={ styles.modalOuter }>
      <View style={ styles.modalInner }>
        <Text>Hi from Modal</Text>
      </View>
    </View>
  </TouchableWithoutFeedback>
</Modal>

// ...

const styles = StyleSheet.create({
  modalInner: {
    backgroundColor: "white",
    position: "absolute",
    bottom: 0,
    width: "100%",
    height: 400
  },
  modalOuter: {
    backgroundColor: "white",
    height: "100%"
  }
});

Related Query

More Query from same tag