Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-native-preview-images

franklinkemta45MIT1.0.2TypeScript support: included

A React Native library to show images grid with previews like your favorite platforms!

preview-images, preview-grid-images, preview-combine-images, grid-images, react-native-chat-images, react-native-images, responsive-grid-images

readme

THIS IS A FORK FROM react-native-chat-images official Package

Roadmap

  • Remove unecessery dependencies, and update react-native dependencies
  • Enhance the Item preview screen header, buttons and appearance
  • Add Custom ImageList onPress event to display a custom component or make a custom action on ImageList Item press
  • Remove the dependency to react-native-image-viewer package
  • Update Readme and Documentation.
  • Publish a realease !

react-native-preview-images

A React Native library to show images in a preview grid with custom actions !

React Native Preview Images

ChangeLog

You can find the complete changelog on this file.

Install

npm i -S react-native-preview-images

OR

yarn add react-native-preview-images

Props

Props Type Default Example
images * array of strings
OR
array of objects
required Samples
extra string undefined '03:30 AM'
title string undefined 'Title of Images'
style object {}
backgroundColor string 'lightgreen' 'red'
OR
'#ff0000'
width string
OR
number
'100%' '50%'
OR
360
onImageListItemTap callback undefined (index: number) => void

* if you pass array of objects you may also provide some extra information: see > Image Props

Examples

Prop > images (array of strings)

import React, { Component } from 'react';
import { View } from 'react-native';
import PreviewGrid from 'react-native-preview-images';

export default class App extends Component {
  state = {
    images: ['img_01', 'img_02', 'img_03', '...'],
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        <PreviewGrid images={this.state.imgs} />
      </View>
    );
  }
}

Prop > images (array of objects)

import React, { Component } from 'react';
import { View } from 'react-native';
import PreviewGrid from 'react-native-preview-images';

export default class App extends Component {
  state = {
    images: [
      { url: 'img_01' },
      { url: 'img_02' },
      { url: 'img_03' },
      { url: '...' },
    ],
  };

  render() {
    return (
      <View style={{ flex: 1 }}>
        <PreviewGrid images={this.state.images} />
      </View>
    );
  }
}

Props > images > array of objects

Props Type Required
url string (url) yes
thumbnail string (url) no
caption string no
captionStyle object no
overlay ReactNativeElement no

License

MIT © Ovi | License

changelog

Changelog

All notable changes to this project will be documented in this file.

[1.0.1] - 2019-09-25 (Current)

Added

  • Changelog file.
  • Updated package.json renamed types from PreviewGrid.d.ts to types.d.ts
  • Renamed GridImage type from ArrayOfImagesObject to GridImage type to types
  • Added support for multiples images sources, and description, see types.d.ts CustomImage
  • Fixed imageGrid item display blank when the source property not set or change from url to uri
  • Fixed ImageList display error when the title is undefined

Removed

  • Remove unecessery dependencies, and update react-native dependencies
  • Enhance the Item preview screen header, buttons and appearance
  • Add Custom ImageList onPress event to display a custom component or make a custom action on ImageList Item press
  • Remove the dependency to react-native-image-viewer package
  • Removed type ArrayOfImageObject from types

    Fixed

  • Fix typos in README and usage.png file

  • Improved code readability
  • Decreased sample images' size
  • Fix close ImageList modal from the parent of the preview grid

[1.0.0] - 2020-23-01

[1.0.1] - 2020-23-01

[1.0.2] - 2020-24-01

Release day!