Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oblador/react-native-lightbox
Images etc in Full Screen Lightbox Popovers for React Native
https://github.com/oblador/react-native-lightbox
Last synced: 5 days ago
JSON representation
Images etc in Full Screen Lightbox Popovers for React Native
- Host: GitHub
- URL: https://github.com/oblador/react-native-lightbox
- Owner: oblador
- License: mit
- Created: 2015-08-04T00:33:28.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2021-11-08T16:18:57.000Z (about 3 years ago)
- Last Synced: 2024-05-29T16:54:23.883Z (7 months ago)
- Language: JavaScript
- Homepage:
- Size: 438 KB
- Stars: 2,808
- Watchers: 34
- Forks: 504
- Open Issues: 86
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native - react-native-lightbox ★1917 - A very Slick and modern mobile lightbox implementation (Components / UI)
- awesome-react-native - react-native-lightbox ★1917 - A very Slick and modern mobile lightbox implementation (Components / UI)
- awesome-react-native - react-native-lightbox ★1917 - A very Slick and modern mobile lightbox implementation (Components / UI)
- awesome-reactnative-ui - react-native-lightbox - 3b09-11e5-90af-a69980e9f4be.gif)| (Others)
- awesome-reactnative-ui - react-native-lightbox - 3b09-11e5-90af-a69980e9f4be.gif)| (Others)
- awesome-react-native - react-native-lightbox
- awesome-react-native - react-native-lightbox ★1917 - a very Slick and modern mobile lightbox implementation (Components / UI)
- awesome-react-native-ui - react-native-lightbox ★904 - a very Slick and modern mobile lightbox implementation (Components / UI)
- ReactNativeMaterials - react-native-lightbox
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