react-native-lightbox

Installation

npm install --save react-native-lightbox

This module requires React Native 0.11 or later

Usage

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

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

var LightboxView = createReactClass({
  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.

var createReactClass = require('create-react-class');

var MyApp = createReactClass({
  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`.
`pinchToZoom`	`bool`	Enables pinch to zoom functionality on the fullscreen content, defaults to `true`.
`springConfig`	`object`	`Animated.spring` configuration, defaults to `{ tension: 30, friction: 7 }`.

Demo

Example

Check full example in the Example folder.

lpillonel/react-native-lightbox