API

January 9, 2019 · View on GitHub

Usage

import {
  NativeModules,
} from 'react-native';

import IMUI from 'aurora-imui-react-native';
var MessageList = IMUI.MessageList;
var ChatInput = IMUI.ChatInput;
const AuroraIMUIController = IMUI.AuroraIMUIController; // the IMUI controller, use it to operate  messageList and ChatInput.

// add MessageList and ChatInput in render() 
<MessageList />
<ChatInput />

Refer to iOS,Android example

Example usage

AuroraIMUIController
MessageList
- Props Event
- Props customizable style
ChatInput
- Props customizable style
- Props Event

AuroraIMUIController

For append/update/insert message to MessageList, you will use AuroraIMUIController(Native Module) to send event to native.

appendMessages

param: [{message}]

Append message to bottom of the MessageList, the display order will be the same as the array of message's.

example:

var messages = [{
	msgId: "1",
	status: "send_going",
	msgType: "text",
	text: "Hello world",
	isOutgoing: true,
	fromUser: {
		userId: "1",
		displayName: "Ken",
		avatarPath: "ironman"
	},
	timeString: "10:00"
}];
AuroraIMUIController.appendMessages(messages);

updateMessage

param: {message}

Update message, since the message status was changed, you should use this method to update your message.

example:

var message = {
	msgId: "1",
	status: "send_going",
	msgType: "text",
	text: text,
	isOutgoing: true,
	fromUser: {
		userId: "1",
		displayName: "Ken",
		avatarPath: "ironman"
	},
	timeString: "10:00",
};
AuroraIMUIController.updateMessage(message);

insertMessagesToTop

param: [{message}]

Insert messages to the top of the MessageList, usually use this method to load history messages. The messages to be inserted must be sorted chronologically.

example:

var messages = [{
    msgId: "1",
    status: "send_succeed",
    msgType: "text",
    text: "This",
    isOutgoing: true,
    fromUser: {
	  userId: "1",
	  displayName: "Ken",
	  avatarPath: "ironman"
    },
    timeString: "10:00",
  },{
    msgId: "2",
	status: "send_succeed",
	msgType: "text",
	text: "is",
	isOutgoing: true,
	fromUser: {
		userId: "1",
		displayName: "Ken",
		avatarPath: "ironman"
    },
    timeString: "10:10",
},{
    msgId: "3",
	status: "send_succeed",
	msgType: "text",
	text: "example",
	isOutgoing: true,
	fromUser: {
		userId: "1",
		displayName: "Ken",
		avatarPath: "ironman"
    },
    timeString: "10:20",
}];
AuroraIMUIController.insertMessagesToTop(messages);

stopPlayVoice

Stop playing voice, including media players in ChatInput and MessageList.

example:

AuroraIMUIController.stopPlayVoice()

removeMessage

param: string

Remove message by message id.

example:

AuroraIMUIController.removeMessage("1")

removeAllMessage

Remove all messages.

example:

AuroraIMUIController.removeAllMessage()

hidenFeatureView

hiden inputView's featureView.

example:

AuroraIMUIController.hidenFeatureView()

MessageListDidLoadListener

addMessageListDidLoadListener(cb)

The initialization of AuroraIMUIController will finish before MessageListView 's，If you need do something to MessageListView (such as append, insert, update and remove) you need to wait untill MessageListDidLoad has been called.

example:
```
AuroraIMUIController.addMessageListDidLoadListener(()=> {
  // do something ex: insert message to top
})
```
removeMessageListDidLoadListener(cb)

Remove listener of MessageListDidLoad

example:
```
AuroraIMUIController.removeMessageListDidLoadListener(cb)
```

MessageList

MessageList Event Callback

onAvatarClick

PropTypes.function: ( message ) => { }

Fires when click avatar.

message param: { "message": message }

onMsgClick

PropTypes.function: (message) => { }

Fires when click message bubble。

message param: { "message": message }

onStatusViewClick

PropTypes.function: (message) => { }

Fires when click status view.

message param: { "message": message }

onPullToRefresh

PropTypes.function: () => { }

Fires when pull MessageList to top, example usage: please refer sample's onPullToRefresh method.

In Android, you should put onPullToRefresh in AndroidPtrLayout, please refer sample/app/app.js for more detail.

Example: datePadding={left: 5, top: 10, right: 5, bottom: 10}

dateBackgroundColor

PropTypes.string

Set the background color of date.

Example: dateBackgroundColor={"#cecece"}

dateCornerRadius

PropTypes.number

Set the background corner radius of date.

Example: dateCornerRadius={5}

avatarSize

PropTypes.object: { width: number, height: number }

This property including width and height.

Example: avatarSize = {width: 50, height: 50}。

avatarCornerRadius

PropTypes.number:

Set fillet radius of avatar.

Example: avatarCornerRadius = {6}。

isShowDisplayName

PropTypes.bool:

Show display name or not.

Example: isShowDisplayName={ture}。

isShowIncomingDisplayName

PropTypes.bool:

Set Show receiver's display name or not.

Example: isShowIncomingDisplayName={true}

isShowOutgoingDisplayName

PropTypes.bool:

Set show sender's display name or not.

Example: isShowOutgoingDisplayName={false}

displayNameTextSize

PropTypes.number

Set the text size of display name.

Example: displayNameTextSize={14}

displayNameTextColor

PropTypes.string

Set the color of display name.

Example: displayNameTextColor={"#cecece"}

displayNamePadding

PropTypes.object = {left: number, top: number, right: number, bottom: number}

Set padding of display name.

Example: displayNamePadding={left: 5, top: 0, right: 0, bottom: 5}

messageListBackgroundColor

PropTypes.string:

Set messageList' background color.

Example: messageListBackgroundColor={"#f3f3f3"}

maxBubbleWidth

PropTypes.number

Set the max width of message bubble, the value is the percentage of mobile's width.

Example: maxBubbleWidth={0.7} means set the max bubble width to 70% of mobile width.

messageTextLineHeight

PropTypes.number

Set text message's line spacing.

Example: messageTextLineHeight={5}

isAllowPullToRefresh

PropTypes.bool:

Show pull-to-refresh or not.

Example: isAllowPullToRefresh={ture}。

Eample:

// You can put item into ChatInput's left/right/bottom part，(Can’t be repeated！)
customLayoutItems={{
            left: ['voice'],
            right: ['send'],
            bottom: ['gallery','emoji','camera']
		}} 
		

// if you don't put element in left/right/bottom ChatInput will hidden the part.
customLayoutItems={{
            left: ['voice'],
            right: ['send']
		}}