FormidableLabs/react-native-lightbox

Name: react-native-lightbox

Owner: Formidable

Description: Images etc in Full Screen Lightbox Popovers for React Native

Forked from: oblador/react-native-lightbox

Created: 2017-08-15 15:32:44.0

Updated: 2018-01-06 02:21:14.0

Pushed: 2017-10-05 15:15:36.0

Homepage:

Size: 191

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

react-native-lightbox

Installation

install --save react-native-lightbox

This module requires React Native 0.11 or later

Usage

navigator property is optional but recommended on iOS, see next section for Navigator configuration.

Lightbox = require('react-native-lightbox');

LightboxView = React.createClass({
nder: function() {
return (
  <Lightbox navigator={this.props.navigator}>
    <Image
      style={{ height: 300 }}
      source={{ uri: 'http://knittingisawesome.com/wp-content/uploads/2012/12/cat-wearing-a-reindeer-hat1.jpg' }}
    />
  </Lightbox>
);

Navigator setup/Android support

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.

MyApp = React.createClass({
nderScene: function(route, navigator) {
var Component = route.component;

return (
  <Component navigator={navigator} route={route} {...route.passProps} />
);


nder: function() {
return (
  <Navigator
    ref="navigator"
    style={{ flex: 1 }}
    renderScene={this.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| |onClose|function|Triggered when lightbox is closed| |onOpen|function|Triggered when lightbox is opened| |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.| |springConfig|object|Animated.spring configuration, defaults to { tension: 30, friction: 7 }.|

Demo

Example

Check full example in the Example folder.

License

MIT License. © Joel Arvidsson