modal-swipe-up

modal-swipe-up

React Native Modal Swipe-Up

modal-swipe-up is a swipeable, easy to use Modal for your React Native projects. You can close the modal by swiping up with pan gestures. Feel free to redesign inside of the Modal.

⚙️ Installation

To install the package;

$ npm i modal-swipe-up

✅ It is done!

🚀 How to use

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

import ModalSwipeUp from 'modal-swipe-up';

export default App = () => {
  const [modalProps, setModalProps] = useState({
   // ...or any prop you want
  });
  const [isModalActive, setIsModalActive] = useState(false);

  const closeModal = () => {
    setIsModalActive(false);
  };

  return (
    <View style={styles.container}>
      <Text style={styles.welcome}>Welcome to React Native!</Text>
      <Text style={styles.instructions}>To get started, edit App.js</Text>
        <ModalSwipeUp showModal={isModalActive} 
          onPressClose={closeModal}
          closeHeight={200}>
        <PanelContent /> {/* Your Content Here */}
       </ModalSwipeUp>
    </View>
  );
};

☝️ Options

Properties	Type	Description	Default
showModal	bool	Show/Hide the modal	false
onPressClose	Function	Fired when the modal is closed
closeHeight	number	Set minimum height for swipe up and close modal
onOpen	Function	Fired when the modal is opened

⭐️ Show Your Support

Please give a ⭐️ if this project helped you!

👏 Contributing

If you have any questions or requests or want to contribute to modal-swipe-upl, please write the issue or give me a Pull Request freely.