Swipe Modal Up Down Component For React Native

A modal component for React Native that you can swipe up and swipe down.

Basic usage:

1. Install and import the component.

# NPM
$ npm i react-native-swipe-modal-up-down
import SwipeUpDownModal from 'react-native-swipe-modal-up-down';

2. Add the modal component to the app.

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

Preview:

Swipe Modal Up Down Component For React Native

Download Details:

Author: MinaSamir11

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/MinaSamir11/react-native-swipe-modal-up-down

License: MIT

You Might Be Interested In:

Add Comment