react-native-ios-chat-app

How to Build an iOS Chat App with React Native: Gravatar (Part Five)

In our previous part, we added typing indicators to show when users are currently typing a message. Let’s add some more plugins! In this part, we’ll add Gravatar functionality.

What is Gravatar?

Gravatar is a widely popular service for integrating user avatar (profile images) into applications, used by WordPress, GitHub, Stack Overflow and more. With the ChatEngine Gravatar plugin, it’s easy to add personality to the chat application user interface.

Under the hood, the Gravatar plugin translates user IDs to REST API URLs for loading user image data. In our application, we’ll dive even deeper into customizing the image attributes (“default image”, image size, and more).

Using the ChatEngine Gravatar Plugin – Basic Example

The complete documentation for the Gravatar plugin is available here. The basic steps for a simple app are as follows.

NPM install the plugin:

npm install chat-engine-gravatar

Require the library in your code:

require('chat-engine-gravatar')

Add the plugin to your ChatEngine code.

chat = new ChatEngine.Chat("mychannel");
user = new ChatEngine.User('ian', {email: 'ian@pubnub.com'});
user.plugin(gravatar());
console.log(user.state.gravatar);

And that’s it! The user’s avatar is now available through the gravatar user attribute.

Diving Deeper – Custom UUIDs and Extended Profile Data

In our sample application, we’ll use a slightly different mechanism for integrating user avatars from Gravatar in 2 places – the Message List and User List. There are a couple of reasons for this. The first reason is that we want to be able to distinguish between these attributes:

  • User Email – which we use as the login username
  • User Display Name – which we use as accessory data
  • PubNub UUID – used for PubNub identification
  • Gravatar ID – computed by the Gravatar library as a hash of the email address

The second reason is that we’ll want to do some additional customization of the avatar attributes, we’re personally big fans of the ‘retro’ theme.

Creating a Gravatar Attribute at Connection Time

Our first use case is displaying the Gravatar attribute for the list of users in the specified chat room. To do that, each user needs to provide avatar_url as a state attribute at connection time. We use the following code to integrate with Gravatar at connection time – please see lib/ce-core-chatengineprovider.js in the source code repository to see what we’re doing here.

This is what we’re trying to do:

First, we import the Gravatar library.

import gravatar from "gravatar";

Then, we set up the user attributes: username, display name, and UUID.

ChatEngineProvider._username = username;
ChatEngineProvider._name = name || username;
ChatEngineProvider._uuid = sha1(username);

Then, we provide the Gravatar URL as the avatar_url attribute of the user’s state, computed from the user’s email address (which we call _username here). This ChatEngine user state attribute is accessible to any client code that works with that User object.

ChatEngineProvider._chatEngine.connect(
    ChatEngineProvider._uuid,
    {
        name: ChatEngineProvider._name,
        email: ChatEngineProvider._username,
        avatar_url: gravatar.url(ChatEngineProvider._username, {s: '100', r: 'x', d: 'retro'}, true),
        signedOnTime: new Date().getTime()
    },
    "auth-key"
);

As you can see above, we customize for a 100-pixel square image, without content censorship, using the ‘retro’ default image style.

Using the Gravatar attribute for Message Display

Our second use case is displaying the Gravatar attribute alongside the list of messages in the specified chat room. To do that, each message needs to provide an Image URL as a data attribute. We use the following code to integrate with Gravatar in the message list – please see lib/ce-view-message.js in the source code repository to see what we’re doing here.

This is what we’re trying to do:

First, we import the Gravatar library.

import gravatar from "gravatar";

Then, in the render() function, we compute the Gravatar URL for an Avatar image. This requires that every message data structure contains a from.email attribute. We could have used the User state attribute for this from the section above, but that data is only available for online users. Placing the data in the message data structure ensures that avatars can be displayed for online and offline users (at the expense of a tiny bit of additional data payload).

render() {

    ...

    return (
        <View style={styles.messageContainer}>
            <View style={styles.avatar}>
                <Avatar
                    small
                    rounded
                    source={{
                        uri: gravatar.url(this.props.message.data.from.email, {s: '100', r: 'x', d: 'retro'}, true)
                    }}
                    activeOpacity={0.7}
                />
            </View>

            ...

        </View>
    );
}

As you can see above, we customize for a 100-pixel square image, without content censorship, using the ‘retro’ default image style.

And that’s it! We’ve successfully integrated profile images into our fancy new Chat Application.

Use Cases:

Try PubNub Today

Share this on facebookShare this on TwitterShare this on Linkedin