React-native-grid-image-viewer NPM

A grid display for multiple images which you can view on clicking in fullscreen mode and swipe through.

Key Points

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

Installation

npm i react-native-grid-image-viewer --save

or

yarn add react-native-grid-image-viewer

Usage

Class component

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',
  },
});

Functional component

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;

Props

Prop	Type	Description
data	array	List of images to be displayed in the grid should be in the form of: 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 node.
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