react-native-chat-images

A React Native library to show images grid in chat messages like your favorite platforms! (WhatsApp, Messenger)

React Native Chat Images

demo (expo)

ChangeLog

You can find the complete changelog on this file.

Install

npm i -S react-native-chat-images

OR

yarn add react-native-chat-images

Usage

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 Images from 'react-native-chat-images';

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

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

Prop > images (array of objects)

import React, { Component } from 'react';
import { View } from 'react-native';
import Images from 'react-native-chat-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 }}>
        <Images images={this.state.images} />
      </View>
    );
  }
}

Props > images > array of objects

Samples

License

MIT © Ovi | License