TypeScript icon, indicating that this package has built-in type declarations

0.9.0 • Public • Published


👀 0.8.9-beta.0 is coming!

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


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


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

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}>
      style={{ height: 300 }}
      source={{ uri: '' }}

can long press to save image?

longPressCallback can resolve it!

const uri = ''
const longPress = (uri) => {
<Lightbox longPressCallback={() => longPress(uri)}>
      style={{ height: 300 }}
      source={{ uri }}

Navigator setup/Android support

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

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 = () => (
    style={{ flex: 1 }}
      component: LightboxView,


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




Check full example in the Example folder.




MIT License. © Joel Arvidsson


npm i react-native-lightbox-v2

DownloadsWeekly Downloads






Unpacked Size

26.8 kB

Total Files


Last publish


  • huangteng