To use below APIs, You should get AuroraIMUI ref
<AuroraIMUI ref={(imui) => {this.imui = imui}}/>Param: PropTypes.array: [{message}] Used to specify a list of initialization messages for MessageList. ex:
<AuroraIMUI
initialMessages={[
{msgId: '0',msgType: "event",text: "Text message 1"},
{msgId: '1',msgType: "text", text: "Text message 2"},
]}
/>Param: PropTypes.array: [{message}]
Append message array in MessageList bottom.
if(this.imui) { // this.imui is AuroraIMUI ref
this.imui.appendMessages([
{
text,
msgType: 'text',
msgId: 'id_3', // NOTO: the msgId must be unique.
}
])
}Param: PropTypes.object: {message}
Update specify message(match msgId) in MessageList.
if(this.imui) { // this.imui is AuroraIMUI ref
this.imui.updateMessage({
text,
msgType: 'text',
msgId: 'id_4', // NOTO: the msgId must be unique.
})
}Param: PropTypes.array: [{message}]
Insert messages to the top of the MessageList, usually use this method to load history messages.
if(this.imui) { // this.imui is AuroraIMUI ref
this.imui.insertMessagesToTop([
{
text,
msgType: 'text',
msgId: 'id_1', // NOTO: the msgId must be unique.
}
])
}Param: PropTypes.object: {message}
Remove message by message(match with msgId).
if(this.imui) { // this.imui is AuroraIMUI ref
this.imui.removeMessage({
text,
msgType: 'text',
msgId: 'id_1', // NOTO: the msgId must exit in MessageList.
})
}Clear all message in MessageList.
if(this.imui) { // this.imui is AuroraIMUI ref
this.imui.removeAllMessage()
}This function will clean InputView's TextInput.textvalue, and fire onSendText callback. This's useful when you want to custom renderRight to override default rightItem(send text item).
if(this.imui) { // this.imui is AuroraIMUI ref
this.imui.sendText()
}Trigger onSendText when default rightItem be clicked(or call imui.sendText manualy).
<AuroraIMUI
onSendText={ (textStr) => console.log(textStr) }
/>Trigger onInputTextChanged when InputView.TextInput.text did changed
<AuroraIMUI
onInputTextChanged={ (textStr) => console.log(textStr) }
/>Fires when pull MessageList to top, example usage: please refer sample's onPullToRefresh method.
<AuroraIMUI
onPullToRefresh={ () => { /* you can load history message here */}
/>NOTE: Invalid when return a customMessage.
PropTypes.function: ( userinfo ) => { }
Fires when click avatar.
NOTE: Invalid when return a customMessage.
PropTypes.function: (message) => { }
Fires when click message row.
NOTE: Invalid when return a customMessage.
PropTypes.function: (message) => { }
Fires when click message status view.
NOTE: Invalid when return a customMessage.
PropTypes.function: (message) => { }
Fires when click message content view.
NOTE: Invalid when return a customMessage.
PropTypes.function: (message) => { }
Fires when long press message content view.
NOTE: If you override message row, the message callback will be Invalid.
import {AuroraIMUI, Message} from "aurora-imui";
// If you want to add a custom message
// You can pass a function to renderRow which return a component
renderCustomRow(message) {
switch(message.msgType) {
case 'image':
// custom message
return <Message
{...{ ...message,
messageContent: (message) => {return <MessageImageContent {...message}/>}
}}
avatarContent={(userInfo) => (<Image source={require('./assert/ironman.png')} />)}
onMsgClick={this.onMsgClick} // you need pass callback
onAvatarClick={this.onAvatarClick} // you need pass callback
onStatusViewClick={this.onStatusViewClick} // you need pass callback
/>
default:
return null
}
}
<AuroraIMUI
renderRow={this.renderCustomRow}
/>Used to set status View position.
<AuroraIMUI
stateContainerStyles={{justifyContent: 'center'}}
/>Used to set avatar view position.
<AuroraIMUI
avatarContainerStyles={{justifyContent: 'flex-start'}}
/>This props is useful when you want to adjust TextInput props(like placeHolder or placeholder Color).
<AuroraIMUI
textInputProps={{
placeholder: 'Input Text message',
multiline: true,
style: {margin: 8, color: 'red'}
}}
/>PropTypes.function: () => Component
If you want to add item in InputView' left postion, you can use renderLeft to return a component.
<AuroraIMUI
renderLeft={ () => <View /> }
/>If you want to custom send buttom you can use render (maybe you need sendText function).
<AuroraIMUI
renderRight={ () => <View /> }
/>you can add a bottom bar in InputView with this api,(NOTE: component need have a explicit height)
<AuroraIMUI
renderBottom={ () => <View style={{height: 20}}/> }
/>Params: PropTypes.number default value is 120.
It‘s useful when you want to add a bottom bar in inputView(use renderBottom callback), Usually you need use it to adjust maxInputView's height.