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 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
- 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.
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.
- 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
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.jswith your Publish and Subscribe key credentials from the first step above
npm installto install all JS dependencies
react-native run-androidto 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.