Buiding Chat App with React Native and Socket.io

Buiding Chat App with React Native and Socket.io

Get Free React Native Template on CreativeTim

In this post, we are going to learn how to build a Chat application with React Native and Socket.io. Socket.io is a widely-used JavaScript library mostly used for realtime web applications. It enables real-time, two-way, and event-based communication between the client (browser) and the server. It is built from Node.js and JavaScript client library. Its most prominent features are reliability, automatic reconnection, multigroup room support, and detecting breakage in connection.

Thus, these are the features we get from socket.io and which we are going to integrate into our React Native app in order to create a chat application.

So, let’s get started, folks!!!

Nodejs backend

First of all, we need a backend server that handles all the incoming messages and requests from the clients.

Here, we need to include express and socket.io to index.js file in our node project. We are going to use the es5 method to import the required express and socket.io libraries. But you can use es6 coding format to import as well. We are going to initialize express method to a constant variable app and then create the http server with app variable. After that, we are going to listen to the server using socket.io library. The port server is going to listen to is set to 3000.

const express = require("express");
const app = express();
const server = require("http").createServer(app);
const io = require("socket.io").listen(server);
const port = 3000;

Secondly, we need to start socket.io server with on method. Then, we need to emit function in order to establish two-way communication as shown in the code snippet below:

io.on("connection", socket => {
  console.log("a user connected :D");
  socket.on("chat message", msg => {
    io.emit("chat message", msg);

lastly, we are going to start the server on port 3000 so that server can listen to any incoming request at that port.

server.listen(port, () => console.log("server running on port:" + port));

You can check the result of server-side code and demo in Codesandbox. This completes our server setup.

React Native Section

In this step, we are going to assume that we have already set up the React Native project and it is running. Now, we move on to the building of the application and integrating server-side to our client-side chat application.

Here, first, we need to import socket.io client package i.e importing io module from socket.io-client package as shown in the code snippet below:

import io from "socket.io-client";

Next, we need to create two states to handle change in the written message and the array that holds the messages. The two states here are chatMessage which handles the client’s input and chatMessages array which handles the storing of submitted or received messages. The code for this is given in the code snippet below:

constructor(props) {
   this.state = {
      chatMessage: "",
      chatMessages: []

Now, we initialize the connection to the server.

Here, by using on method of io module, we are going to change the array state by contacting the new messages that are sent or received, as shown in the code snippet below:

componentDidMount() {
   this.socket = io("");
    this.socket.on("chat message", msg => {
          this.setState({ chatMessages: [...this.state.chatMessages, msg]   

Next, we need to create a simple form and display messages with map function. We are going to simple TextInput the element for clients to enter the message and trigger the submitChatMessage function when onSubmitEditing event occurs as shown in the code snippet below:

render() {
    const chatMessages = this.state.chatMessages.map(chatMessage => (
      <Text style={{borderWidth: 2, top: 500}}>{chatMessage}</Text>

    return (
      <View style={styles.container}>
          style={{height: 40, borderWidth: 2, top: 600}}
          onSubmitEditing={() => this.submitChatMessage()}
          onChangeText={chatMessage => {
  `  );

The submitChatMessage function is created to send the message to the server using emit method as shown in the code snippet below:

submitChatMessage() {
    this.socket.emit('chat message', this.state.chatMessage);
    this.setState({chatMessage: ''});

Lastly, we are going to add some styles to our chat container using the Stylesheet component as shown in the code snippet below:

const styles = StyleSheet.create({
  container: {
    height: 400,
    flex: 1,
    backgroundColor: '#F5FCFF',

Now, we run our project on a device emulator or testing. As we can see, it works as expected:

Hence, this marks the successful completion of our simple chat application using React Native and Socket.io package.


In this post, we learned how to create and set up a simple socket.io server using Node and express. Then, we also learned how to integrate the client React Native chat application with the server-side. We were able to establish two-way communication successfully. Finally, we were able to run and test our chat application in the device emulator successfully.

There is no ads to display, Please add some



React Native developer from beautiful Chiangmai, love Americano and travel so much