Skip to content

A performant bottom modal that works using React Native Reanimated 2

License

Notifications You must be signed in to change notification settings

atlj/react-native-lightning-modal

Repository files navigation

react-native-lightning-modal

2021-08-09 17-32-38

A fast bottom modal that works with 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 Defaults to
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 undefined
style Style of modal's container ViewStyle undefined
animation Animation type to use, can get spring and timing, defaults to timing animation 'spring' | 'timing' 'timing'
timingConfig Timing animation's config if animation prop is set to 'timing' Animated.WithTimingConfig {duration: 300, easing: Easing.quad}
springConfig Spring animation's config if animation prop is set to 'spring' Animated.WithSpringConfig undefined
backdropStyle Style of the backdrop component ViewStyle undefined

➕ Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

📰 License

MIT