Skip to content

πŸŽ‰ πŸš€ A React Native library to show images grid in chat messages like your favorite platforms! πŸ–ΌοΈ ❀

License

Notifications You must be signed in to change notification settings

Ovi/react-native-chat-images

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

9 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

react-native-chat-images

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

NPM NPM

react-native-chat-images

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

Example Code

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
saveOnLongPress bool true true
OR
false

* 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

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

Samples

Example Code Example Code Example Code

License

MIT Β© Ovi | License

About

πŸŽ‰ πŸš€ A React Native library to show images grid in chat messages like your favorite platforms! πŸ–ΌοΈ ❀

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published