rnl

react-native-lightbox-v2

Images etc in Full Screen Lightbox Popovers for React Native

Showing:

Popularity

Downloads/wk

495

GitHub Stars

11

Maintenance

Last Commit

1mo ago

Contributors

16

Package

Dependencies

1

License

MIT

Type Definitions

Tree-Shakeable

No?

Readme

react-native-lightbox-v2

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

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 = () => (
  <Navigator
    ref="navigator"
    style={{ flex: 1 }}
    renderScene={renderScene}
    initialRoute={{
      component: LightboxView,
    }}
  />
);

Properties

PropTypeDescription
activePropsobjectOptional set of props applied to the content component when in lightbox mode. Usable for applying custom styles or higher resolution image source.
renderHeader(close)functionCustom header instead of default with X button
renderContentfunctionCustom lightbox content instead of default child content
willClosefunctionTriggered before lightbox is closed
onClosefunctionTriggered when lightbox is closed
onOpenfunctionTriggered when lightbox is opened
didOpenfunctionTriggered after lightbox is opened
onLongPressfunctionTriggered after lightbox is long pressed
onLayoutfunctionTriggered after lightbox layout complete
doubleTapCallbackfunctionTriggered after double taped
doubleTapZoomEnabledbooleanEnable double-tap to zoom , defaults to true
doubleTapGapTimernumberDetermine the time interval of double-tap, defaults 500ms
longPressGapTimernumberDetermine the time interval of long-press, defaults 2000ms
longPressCallbackfunctionTriggered after the content is long pressed
doubleTapZoomToCenterbooleanZoom to center when double-tap trigger
doubleTapMaxZoomnumberMaximum magnification factor, defaults to 2
doubleTapZoomStepnumberThe zoom ratio of each double-tap, defaults to 0.5
underlayColorstringColor of touchable background, defaults to black
backgroundColorstringColor of lightbox background, defaults to black
swipeToDismissboolEnables gestures to dismiss the fullscreen mode by swiping up or down, defaults to true.
disabledbooldisable the lightbox. defaults to false.
styleobjectlightbox view wrapper's style.
dragDismissThresholdnumberthreshold distance for sliding exit. defaults to 150.
modalPropsobjectany other modal props you need. defaults to {}.
useNativeDriverboolwether use native driver. defaults to false.
springConfigobjectAnimated.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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100