iosreact-native

react native modal close with swipe down (react-native-swipe-gestures)


I am making a modal opening and closing using the swipe gesture(react-native-swipe-gestures).
But It doesn't work any swipe when Modal is Visible.
I want that Modal can close with swipe down.
Does it any solution?

import React from 'react';
import { ... } from 'react-native';
import GestureRecognizer from 'react-native-swipe-gestures';

export default class SwipeModal extends Component {

 state = {
  modalVisible: false
 }

 setModalVisible = (visible) => {
  this.setState({ modalVisible: visible });
 }

 render() {
  const { modalVisible } = this.state;
  return (
   <View>
    <Modal 
     animationType="slide"
     presentationStyle="formSheet"
     visible={ modalVisible }
    >
     <GestureRecognizer
      onSwipeDown={ () => this.setModalVisible(!modalVisible) }
     >
      <Text>Swipe Down Please</Text>
     </GestureRecognizer>
    </Modal>
    <GestureRecognizer
      onSwipeUp={ () => this.setModalVisible(true) }
     >
      <Text>Swipe Up Please</Text>
     </GestureRecognizer>
   </View>
  )
}

...

Solution

  • You need to wrap your view inside 1 gesture recognizer, and pass children to it that will have access onSwipe gestures, then you need to give it style={{flex: 1}} so it will cover all screen, like this:

    <GestureRecognizer
      style={{flex: 1}}
      onSwipeUp={ () => this.setModalVisible(true) }
      onSwipeDown={ () => this.setModalVisible(false) }
    >
      <Modal 
        animationType="slide"
        presentationStyle="formSheet"
        visible={ modalVisible }
      >
        <Text>Swipe Down Please</Text>
      </Modal>
      <Text>Swipe Up Please</Text>
    </GestureRecognizer>