modal-swipe-up v2.0.0

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 the inside of the Modal.

⚙️ Installation

To install the package:

npm i modal-swipe-up

✅ It is done!

🚀 How to use

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

import ModalSwipeUp from 'modal-swipe-up';

const App = () => {
  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}
      >
        <View><Text>Your Content Here</Text></View>
      </ModalSwipeUp>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

export default App;

☝️ Options

🖼️ Demo

Here’s a quick demo of how the component works:

⭐️ Show Your Support

Please give a ⭐️ if this project helped you!

👏 Contributing

If you have any questions, requests, or want to contribute to modal-swipe-up, please write an issue or submit a Pull Request freely.