Special Thanks

• This repository was originally authored by oblador and was forked from react-native-lightbox:4665b3e.

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.

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.

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 configuration, defaults to { tension: 30, friction: 7 }.|

Demo

Contact

• Fork maintainer(s):
  • [email protected]
• Original author:
  • [email protected]