react-native-message-bubble

Chat(message) bubble UI, both ios and android.

Demo

Installation

install react-native-message-bubble:

npm install react-native-message-bubble --save

Android

// file: android/settings.gradle
...
 
include ':react-native-message-bubble'
project(':react-native-message-bubble').projectDir = new File(settingsDir, '../node_modules/react-native-message-bubble/android')

// file: android/app/build.gradle
...
 
dependencies {
...
compile project(':react-native-message-bubble')
}

// file: MainActivity.java 
...
 
import com.bubblemessage.BubbleMessagePackage;
 
public class MainActivity extends ReactActivity {
 
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new BubbleMessagePackage()
);
}
...
}
 

Usage

var BubbleText = require('react-native-message-bubble');
 
render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this._renderRow}
/>
)
},
 
_renderRow(rowData, sectionID, rowID) {
var messageType = rowData.userType != 'robot';
//messageType: if true bubble is on the right, else on left
return (
<BubbleText key={rowID} messages={rowData.messages} messageType={messageType}/>
)
},

Features

• Android
• Image and audio
• CopyText