---
title: "Simple Chat App With React Native - Part II"
description: "Read the article and learn how to connect the frontend of the messaging app with its backend."
url: https://www.callstack.com/blog/simple-chat-app-with-react-native-part-2-frontend
updated: 2026-10-24T08:39:37.120Z
---

# Simple Chat App With React Native - Part II

Read the article and learn how to connect the frontend of the messaging app with its backend.

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

In the previous part we discussed the creation of a backend for messaging app. This time I would like to describe how to connect the frontend with our backend. Step by step, I will cover every endpoint by adjusting adequate action for them and finally, present how it works.

This is the second part of Simple chat app with React Native:

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

## What tools do we need?

Once more we need to answer this question. Surely, a tool for the state management is our must have. Why? Conversations and messages are changing constantly, therefore a tool which will help us control the application state is necessary. My first choice was [Redux](https://redux.js.org/), which manages state through a single JavaScript object, known as a data store, where all of our application’s state is located. We simply have to install redux with the React bindings:

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

Did you hear about [Gifted Chat](https://github.com/FaridSafi/react-native-gifted-chat)? It’s pretty cool complete chat UI for React Native, which will make displaying messages so much easier. Let’s add it to dependencies:

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

## Connecting to the Socket.IO server

Socket.IO provides bi-directional communication in realtime and works perfectly for chat based applications. What is the biggest advantage of using it? We don’t have to involve polling the server for changes, because server immediately will get a message and push it to connected client.

The Socket.IO server we created recently is listening to the _‘connection’_event, which is automatically sent by the client. Our task is to send the **user id** as an init message, so that the server can identify the user the socket is connected to.

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

Let’s also add a listener for the ‘_message’_ event on the server which receives messages from the client and creates a message object to store in the database.

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

[Need to conduct React Native training in your company? Talk to us!](https://callstack.com/contact-us/)

## Actions, reducers and store … so Redux

Firstly, we need to define **createConversation** action. According to official documentation **actions** are:

> Payloads of information that send data from your application to your store. They are the **only** source of information for the store. You send them to the store using \<rte-code\>store.dispatch()\<rte-code\>.

Let’s dive into code represents creating conversation:

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

The action is calling for a specific endpoint, in this case, it’s \<rte-code\>/conversation\<rte-code\>. The data that is sent is **friendId**, so in the conversation are kept two ids: conversation and friend.

![](https://www.callstack.com/assets/67eaca7d0765eb632f912e33_67cf5b3b692887ede4a4b2d0_67cdb24d2c226ba921959189_Conversation-state.jpeg)

_Conversation state_

Because of \<rte-code\>redux-thunk\<rte-code\> middleware, we are able to dispatch action when we get the response. In a case when a response doesn’t include an error, **createConversationSuccess()** action is dispatched sequentially with navigating to conversation chat view.

**Reducer’s** job is to specify how the application’s state changes in response.   
When conversation creation is successful, the returned value is an array of conversations, which are spread and overwritten by action payload, so **action.conversation**. Simultaneously **currentConversationId** is set on **action.conversation.Id**.

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

Creating a message is much simpler. It’s a typical action from the action creator. What does it mean? Just that action creator is a function which returns an action.

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

In our example function is called **sendMessage** and returns action type _‘SEND\_MESSAGE’_. The function accepts two arguments, where the first- **conversationId** is needed to identify a destination for second — **message**.

We are following optimistic update approach likewise WhatsApp does, which means that a message is immediately appended to conversation before server responds. If it fails, we should display an error and give the user an opportunity to retry his request.

Similarly as before, state is changing in reducer and the result is message added to the exact conversation.

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

At this stage, we are ready to load created conversations and sent the messages. The actions for them are very similar. The differences are:

- an endpoint for which action is dispatched
- passed argument (_conversationId_) that is needed only in receiving messages action.

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

How should the state change in reducer? Obviously, it will return state with all messages for given id.

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

**Store** is a perfect place for holding the whole state tree of chat application. It’s worth to split reducing function into separate functions as well and then use combineReducers which is passed to createStore.

It would look like:

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

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

## Time for a little chat

Our logic is ready, so let’s create the containers for displaying conversations. Most likely we need to prepare two views:

- user account panel with friend list with whom we are messaging and option to add mate to chat,
- chat window for texting a message.

It’s time to tackle the main view called **UserAccount**, where you have to connect states from reducers and redux action. Here’s how it will look like:

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

To receive the user’s friends and all conversations will dispatch two actions inside the lifecycle method **componentDidMount()**. This approach ensures us that data won’t be loaded until after the initial render and is fetched _only_ from the client.

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

So what happens to the other two actions? Let me explain it, but first look at the code below:

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

**FriendList** is a styled _FlatList_ which renders a sorted array of friends_,_ where a single friend is an object with **\_id** and **fullName**. Tapping on friend item calls the **onSetCurrentConversationId()** function and navigates to chat view when the conversation has been started or otherwise will create new conversation by firing **onCreateConversation()**.

**ConversationChat** is a view for texting a message, so the most appropriate place to connect sending and loading messages. I think, you are already familiar with it, but just in case check the code snippet:

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

Once again within **componentDidMount()** we are dispatching action- this time **onLoadMessages()**.

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

I hope that you are still following, because it’s the time for implementing **onSendMessage()** action! Let’s start it by creating a function wrapper inside, where we will be sending the _‘message’_ event to the server. At the same time, we can update redux state. Then close the function with firing the action.

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

The last step is to use **GiftedChat** where we pass the following props:

- messages as an array of messages to display,
- onSend as a callback when user is sending a message,
- user, which is just user’s id.

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

How does it work?

![gif showing final results](https://www.callstack.com/assets/67eaca7d0765eb632f912e46_67cf5b3b692887ede4a4b2e2_67cdb24d2c226ba9219590e9_How-does-it-work_.gif)

I hope you enjoyed this article, and creating simple chat app is easier for you now. Everything you read today can find inside an [friendChat ](https://github.com/lukewalczak/friendChat)app.