react-native-easy-chat-ui

中文文档

ScreenShots

Installation

• npm: npm install react-native-easy-chat-ui --save
• Yarn: yarn add react-native-easy-chat-ui

Example

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  StatusBar,
  PermissionsAndroid
} from 'react-native';
import { Header, NavigationActions } from 'react-navigation'
import {AudioRecorder, AudioUtils} from 'react-native-audio'
import RNFS from 'react-native-fs'
import Sound from 'react-native-sound'
import { ChatScreen } from 'react-native-easy-chat-ui'


class Example extends React.Component {
  state = {
    msg: {
      friend_12345678: {
        messages: [
          {
            id: `${new Date().getTime()}`,
            per: {
              type: 'text',
              content: 'hello world'
            } ,
            targetId: '12345678',
            chatInfo: {
              avatar: require('./app/source/image/avatar.png'),
              id: '12345678'
            },
            renderTime: true,
            sendStatus: 0,
            time: new Date().getTime()
          },
        ],
        inverted: false  // require
      }
    },
    voiceHandle: true,
    currentTime: 0,
    recording: false,
    paused: false,
    stoppedRecording: false,
    finished: false,
    audioPath: ''
  }


  sendMessage = (type, content, isInverted) => {
      console.log(type, content, isInverted, 'msg')
    }
  
  render() {
    return (
      <ChatScreen
        ref={(e) => this.chat = e}
        messageList={this.state.msg}
        isIphoneX={true}
        androidHeaderHeight={androidHeaderHeight}
        sendMessage={this.sendMessage}
      />
    )
  }
}

Advanced example (How to record voice)

See example/index.js for more!

About Message object

{
  friend_12345678: {
    messages: [
      {
        id: `${new Date().getTime()}`,
        per: {
          type: 'text',
          content: 'hello world'
        } ,
        targetId: '12345678',
        chatInfo: {
          avatar: require('./app/source/image/avatar.png'),
          id: '12345678'
        },
        renderTime: true,
        sendStatus: 0,
        time: new Date().getTime()
      }
    ],
    
    inverted: false  // require
  }
}

• friend_12345678: ${chatType}_${chatId}
• id: message id
• per: per message obj
• targetId: The id of the person who sent the message
• chatInfo: The profile of the person you're chatting with
• renderTime: Whether to render time above message
• sendStatus: 0 ---> sending, 1 ---> sendSuccess, -1 ---> You are deleted or on the blacklist, -2 ---> error
• time: moment，messageList sorted by time
• inverted: When messageList exceeds the screen height, set it to true otherwise false (You can change this value when componentWillUnmount or delete message)

Props

• message

props	default	Info
messageList	{}	Messages to display
onScroll	() => {}	ListView Props
onEndReachedThreshold	0.1	ListView Props
chatWindowStyle	undefined	Container style
sendMessage	(type, content, isInverted) => {}	Callback when sending a message
reSendMessage	(type, content) => {}	Callback when you want send again
delMessage	(indexs, isInverted) => {}	Callback when delete message
avatarStyle	undefined	Style of avatar
chatId	'123455678'	The id of the person you're chatting with
chatType	'friend'	Your relationship with the person you're chatting with
onMessagePress	(type, index, content) => {}	Callback when press a message
onMessageLongPress	(type, index, content) => {}	Callback when longPress a message and usePopView is false
pressAvatar	(isSelf) => {}	Callback when press avatar
isIphoneX	true	Is iphoneX、iphoneXR、iphoneXS or iphoneXS Max?
androidHeaderHeight	66	Android navigation bar height + statusBar height
userProfile	{id: '88888888', avatar: 'default.png'}	Your own profile
historyLoading	false	Display an ActivityIndicator when loading earlier messages
loadHistory	() => {}	Callback when loading earlier messages
renderMessageTime	(time) => {}	Custom time inside above message
renderErrorMessage	(messageStatus) => {}	Custom a message when the friend relationship is abnormal
panelSource	[{icon: <Image source={require('../source/image/photo.png')} style={{width: 30, height: 30}}/>,title: '照片',onPress: () => { console.log('takePhoto') }}, {icon: <Image source={require('../source/image/camera.png')} style={{width: 30, height: 30}}/>,title: '拍照',onPress: () => { console.log('takePhoto') }}]	Custom panel source
renderPanelRow	<TouchableOpacity key={index} style={{width: (width - 30) / 4, height: (width - 30) / 4, justifyContent: 'center', alignItems: 'center', marginBottom: 20}} activeOpacity={0.7} onPress={() => data.onPress()} > <View style={{backgroundColor: '#fff', borderRadius: 8, padding: 15, borderColor: '#ccc', borderWidth: StyleSheet.hairlineWidth}}>{data.icon}<Text style={{color: '#7a7a7a', marginTop: 10}}>{data.title}	Custom a tab icon
allPanelHeight	200	emojiPanel and plusPanel height
messageErrorIcon	icon element	Custom a icon when message failed to be sent
leftMessageBackground	'#fffff'	Custom background color on left
rightMessageBackground	'#a0e75a'	Custom background color on right

