---
title: "Simple Chat App With React Native - Part I"
description: "Learn how to create the backend for a messaging app in React Native with our blog post. We cover the topic in a two-part series."
url: https://www.callstack.com/blog/simple-chat-app-with-react-native-part-1-backend
updated: 2026-10-24T08:39:37.085Z
---

# Simple Chat App With React Native - Part I

Learn how to create the backend for a messaging app in React Native with our blog post. We cover the topic in a two-part series.

_By Łukasz Walczak, Software Engineer @ Callstack · Published 2017-10-23 · Category: Backend_

At the beginning of my journey with React Native, building a chat app was a challenge for me. I thought that application development would be complicated and time-consuming. I couldn’t be more wrong! I’ve started acquiring knowledge that I needed to make simple chat app, then created a repository and it just happened!

I want to share with you what I have learned over the course of past months in series that consists of the following topics:

- Creation of backend for messaging app
- [Fullstack — connecting backend with frontend](https://callstack.com/blog/simple-chat-app-with-react-native-part-2-frontend/)

## What tools do you need?

First of all, we need a server. I have decided to use Hapi.js. Now, if you haven’t heard of it before, it’s a declarative configuration-centric framework. What does it mean? Unlike Express.js, which relies heavily on the concept of middlewares, Hapi.js gives you an opportunity to pass the configuration object that describes your route hierarchy.

Here’s how a typical setup would look like:

[GitHub Gist](https://gist.github.com/callstack-bot/52a7f6f82517d60458e1eaa031a8abde)

What’s great about this approach is the ability to describe the endpoints your application supports and an opportunity to reuse it across your different projects.

Let’s start by adding _Hapi.js_ to our dependencies:

[GitHub Gist](https://gist.github.com/callstack-bot/b0518078a9a347621601499ac1cd6aef)

NOTE: You can use npm instead_._

Next, we need a database to store our users and their conversations. I chose [MongoDB](https://www.mongodb.com/). Thanks to being NoSQL, it’s structure is similar to JSON objects, which makes it easy to navigate through the data. To define the schema for documents, we will use o_bject modeling tool_ called [Mongoose](http://mongoosejs.com/).

It’s necessary to install _Mongo:_‍

[GitHub Gist](https://gist.github.com/callstack-bot/05799120be434b2dd69b226cc91ca21d)

And finally, we will need [Socket.IO](https://socket.io/), which is a library that helps you to work with WebSockets. We will use it to implement real-time communication with our server, including receiving and ending data to connected sockets.

[GitHub Gist](https://gist.github.com/callstack-bot/7d20efeab733d4451620ae173a5e9217)

yarn add socket.io

## Setting up

Let’s create a server based on Hapi.js. It allows us to handle http protocol and Socket.IO. Next step is to listen to _‘connection’_ event, which is automatically sending by the client. Then on ‘_init’_ assign to the \<rte-code\>socket\<rte-code\> sending user’s id from sockets object. Now, we just listen to _‘message’_ event that is sent from the client when the user sends a message. The message is directly transferred between two defined sockets. Simultaneously, when the app is closed, the _‘disconnect’_ event is fired.

[GitHub Gist](https://gist.github.com/lukewalczak/ddba5ce9d8a6aad968e4810b97dab328)

Every endpoint needs its own route with a specific handler, so we need to define it. The route could be something like:

[GitHub Gist](https://gist.github.com/callstack-bot/dc36ffcf5525fb031a86db14e63397d5)

## Conversation or message?

At this stage, we need to catch the difference between conversation and message. Conversation is a container for messages ([_has a reference to the message model_](http://mongoosejs.com/docs/populate.html)) being sent between two users.

[GitHub Gist](https://gist.github.com/callstack-bot/2f3fb816f978ee0717de1d3de0582398)

Message model object should be similar to the one below:

[GitHub Gist](https://gist.github.com/callstack-bot/68c781a412c38f94781196bc8ce57666)

## Create converations as a first handler

I’m sure you have noticed that first handler has to be responsible for creating conversation. Let’s dive into it. First, you need to make sure that there has been no conversation between the two users yet. Creating a conversation includes adding a new conversation object to the database for two messaging users. It looks easy! But is it really? Take a look at more handlers.

[GitHub Gist](https://gist.github.com/lukewalczak/2d3a55d5fee9e66022463d75ce201f71)

### Add more handlers

The container is ready for an initial message. To create it, we need to find a proper conversation by an id, which is sent from a client in the message property. Then, we are able to create a textMessage, save it and push to the messages array as a part of a conversation model.

[GitHub Gist](https://gist.github.com/lukewalczak/26a9c558ed706f7b895a985e5729d032)

What should we do next? Imagine a case when your user starts a conversation, sends a new message and closes the app. Suddenly, he realizes he forgot to mention something important, so he re-opens the app… and gets confused: there is no conversation and no messages. Don’t worry, they’re not lost — they still exist in the database, waiting to be loaded. Naturally, we expect only a conversation with the chosen friend to load, so we need to distinguish two ids and reply to the proper one extended with the conversation id.

[GitHub Gist](https://gist.github.com/lukewalczak/b120e6134bbc7dc633fcbe42a8d114de)

Closing the app’s backend, we need to implement the last handler related to loading messages for a given conversation id.

[GitHub Gist](https://gist.github.com/lukewalczak/d61de9daf9ce2af485d2f34804d84000)

Hooray, we’re done and our backend is set!

If you’re interested in how to connect our work with frontend — make sure to follow this series, because there’s another article coming up in December. Everything you read today, you can check out in [my repo](https://github.com/lukewalczak/friendChat/tree/backend). Enjoy!