https://github.com/alantoa/react-native-lightbox
🖼️ A 60+ fps lightbox component, build upon Reanimated & GestureHandler.
https://github.com/alantoa/react-native-lightbox
Last synced: 4 months ago
JSON representation
🖼️ A 60+ fps lightbox component, build upon Reanimated & GestureHandler.
- Host: GitHub
- URL: https://github.com/alantoa/react-native-lightbox
- Owner: alantoa
- Created: 2022-05-24T08:38:44.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-02-26T11:08:29.000Z (over 1 year ago)
- Last Synced: 2025-03-15T08:06:55.293Z (4 months ago)
- Language: TypeScript
- Homepage:
- Size: 19.3 MB
- Stars: 157
- Watchers: 3
- Forks: 12
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
## ⚠️ This package is no longer maintained
This repository is no longer actively maintained. If you are looking for a more performant solution with an improved API, please check out [**galeria**](https://github.com/nandorojo/galeria).
The **[galeria](https://github.com/nandorojo/galeria)** package provides better performance and enhanced features, making it a great alternative to continue your project.
Thank you for your support!
React Native Lightbox
### Todo
- [x] tap to close
- [ ] pinch to zoom (use [Reanimated v2](https://docs.swmansion.com/react-native-reanimated/) & [react-native-gesture-handler v2](https://docs.swmansion.com/react-native-gesture-handler/))
- [ ] web support (use [photoswipe](https://github.com/dimsemenov/photoswipe) )
- [ ] photo gallery (use [react-native-pager-view](https://github.com/callstack/react-native-pager-view))
### Installation
First you have to follow installation instructions of [Reanimated v2](https://docs.swmansion.com/react-native-reanimated/) and [react-native-gesture-handler v2](https://docs.swmansion.com/react-native-gesture-handler/)
```sh
npm install @alantoa/lightbox
```
### Usage
```js
import { LightBoxProvider, LightBox } from '@alantoa/lightbox';
import { StyleSheet, Image, Dimensions } from 'react-native';
import * as React from 'react';
const { width } = Dimensions.get('window');
export default function App() {
return (
);
}
```
### Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
### License
MIT