# react-native-light-box

> Lightbox scene transition for React Native http://plan.xyz

Latest version **0.7.1** (published 2016-07-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-light-box
pnpm add react-native-light-box
yarn add react-native-light-box
bun add react-native-light-box
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.7.1 |
| Published | 2016-07-19 |
| First published | 2016-07-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | plan xyz |
| Maintainers | melvyn |
| Keywords | planxyz, plan xyz, react-native, react-component, react-native-component, react, mobile, ios, android, ui, lightbox, gallery, image |

## Links

- npm: https://www.npmjs.com/package/react-native-light-box
- Repository: https://github.com/planxyz/react-native-light-box
- Issues: https://github.com/planxyz/react-native-light-box/issues
- npm.io page: https://npm.io/package/react-native-light-box

## Dependencies (1)

- [react-timer-mixin](https://npm.io/package/react-timer-mixin.md) ^0.13.3

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.7.1 (latest) — 2016-07-19
- 0.7.0 — 2016-07-12
- 0.6.3 — 2016-07-12
- 0.6.2 — 2016-07-10
- 0.6.1 — 2016-07-09

## README

## Special Thanks

- This repository was originally authored by [oblador](https://github.com/oblador) and was forked from [react-native-lightbox:4665b3e](https://github.com/oblador/react-native-lightbox/tree/4665b3ea31a71c0a0eed5d1658ae082aeabdd613).

## Installation

```
npm install --save react-native-light-box
```

**This module requires React Native 0.11 or later**

## Usage

`navigator` property is optional but recommended on iOS, see next section for `Navigator` configuration.

```js
var Lightbox = require('react-native-light-box');

var LightboxView = React.createClass({
  render: function() {
    return (
      <Lightbox navigator={this.props.navigator}>
        <Image
          style={{ height: 300 }}
          source={{ uri: 'http://knittingisawesome.com/wp-content/uploads/2012/12/cat-wearing-a-reindeer-hat1.jpg' }}
        />
      </Lightbox>
    );
  },
});
```

### 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
var MyApp = React.createClass({
  renderScene: function(route, navigator) {
    var Component = route.component;

    return (
      <Component navigator={navigator} route={route} {...route.passProps} />
    );
  },

  render: function() {
    return (
      <Navigator
        ref="navigator"
        style={{ flex: 1 }}
        renderScene={this.renderScene}
        initialRoute={{
          component: LightboxView,
        }}
      />
    );
  }
});
```

## 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|
|**`onClose`**|`function`|Triggered when lightbox is closed|
|**`onOpen`**|`function`|Triggered when 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

![Demo](https://cloud.githubusercontent.com/assets/378279/9074360/16eac5d6-3b09-11e5-90af-a69980e9f4be.gif)

## Contact

- Fork maintainer(s):
  - developers@plan.xyz
- Original author:
  - joel@oblador.se

---
_Source: https://npm.io/package/react-native-light-box · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._