1.0.2 • Published 5 years ago

react-native-grid-image-viewer v1.0.2

Weekly downloads
60
License
MIT
Repository
github
Last release
5 years ago

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

PropTypeDescription
dataarrayList of images to be displayed in the grid should be in the form of: url1, url2, ...
headersjson(Optional) Pass headers, for instance to restrict access. Eg. {'Authorization': 'Bearer ' + 'TOKEN'}
renderGridImagefunction(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).
renderModalImagefunction(item, defaultStyle) => Node(Optional) Custom function to render each image in modal view. Default style must be applied on the node.
transparentint(Optional) Transparency on the background when single image is viewed in full screen mode, Range=0, 1
heightOfGridImageint(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