• inputBarProps

props	default	Info
emojiIcon	icon element	Custom emoticons
placeholder	'请输入...'	Placeholder when text is empty
keyboardIcon	icon	Custom keyboard icon
plusIcon	icon element	Custom plus icon
sendIcon	icon element	Custom send icon

• popViewProps

props	default	Info
usePopView	true	Display a popView when longPress a message
popoverStyle	{backgroundColor: '#333'}	popView style
renderDelPanel	undefined	Custom any what you want, (isSelect)=> {}
changeHeaderLeft	() => {}	Custom headerLeft
setPopItems	(type, index, text) => {let items = [{title: '删除',onPress: () => {that.props.delMessage([index])}},{title: '多选',onPress: () => {that.multipleSelect(index)}}]if (type === 'text') {items = [{title: '复制',onPress: () => Clipboard.setString(text)},{title: '删除',onPress: () => {that.props.delMessage([index])}},{title: '多选', onPress: () => {that.multipleSelect(index)}}]}return items}	Custom PopView
messageDelIcon	icon element	Custom delete icon
messageSelectIcon	icon element	Custom selected icon
renderMessageCheck	undefined	Custom selected icon, (isSelect)=> {}

• voiceProps

props	default	Info
useVoice	true	send voice message
pressInText	'按住 说话'	Custom pressIn text
pressOutText	'松开 发送'	Custom pressOut text
voiceIcon	icon element	Custom voice icon
voiceLeftIcon	undefined	Custom icon of the message on the left
voiceRightIcon	undefined	Custom icon of the message on the right
voiceErrorIcon	icon element	Custom icon when record error
voiceErrorText	'说话时间太短'	Custom text when record error
voiceCancelIcon	icon element	Custom icon when cancel record
voiceCancelText	'松开手指取消发送'	Custom text when cancel record
voiceNoteText	'手指上划，取消发送'	Custom text when pressIn record button
voiceSpeakIcon	icon element	Custom icon when pressIn record button
audioPath	''	File path to store voice
audioOnProgress	() => {}	Callback when recording
audioOnFinish	() => {}	Callback when finish record
audioInitPath	() => {}	Callback when init file path
audioRecord	() => {}	Callback when start record
audioStopRecord	() => {}	Callback when stop record
audioPauseRecord	() => {}	Callback when pause record
audioResumeRecord	() => {}	Callback when resume record
audioCurrentTime	0	audio length
audioHandle	true	Whether to get a recording handle
setAudioHandle	() => {}	Callback when get handle or not
audioHasPermission	false	Whether has permission
checkAndroidPermission	() => {}	Callback when check permission on android
voiceLoading	false	Loading voice or not
voicePlaying	false	Playing voice or not
voiceLeftLoadingColor	'#cccccc'	Custom background color on left when load voice
voiceRightLoadingColor	'#628b42'	Custom background color on right when load voice

• bubbleProps

props	default	Info
renderTextMessage	undefined	Custom message text, (data) => {}
renderImageMessage	undefined	Custom message image, (data) => {}
renderVoiceMessage	undefined	Custom message voice, (data) => {}
renderVoiceView	undefined	Custom voice container, (data) => {}
renderVideoMessage	undefined	Custom message video, (data) => {}
renderLocationMessage	undefined	Custom message location, (data) => {}
renderShareMessage	undefined	Custom message share, (data) => {}

Notes for Android

• Make sure you have android:windowSoftInputMode="adjustResize" in your AndroidManifest.xml:

android:windowSoftInputMode="adjustResize"

License

• MIT