https://github.com/sticknet/react-native-lightbox
https://github.com/sticknet/react-native-lightbox
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/sticknet/react-native-lightbox
- Owner: sticknet
- License: mit
- Created: 2022-06-16T14:43:47.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-06-16T14:44:02.000Z (about 4 years ago)
- Last Synced: 2025-05-21T08:48:44.743Z (about 1 year ago)
- Language: JavaScript
- Size: 4.88 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-lightbox
## Installation
```
yarn add react-native-lightbox
```
## Usage
`navigator` property is optional but recommended on iOS, see next section for `Navigator` configuration.
```js
import Lightbox from 'react-native-lightbox';
const LightboxView ({ navigator }) => (
);
```
### Navigator setup/Android support
For android support you must pass a reference to a `Navigator` since it does not yet have the `Modal` component and is not on the official todo list. See the `Example` project for a complete example.
```js
const renderScene = (route, navigator) => {
const Component = route.component;
return (
);
};
const MyApp = () => (
);
```
## Properties
| Prop | Type | Description |
|---|---|---|
|**`activeProps`**|`object`|Optional set of props applied to the content component when in lightbox mode. Usable for applying custom styles or higher resolution image source.|
|**`renderHeader(close)`**|`function`|Custom header instead of default with X button|
|**`renderContent`**|`function`|Custom lightbox content instead of default child content|
|**`willClose`**|`function`|Triggered before lightbox is closed|
|**`onClose`**|`function`|Triggered when lightbox is closed|
|**`onOpen`**|`function`|Triggered when lightbox is opened|
|**`didOpen`**|`function`|Triggered after lightbox is opened|
|**`underlayColor`**|`string`|Color of touchable background, defaults to `black`|
|**`backgroundColor`**|`string`|Color of lightbox background, defaults to `black`|
|**`swipeToDismiss`**|`bool`|Enables gestures to dismiss the fullscreen mode by swiping up or down, defaults to `true`.|
|**`springConfig`**|`object`|[`Animated.spring`](https://facebook.github.io/react-native/docs/animations.html) configuration, defaults to `{ tension: 30, friction: 7 }`.|
## Demo
## Example
Check full example in the `Example` folder.
## License
[MIT License](http://opensource.org/licenses/mit-license.html). © Joel Arvidsson