lp-react-native-lightbox-zoom v0.8.4

lp-react-native-lightbox-zoom

I extended the infamous react-native-lightbox package with a zoom functionality using react-native-image-pan-zoom.

Installation

npm install lp-react-native-lightbox-zoom

Usage

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

import Lightbox from 'react-native-lightbox-zoom';

const LightboxView ({ navigator }) => (
  <LPLightbox navigator={navigator}>
    <Image
      style={{ height: 300 }}
      source={{ uri: 'http://knittingisawesome.com/wp-content/uploads/2012/12/cat-wearing-a-reindeer-hat1.jpg' }}
    />
  </LPLightbox>
);

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

Demo

Example

Check full example in the Example folder.

License

MIT License. © Joel Arvidsson