Skip to content

💡 🔳 🔭 React Native lightbox with pinch to zoom, pan, caption support and swipe to dismiss

License

Notifications You must be signed in to change notification settings

robcalcroft/react-native-lightbox-zoom

Repository files navigation

react-native-lightbox-zoom 💡 🔳 🔭

npm version

React Native lightbox with pinch to zoom, pan, caption support and swipe to dismiss

⚠️ react-native-lightbox-zoom requires React Native >=0.60

Install

  1. Install React and React Native (skip if you have them installed already or are using Expo).
  2. Install react-native-gesture-handler using expo install react-native-gesture-handler if you're using Expo or yarn add react-native-gesture-handler.
  3. Install react-native-lightbox-zoom.

Demo video

react native lightbox zoom demo

Props

Property Default Value Description
children Required The component that is rendered on its own and then rendered in the lightbox when pressed
caption undefined A user given caption string that is shown below the image
onLightboxShowChange undefined Function called when the lightbox is shown or hidden with the argument passed to the call back being true or false. Uses include changing styles for when the Image component is rendered in lightbox.
captionStyle {} Style object given to the <Text> component which renders the caption

Example

import { Image } from 'react-native';
import Lightbox from 'react-native-lightbox-zoom';

function LightBoxDemoApp() {
  function onLightboxShowChange(state) {
    // state is `true` or `false` relating to whether the lightbox
    // is showing or not
  }

  return (
    <Lightbox caption="Cat looking cute" onLightboxShowChange={onLightboxShowChange}>
      {/* Image is what the lightbox is designed for but you can use any component */}
      <Image
        style={[
          {
            width: 350,
            height: 245,
            alignSelf: 'center',
          },
        ]}
        source={{ uri: 'https://placekitten.com/500/350' }}
      />
    </Lightbox>
  )
}

About

💡 🔳 🔭 React Native lightbox with pinch to zoom, pan, caption support and swipe to dismiss

Topics

Resources

License

Stars

Watchers

Forks