I want to be able to swipe down and close the full screen modal.

I tried React-native-modal, but it was not suitable for my app.

I tried the method using GestureRecognizer on this page and was able to close the modal, but the modal did not go up and down according to the swipe, which is not ideal for me. I want to close the full screen modal with an animation like when I specify pageSheet in presentationStyle.

If you know more about it, please let me know how to do it.

const RecordingModal = ({ open, close }) => {
  return (
    <Modal
      animationType="slide"
      onSwipeComplete={close}
      presentationStyle="fullscreen"
      visible={open}
    >
      <SafeAreaView style={styles.modal}>
        <Text>aaaa</Text>
        <Text>aaaa</Text>
      </SafeAreaView>
    </Modal>
  );
};

CodePudding user response：

Try this way

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

You can also use react-native-swipe-modal-up-down Following the usage

import SwipeUpDownModal from 'react-native-swipe-modal-up-down';

  let [ShowComment, setShowModelComment] = useState(false);
  let [animateModal, setanimateModal] = useState(false);

<SwipeUpDownModal
  modalVisible={ShowComment}
  PressToanimate={animateModal}
  //if you don't pass HeaderContent you should pass marginTop in view of ContentModel to Make modal swipeable
  ContentModal={
    <View style={styles.containerContent}>
      <FlatList
        data={data}
        renderItem={({item, index}) => (
          <item key={index} Data={item} />
        )}
        keyExtractor={item => item.id}
      />
    </View>
  }
  HeaderStyle={styles.headerContent}
  ContentModalStyle={styles.Modal}
  HeaderContent={
    <View style={styles.containerHeader}>
          <Button 
              Title={"Press Me"}
              onPress={() => {
                setanimateModal(true);
              }}
           />
    </View>
  }
  onClose={() => {
      setModelComment(false);
      setanimateModal(false);
  }}
/>

const styles = StyleSheet.create({
  containerContent: {flex: 1, marginTop: 40},
  containerHeader: {
    flex: 1,
    alignContent: 'center',
    alignItems: 'center',
    justifyContent: 'center',
    height: 40,
    backgroundColor: '#F1F1F1',
  },
  headerContent:{
    marginTop: 0,
  },
  Modal: {
    backgroundColor: '#005252',
    marginTop: 0,
  }
});