react-native-lightbox

Installation

npm install --save react-native-lightbox

This module depends on react-native-overlay, so if you haven't already integrated it, follow these instructions. Note: react-native-overlay should already be installed as a dependency of react-native-lightbox, have a look in node_modules/react-native-lightbox/node_modules/react-native-overlay.

Usage

var Lightbox = require('react-native-lightbox');

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

Manual Opening & Closing

The component exposes the open and close methods. Smack a ref on the <Lightbox> and you're good to go. This is probably quite useful if you're doing a custom header.

render: function() {
  return (
    <Lightbox ref="lightbox">…</Lightbox>
  );
},
handleSomething: function() {
  this.refs.lightbox.open();
}

Properties

Prop	Type	Description
`header`	`element`	Custom header instead of default with X button
`onClose`	`function`	Triggered when lightbox is closed
`onOpen`	`function`	Triggered when lightbox is opened
`underlayColor`	`string`	Color of touchable background, defaults to `black`

Demo

Example

Check full example in the Example folder.