JSPM – react-native-grid-image-viewer@1.0.8

Package Exports

react-native-grid-image-viewer

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-grid-image-viewer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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>

      <GridImageView data={[{ image: 'url' }, { image: 'url' }, { image: 'url' }, { image: 'url' }]} />
    </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>

      <GridImageView data={[{ image: 'url' }, { image: 'url' }, { image: 'url' }, { image: 'url' }]} />
    </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: [{image: url1}, {image: url2}, ...]
headers	json	Pass headers, for instance to restrict access. Eg. {'Authorization': 'Bearer ' + 'TOKEN'}

License

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

Author

Made by Anshul Singh