A performant bottom modal that works using React Native Reanimated 2

react-native-lightning-modal

A performant bottom modal that works using React Native Reanimated 2

Prerequisites

This module needs
React Native Reanimated 2 &
React Native Gesture Handler to work

? Installation

First make sure that you have installed all the prerequisites.

Using npm

npm install react-native-lightning-modal

Using Yarn

yarn add react-native-lightning-modal

⚙️ Usage

Using the useBottomModal hook ?

This hook declares the ref for you

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={500} {...modalProps}>
        {/* Your Content */}
      </BottomModal>
    </View>
  );
}

Bottom modal component needs to be below other elements.

You can then use

show()

to show the 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={500} ref={bottomModalRef}>
        {/* Your Content */}
      </BottomModal>
    </View>
  );
}

You can than use

bottomModalRef.show()

to show the modal

DOCUMENTATION

PROPS

Prop name	Description	Type	Required
height	Height of modal's presented state. This is required for animation to behave correctly	number	✅
backdropColor	Basically the color of a fullscreen view displayed below modaL	string	❌
style	Style of modal's container	ViewStyle	❌
easing	Easing function which modal will be presented.	Animated.EasingFunction	❌
duration	Modal animation's duration in milliseconds.	number	❌

GitHub

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