Skip to content

cbbfcd/react-native-lightbox

 
 

Repository files navigation

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

Demo

Example

Check full example in the Example folder.

Changelog

Changelog

License

MIT License. © Joel Arvidsson

About

Images etc in Full Screen Lightbox Popovers for React Native

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 48.5%
  • JavaScript 26.3%
  • Objective-C 10.6%
  • Java 7.1%
  • Handlebars 4.2%
  • Ruby 1.8%
  • Starlark 1.5%