This article is about how we can show our images in full view with the zoom in and zoom out feature just like your mobile gallery. React-native-image-gallery is a more elegant package than the other gallery package in the react-native because it provides all the sufficient features of the gallery and supports both the iOS and android platforms and is easy to use. Following is the basic documentation for how to use this package in react-native:
React Native Gallery Installation
npm install --save react-native-image-gallery
Example
import Gallery from 'react-native-image-gallery';
render() {
return (
<Gallery
style={{ flex: 1, backgroundColor: 'black' }}
images={[
{ source: require('yourApp/image.png'), dimensions: { width: 150, height: 150 } },
{ source: { uri: 'http://i.imgur.com/XP2BE7q.jpg' } },
{ source: { uri: 'http://i.imgur.com/5nltiUd.jpg' } },
{ source: { uri: 'http://i.imgur.com/6vOahbP.jpg' } },
{ source: { uri: 'http://i.imgur.com/kj5VXtG.jpg' } }
]}
/>
);
}
Result: You will be able to see the following screen with your images
Note: This package is not used for videos. So to show the videos you can use the thumbnail of the video and display a video in the video player by clicking on that thumbnail. For click events, you can use the onSingleTapConfirmed event. You can check more props of this package from this link.
Get certification for your knowledge in the fundamentals of Computer functioning by clearing the Computer Certification Exam conducted by StudySection. After going through this Computer Certification Exam, you will be able to evaluate your basic knowledge of computers.
