@develondigital/react-native-lightning-modal

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 i @develondigital/react-native-lightning-modal

Using Yarn

yarn add @develondigital/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 '@develondigital/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 '@develondigital/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