https://github.com/atlj/react-native-lightning-modal
A performant bottom modal that works using React Native Reanimated 2
https://github.com/atlj/react-native-lightning-modal
hacktoberfest hacktoberfest2021 modal npm-package react react-native typescript
Last synced: 2 months ago
JSON representation
A performant bottom modal that works using React Native Reanimated 2
- Host: GitHub
- URL: https://github.com/atlj/react-native-lightning-modal
- Owner: atlj
- License: mit
- Created: 2021-08-08T17:02:17.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2022-03-30T14:51:56.000Z (about 3 years ago)
- Last Synced: 2025-04-06T04:59:45.514Z (2 months ago)
- Topics: hacktoberfest, hacktoberfest2021, modal, npm-package, react, react-native, typescript
- Language: TypeScript
- Homepage:
- Size: 623 KB
- Stars: 36
- Watchers: 3
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-lightning-modal
A fast bottom modal that works with React Native Reanimated 2!
## Prerequisites
This module needs
[React Native Reanimated 2](https://docs.swmansion.com/react-native-reanimated/docs/installation) &
[React Native Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/docs/) to work
## 🚀 Installation
First make sure that you have installed all the prerequisites.
### Using npm
```sh
npm install react-native-lightning-modal
```
### Using Yarn
```sh
yarn add react-native-lightning-modal
```
## ⚙️ Usage
### Using the useBottomModal hook 🪝
> This hook declares the ref for you
```js
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 (
{/* Your Content */}
);
}
```
> Bottom modal component needs to be below other elements.
You can then use
```js
show();
```
to show the modal
---
### Using a ref 📝
```js
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 (
{/* Your Content */}
);
}
```
You can than use
```js
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](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## 📰 License
MIT