npm install --save react-native-lightbox
This module requires React Native 0.11 or later
navigator property is optional but recommended on iOS, see next section for Navigator configuration.
varLightbox=require('react-native-lightbox');varLightboxView=React.createClass({render: function(){return(<Lightboxnavigator={this.props.navigator}><Imagestyle={{height: 300}}source={{uri: 'http://knittingisawesome.com/wp-content/uploads/2012/12/cat-wearing-a-reindeer-hat1.jpg'}}/></Lightbox>);},});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.
varMyApp=React.createClass({renderScene: function(route,navigator){varComponent=route.component;return(<Componentnavigator={navigator}route={route}{...route.passProps}/>);},render: function(){return(<Navigatorref="navigator"style={{flex: 1}}renderScene={this.renderScene}initialRoute={{component: LightboxView,}}/>);}});| 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 }. |
Check full example in the Example folder.
MIT License. © Joel Arvidsson