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({
});
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.