Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
  )
}

...
like image 991
bash.ruv Avatar asked Oct 30 '25 04:10

bash.ruv


1 Answers

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>
like image 175
Oleksii Avatar answered Oct 31 '25 19:10

Oleksii



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!