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 |