Home

Awesome

react-native-lightbox

Installation

yarn add react-native-lightbox

Usage

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

import Lightbox from 'react-native-lightbox';

const LightboxView ({ navigator }) => (
  <Lightbox navigator={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.

const renderScene = (route, navigator) => {
  const Component = route.component;

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

const MyApp = () => (
  <Navigator
    ref="navigator"
    style={{ flex: 1 }}
    renderScene={renderScene}
    initialRoute={{
      component: LightboxView,
    }}
  />
);

Properties

PropTypeDescription
activePropsobjectOptional set of props applied to the content component when in lightbox mode. Usable for applying custom styles or higher resolution image source.
renderHeader(close)functionCustom header instead of default with X button
renderContentfunctionCustom lightbox content instead of default child content
willClosefunctionTriggered before lightbox is closed
onClosefunctionTriggered when lightbox is closed
onOpenfunctionTriggered when lightbox is opened
didOpenfunctionTriggered after lightbox is opened
underlayColorstringColor of touchable background, defaults to black
backgroundColorstringColor of lightbox background, defaults to black
swipeToDismissboolEnables gestures to dismiss the fullscreen mode by swiping up or down, defaults to true.
springConfigobjectAnimated.spring configuration, defaults to { tension: 30, friction: 7 }.

Demo

Demo

Example

Check full example in the Example folder.

License

MIT License. © Joel Arvidsson