react-native-swippable-modal

This swippable modal library provides a swipe down modal close feature. Especially same modal contain textInput that too it worked well.

• It also provides an example app and a detailed usage overview of swippable modal
• It's fully Android and iOS compatible.

🎬 Preview

| Example | | :-------------------------------------: | | |

Installation

1. Install swippable modal

$ npm install react-native-swippable-modal
# --- or ---
$ yarn add react-native-swippable-modal

2. Install required dependencies

$ npm install react-native-reanimated react-native-gesture-handler
# --- or ---
$ yarn add react-native-reanimated react-native-gesture-handler

3. Install cocoapods in the ios project

cd ios && pod install

Note: Make sure to add Reanimated's babel plugin to your babel.config.js

module.exports = {
      ...
      plugins: [
          ...
          'react-native-reanimated/plugin',
      ],
  };

Usage

import React, { createRef } from 'react';
import { Button, Image, TextInput, View } from 'react-native';
import {
  SwippableModal,
  SwippableModalRefType,
} from 'react-native-swippable-modal';

const exampleModalRef = createRef<SwippableModalRefType>();

const App = () => {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title="Open Modal"
        onPress={() => exampleModalRef.current?.show()}
      />
      <SwippableModal ref={exampleModalRef} closeThreadSoldValue={100}>
        <TextInput placeholder={'Example Input'} />
        <View style={{ height: 150, width: '100%', marginTop: 10 }}>
          <Image
            source={{
              uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/800px-Image_created_with_a_mobile_phone.png',
            }}
            style={{ width: '100%', height: '100%' }}
            resizeMode={'contain'}
          />
        </View>
      </SwippableModal>
    </View>
  );
};

export default App;

Properties

| Props | Default | Type | Description | | :---------------------------------------- | :-------- | :-------------------- | :--------------------------------------------------------- | | ref* | modalRef | reference | It is default reference to open modal | | children | - | ReactNode | Pass children as ReactNode (Custom UI) | | closeThreadSoldValue | 200 | number | It's take number value from where point modal will closed | | modalStyle | - | ViewStyle | Modal style | | modalBackgroundColor | #FAFAFA | {backgroundColor: string}| Change modal background color | | disableLine | false | boolean | It's used for disable line (Hide line) | | modalInnerContainerStyle | - | ViewStyle | Modal inner container style | | disableClose | false | boolean | If true, modal will not close if touch out side the modal (only swipe down close allow) | | disableBackgroundColor | false | boolean | If pass true, it will change background color #FFFFFF04 | | disableSwipeDown | false | boolean | If true, it will disable gesture swipe down close | | panGestureProps | {} | PanGestureHandlerProp | Pan Gesture Props | | modalContainerStyle | - | ViewStyle | Modal Container style | | modalLineStyle | - | ViewStyle | Modal Line style | | showModal | - | function | Default function to open modal | | hideModal | - | function | Default function to hide modal | | panRef | panRef | reference | Default pan reference to get pan gesture references values |

Example

A full working example project is here Example

• Install dependencies in example app cd example && yarn && cd ios/ && pod install && cd ..
• Run example app yarn ios

Find this library useful? ❤️

Support it by joining stargazers for this repository.⭐

🤝 How to Contribute

We'd love to have you improve this library or fix a problem 💪 Check out our Contributing Guide for ideas on contributing.

Bugs / Feature requests / Feedbacks

For bugs, feature requests, and discussion please use GitHub Issues

License

• MIT License