smecta-rn-easy-chat-ui v0.1.5

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
  }
}

• friend12345678: `${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

• 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

Notes for Android

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

android:windowSoftInputMode="adjustResize"

License

• MIT