The Package can be found at react-native-grid-image-viewer.
A grid display for multiple images which you can view on clicking in fullscreen mode and swipe through.
 |
 |
 |
- Grid Image Viewer
- Full Screen Mode Image Viewer
- Max Lightweight Component
- No Dependency, No Configuration
- Click on image to view full screen
- Smooth Animation
- Swipe image to navigate to next image
- Available for iOS and Android
- Also works with Expo
npm i react-native-grid-image-viewer --save
yarn add react-native-grid-image-viewer
import React from 'react';
import {View, StyleSheet, Text} from 'react-native';
import GridImageView from 'react-native-grid-image-viewer';
export default class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View style={styles.background}>
<Text style={styles.headline_text}>Grid View Images</Text>
<Text style={styles.explore_text}>
Click on an image to view in full screen mode
</Text>
{/* Basic Usage */}
<GridImageView data={['url1', 'url2', 'url3', 'url4']} />
</View>
);
}
}
const styles = StyleSheet.create({
background: {
backgroundColor: 'black',
flex: 1,
},
headline_text: {
color: 'white',
fontSize: 30,
fontWeight: 'bold',
marginTop: 50,
marginLeft: 20,
},
explore_text: {
marginTop: 5,
marginBottom: 10,
color: 'white',
marginLeft: 20,
fontSize: 12,
fontWeight: '600',
},
});import React from 'react';
import {View, StyleSheet, Text} from 'react-native';
import GridImageView from 'react-native-grid-image-viewer';
const App = () => {
return (
<View style={styles.background}>
<Text style={styles.headline_text}>Grid View Images</Text>
<Text style={styles.explore_text}>
Click on an image to view in full screen mode
</Text>
{/* Basic Usage */}
<GridImageView data={['url1', 'url2', 'url3', 'url4']} />
</View>
);
};
const styles = StyleSheet.create({
background: {
backgroundColor: 'black',
flex: 1,
},
headline_text: {
color: 'white',
fontSize: 30,
fontWeight: 'bold',
marginTop: 50,
marginLeft: 20,
},
explore_text: {
marginTop: 5,
marginBottom: 10,
color: 'white',
marginLeft: 20,
fontSize: 12,
fontWeight: '600',
},
});
export default App;| Prop | Type | Description |
|---|---|---|
| data | array | List of images to be displayed in the grid should be in the form of array: [url1, url2, ...] |
| headers | json | (Optional) Pass headers, for instance to restrict access. Eg. {'Authorization': 'Bearer ' + 'TOKEN'} |
| renderGridImage | function(item, defaultStyle) => Node | (Optional) Custom function to render each image in grid view. Default style must be applied on the returned node and the image itself (if different). |
| renderModalImage | function(item, defaultStyle) => Node | (Optional) Custom function to render each image in modal view. Default style must be applied on the |
| transparent | int | (Optional) Transparency on the background when single image is viewed in full screen mode, Range=[0, 1] |
| heightOfGridImage | int | (Optional) Height of each item in grid image view |
This project is licensed under the MIT License - see LICENSE.md for details
Made by Anshul Singh
