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.
var Lightbox = require('react-native-lightbox'); var LightboxView = React.createClass({ render: 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> ); }, });
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.
var MyApp = React.createClass({ renderScene: function(route, navigator) { var Component = route.component; return ( <Component navigator={navigator} route={route} {...route.passProps} /> ); }, render: function() { return ( <Navigator ref="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