a very Slick and modern mobile lightbox implementation. react-native-lightbox
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,
}}
/>
);
}
});
Author: oblador
GitHub: https://github.com/oblador/react-native-lightbox
#react-native #programming #reactjs