react-native-android-chat-tutorial

How to Build an Android Chat App with React Native: Overview (Part One)

Welcome to our 4-part series on building an Android chat app with React Native and PubNub ChatEngine. If you’re here, you’re looking to add chat to a new or existing mobile app by means of React Native.

ChatEngine Overview

ChatEngine is a framework for a wide variety of chat functionalities that empowers you to build best-of-breed chat experiences with minimal coding and no worries about backend. This means you get all of these features out of the box:

  • Chat Rooms and History
  • Presence and User State
  • Direct Messages
  • Custom serverless code with PubNub Functions in JavaScript
  • Plugins such as Gravatar, Uploads, HTML Formatting, and more!

For more complex applications, ChatEngine’s programmable architecture allows you to integrate flexibly across platforms and develop chat event handlers via numerous extension points.

Why ChatEngine?

When building chat-enabled applications, you have a variety of concerns to think about. The server side of chat operations is dramatically non-trivial. Getting a sample chat service backend running on a single server might be no big deal. But as the application grows, networking, security, availability and extensibility become paramount concerns. On the client side, there is a lot to build for the initial user experience, from authentication logic to textbox styling. If the chat functionality needs to work cross-platform (yup, it usually does), that increases the amount of effort even more.

This is where ChatEngine comes in. ChatEngine is the premier toolkit for creating chat-enabled applications built on PubNub, the most performant and reliable global data streaming network. It provides a powerful event-driven model for building chat functionality, allowing developers to focus on application-specific needs. The toolkit is written in JavaScript, allowing it to integrate quickly with browser-based HTML5 applications, NodeJS services, and mobile applications via React Native components.

  • Easy to use: has a wide range of sample applications
  • Cross-platform: uses the same logic whether running on iOS, Android, or an HTML5 web app
  • Scalable and Secure: built on PubNub’s always-on global data streaming network
  • Extensible: architecture based on distilled experience from hundreds of real-world chat applications
  • Feature-rich: a growing library of client-side plugins and serverless logic using PubNub Functions and BLOCKS

How ChatEngine Works

ChatEngine is an object-oriented event-emitter chat framework written in JavaScript. This means that your application includes the ChatEngine JavaScript library and plugins and gains access to the chat functionality it needs. ChatEngine provides objects to represent chat rooms, users, and the chat engine itself. The developer provides PubNub access keys to configure the data layer and minimal binding functions to handle UI updates, and the ChatEngine library takes it from there. Under the hood, ChatEngine is processing events in realtime from the data layer and dispatching them as chat-related events to your application.

As a tribute to ChatEngine’s architecture, all functionality is built in a completely cross-platform way. Network communication is abstracted away from the implementation, whether it’s browser-based XMLHttpRequest, NodeJS request, or React Native HTTP client. Communication with the application happens via well-defined binding functions that are completely independent of template language or UI technology used.

Run the Demo App

To run the demo app, do these 4-steps:

  • Clone the repository: git clone https://github.com/sunnygleason/chatengine-react-native-sample.git
  • Update the settings in lib/ex-config-pnsettings.js with your Publish and Subscribe key credentials from the first step above
  • Run npm install to install all JS dependencies
  • Run react-native run-android  to run the application (ensure that the Android device or AVD is on & ready for debugging)

If everything is working properly, you should see something like this:

With that, you’ve just created an Android chat application with ChatEngine and React Native!

To use the app, fill in the email and display name fields (no password is required). Then start chatting!

Next Steps: Setting Up Your Dev Environment

With our overview done, let’s move to Part Two, where we’ll prepare our development environment and go over our app structure.

Use Cases:

Try PubNub Today

Connect up to 100 devices for Free