react-native-preview-images v1.0.2

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 !

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

* 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

License

MIT © Ovi | License