JSPM

react-native-grid-image-viewer-with-caption

1.0.5
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 6
  • Score
    100M100P100Q47361F
  • License MIT

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

Package Exports

  • react-native-grid-image-viewer-with-caption

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-with-caption) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-grid-image-viewer-with-caption

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

Key Points

  • Grid Image Viewer With Caption
  • 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-with-caption --save

or

yarn add react-native-grid-image-viewer-with-caption

Usage

Class component

import React from 'react';
import { View, StyleSheet, Text } from 'react-native';
import GridImageViewerCaption from 'react-native-grid-image-viewer-with-caption';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      gallery:[
        { image: 'http://image.jpg', text:'Caption 1' },
        { image: 'http://image.jpg', text:'Caption 2' },
        { image: 'http://image.jpg', text:'Caption 3' }
      ]
    };
  }

  render() {
    return (
       <View style={styles.background}>
      <Text style={styles.headline_text}>Grid View Images With Caption</Text>
      <Text style={styles.explore_text}>Click on an image to view in full screen mode</Text>

      <GridImageViewerCaption data={this.state.gallery} captionColor="#fff" />
    </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'
  },
});

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 (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]
Caption Color string (Optional) (Default = white) Change the caption color by ading, captionColor="color"

License

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

Author

Made by The Coding Beats