0.0.4 • Published 3 years ago
react-native-lightbox-zoom v0.0.4
react-native-lightbox-zoom :bulb: :white_square_button: :telescope:
React Native lightbox with pinch to zoom, pan, caption support and swipe to dismiss
:warning: react-native-lightbox-zoom
requires React Native >=0.60
Install
- Install React and React Native (skip if you have them installed already or are using Expo).
- Install
react-native-gesture-handler
usingexpo install react-native-gesture-handler
if you're using Expo oryarn add react-native-gesture-handler
. - Install
react-native-lightbox-zoom
.
Demo video
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>
)
}