Author - StudySection Post Views - 30 views
React Native

React Native Lightbox

React Native Installation

yarn add react-native-lightbox

Usage
On iOS, the navigator attribute is optional but recommended; for the Navigator setting, see the next section.
import Lightbox from 'react-native-lightbox';
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>
);

Navigator setup/Android support

Setup of Navigator/Android compatibility
Because the Android platform does not yet have the Modal component and is not on the official to-do list, you must pass a reference to a Navigator. For a complete example, see Example project.
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,
}}
/>);

Demo
app

If you have skills in PHP programming and you want to enhance your career in this field, a PHP Certification from StudySection can help you reach your desired goals. Both beginner level and expert level PHP Certification Exams are offered by StudySection along with other programming certification exams.

Leave a Reply

Your email address will not be published.