Fast Bottom Modal For React Native

A fast animated bottom modal built with React Native Reanimated 2 & React Native Gesture Handler.

How to use it:

1. Install and import the modal component.

# Yarn
$ yarn add react-native-lightning-modal

# NPM
$ npm i react-native-lightning-modal --save

2. Create a bottom modal with the useBottomModal hook.

import React from 'react';
import { View } from 'react-native';
import { useBottomModal, BottomModal } from 'react-native-lightning-modal';

export default function App() {
  const { dismiss, show, modalProps } = useBottomModal();
  return (
    <View>
      <BottomModal  height={400} {...modalProps}>
        Modal Content Here
      </BottomModal>
    </View>
  );
}

show();

3. Create a bottom modal using a ref.

import React from 'react';
import { View } from 'react-native';
import { BottomModal, BottomModalRef } from 'react-native-lightning-modal';

export default function App() {
  const bottomModalRef = React.useRef<BottomModalRef>(null);
  return (
    <View>
      <BottomModal height={400} ref={bottomModalRef}>
        Modal Content Here
      </BottomModal>
    </View>
  );
}

bottomModalRef.show()

4. All component props.

/**
 * Height of modal's presented state. This is required for animation to behave correctly
 */
height: number;
/**
 * Basically the color of a fullscreen view displayed below modal.
 * You can also change this by using backdropStyle prop.
 * @example rgba(255,255,255,0.8)
 */
backdropColor?: string;
/**
 * Style of modal's container
 */
style?: ViewStyle;
/**
 * Easing function which modal will be presented.
 * Since this also affects the time between user pressing the button and seeing the effect, a faster kind of curve function is recommended.
 * @default Easing.quad
 */
easing?: Animated.EasingFunction;
/**
 * Modal animation's duration in milliseconds.
 * Since this also affects the time between user pressing the button and seeing the effect, a smaler number is recommended.
 * @default 300
 */
duration?: number;
/**
 * Style of backdrop component
 */
backdropStyle?: ViewStyle;

5. Dismiss the modal.

bottomModalRef.dismiss()

6. Check if the modal is visible.

bottomModalRef.isActive

Preview:

Download Details:

Author: atlj

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/atlj/react-native-lightning-modal

License: MIT