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

1npm i -S react-native-preview-images

OR

1yarn 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)

1import React, { Component } from 'react';
2import { View } from 'react-native';
3import PreviewGrid from 'react-native-preview-images';
4
5export default class App extends Component {
6  state = {
7    images: ['img_01', 'img_02', 'img_03', '...'],
8  };
9
10  render() {
11    return (
12      <View style={{ flex: 1 }}>
13        <PreviewGrid images={this.state.imgs} />
14      </View>
15    );
16  }
17}

Prop > images (array of objects)

1import React, { Component } from 'react';
2import { View } from 'react-native';
3import PreviewGrid from 'react-native-preview-images';
4
5export default class App extends Component {
6  state = {
7    images: [
8      { url: 'img_01' },
9      { url: 'img_02' },
10      { url: 'img_03' },
11      { url: '...' },
12    ],
13  };
14
15  render() {
16    return (
17      <View style={{ flex: 1 }}>
18        <PreviewGrid images={this.state.images} />
19      </View>
20    );
21  }
22}

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