react-native-lightning-modal
A fast bottom modal that works with React Native Reanimated 2!
Prerequisites
This module needs
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