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 |

License

This project is licensed under the MIT License - see LICENSE.md for details

Author

Made by Anshul Singh