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！

``shell
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.

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

const LightboxView = ({ navigator }) => (

style={{ height: 300 }}
source={{ uri: 'http://knittingisawesome.com/wp-content/uploads/2012/12/cat-wearing-a-reindeer-hat1.jpg' }}
/>

);
`

$3

longPressCallback can resolve it!

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

`

$3

> 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.

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

return (

);
};

const MyApp = () => (
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

!Demo

Example

Check full example in the Example` folder.

Changelog

Changelog

License

MIT License. © Joel Arvidsson