React Native Awesome Chat

An easy to integrate library to create flexible, customizable chat UIs for React Native

Features

• Auto-scroll animation as more messages are sent
• Image uploading
• Image backgrounds
• Tap to resend a message
• Swipe message to see timestamp
• React Native 0.60+ support

Installation

npm install --save react-native-awesome-chat OR

yarn add react-native-awesome-chat

Dependencies

This project uses 2 native libraries : react-native-image-picker and react-native-vector-icons

If these libraries aren't already linked in your project, you need to link them. React Native 0.60+ has the handy auto-linking feature which makes this easier.

iOS

Just make sure your Info.plist has FontAwesome as one of its UIAppFonts :

<key>UIAppFonts</key>
    <array>
        <string>FontAwesome.ttf</string>
    </array>
</dict>
</plist>

Then, in your project's root directory, run :

cd ios && pod install

Android

Just add this line to android/app/build.gradle :

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

And these permissions to AndroidManifest.xml :

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

That's it - this will make sure the libraries are properly linked.

If you're using React Native < 0.60, then you will need to refer to the docs for react-native-image-picker and react-native-vector-icons to understand how to link the libraries, but it's still a pretty simple process.

Usage

import AwesomeChat from 'react-native-awesome-chat';

class App extends Component {
    constructor(props){
        super(props);
        this.state = {
            messages : [
                {body : "Hello", id : 1,
                timestamp : 1581418856, type : "sent", image_uri : ""},
                {body : "Hi", id : 2, 
                timestamp : 1581418856, type : "received", image_uri : ""}
            ],
        }
    }
    
    //AwesomeChat will pass the message object to this function
    sendMessage = async (message) => {
        let response = await axios.post(/*POST request to your DB*/)
        if(response.ok){
            return true;  
        } else {
            return false; //AwesomeChat will flag the message as unsent
        }
    }

    render(){
        return (
        <>
            <StatusBar barStyle="dark-content" />
            <SafeAreaView>
            <View style={{height : '100%'}}>
                <AwesomeChat 
                    onSendMessage={this.sendMessage} 
                    messages={this.state.messages}
                    //If new messages come in, just update this.state.messages
                />
            </View>
            </SafeAreaView>
        </>
        );
    }
};

Message Object

{
    body : "", /* Contents of message */
    id : "", /* Unique ID for the message - AwesomeChat will generate one for you for new messages */
    timestamp : 0, /* UNIX timestamp -  Can be retrieved from .getTime() on a Javascript Date Object */
    type : "", /* "sent" or "received" */
    image_uri : "" /* image uri if message is an image. Otherwise, can be left as an empty string. 
    AwesomeChat will populate this with the uri
    returned by ImagePicker for newly sent messages
    */
}

Props

Prop	Type	Description
messages	Array	messages to render
onSendMessage	function	Callback function for when a message is sent. Should return true if the message was successfully sent and false otherwise for "Tap to Resend" to work (See example above)
sentMessageStyle	Object	(optional) Style for sent messages
receivedMessageStyle	Object	(optional) Style for received messages
unsentMessageStyle	Object	(optional) Style for unsent messages
sentTextStyle	Object	(optional) Style for text of sent messages
receivedTextStyle	Object	(optional) Style for text of received messages
unsentTextStyle	Object	(optional) Style for text of unsent messages
backgroundColor	string	(optional) Background color
backgroundImage	Object	(optional) Background image - the same object passed to the source prop of Image
timestampColor	string	(optional) Timestamp color
errorColor	string	(optional) Color of 'Tap to resend'
placeholderTextColor	string	(optional) Color of input bar placeholder text
leftIcon	Icon	(optional) Left icon of input bar
rightIcon	Icon	(optional) Right icon of input bar
inputContainerStyle	Object	(optional) Style of input bar container
inputStyle	Object	(optional) Style of input in input bar

Some other notes

• This library is a great choice if you're looking to quickly add some type of aesthetic chat UI to your project as an add-on feature, because it's very easy to integrate. But if you're looking to build an entire messaging app, you might find react-native-gifted-chat a better choice.
• The message object this library uses doesn't include a field for the messager's identity - you will need to add any other additional context to this object (which shouldn't be difficult). I decided to stick with these simple fields because they're really all that's required for the UI.
• AwesomeChat doesn't generate a timestamp for a message because it's assumed that the timestamp is only official once the server records the message. AwesomeChat will render timestamps for messages that have the timestamp field filled. For newly sent messages, the timestamp will become visible once the message finishes a round-trip to and then from the server.

License

• MIT

Author

You can email me at [email protected] if you have any questions!