react-native-lightbox-v2

👀 0.9.0 is coming!

Fork this project to do some updates, because the original library seems to be out of maintenance！ Thanks Joel Arvidsson

Installation

I changed the name in order to publish to npm, it is not actually a new version, it just fixed some problems based on the original！

yarn add react-native-lightbox-v2

Usage

Note: react-native-lightbox-v2 will no longer support navigator after version 0.9.0.

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

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

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>
);

can long press to save image?

longPressCallback can resolve it!

const uri = 'http://knittingisawesome.com/wp-content/uploads/2012/12/cat-wearing-a-reindeer-hat1.jpg'
const longPress = (uri) => {
  CameraRoll.saveToCameraRoll(uri)
}
<Lightbox longPressCallback={() => longPress(uri)}>
    <Image
      style={{ height: 300 }}
      source={{ uri }}
    />
  </Lightbox>

Navigator setup/Android support

Note: react-native-lightbox-v2 will no longer support navigator after version 0.9.0.

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

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
`renderItem(open)`	`function`	Custom content instead of default child content
`willClose`	`function`	Triggered before lightbox is closed
`onClose`	`function`	Triggered when lightbox is closed
`onOpen`	`function`	Triggered when lightbox is opened
`didOpen`	`function`	Triggered after lightbox is opened
`onLongPress`	`function`	Triggered after lightbox is long pressed
`onLayout`	`function`	Triggered after lightbox layout complete
`doubleTapCallback`	`function`	Triggered after double taped
`doubleTapZoomEnabled`	`boolean`	Enable double-tap to zoom , defaults to true
`doubleTapGapTimer`	`number`	Determine the time interval of double-tap, defaults 500ms
`longPressGapTimer`	`number`	Determine the time interval of long-press, defaults 2000ms
`longPressCallback`	`function`	Triggered after the content is long pressed
`doubleTapZoomToCenter`	`boolean`	Zoom to center when double-tap trigger
`doubleTapMaxZoom`	`number`	Maximum magnification factor, defaults to 2
`doubleTapZoomStep`	`number`	The zoom ratio of each double-tap, defaults to 0.5
`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`.
`disabled`	`bool`	disable the lightbox. defaults to `false`.
`style`	`object`	lightbox view wrapper's style.
`dragDismissThreshold`	`number`	threshold distance for sliding exit. defaults to `150`.
`modalProps`	`object`	any other modal props you need. defaults to `{}`.
`useNativeDriver`	`bool`	wether use native driver. defaults to `false`.
`springConfig`	`object`	`Animated.spring` configuration, defaults to `{ tension: 30, friction: 7 }`.

Demo

Example

Check full example in the Example folder.

cbbfcd/react-native-lightbox