Subscribe
Subscribe to Email updates

Please use a valid email address.

SendBird's
Privacy Policy.
Search
React Native Chat Tutorial #1 - Build a chat app using SendBird
Share

React Native Chat Tutorial #1 - Build a chat app using SendBird

Nov 11, 2017

This is the first article in a series of React Native chat tutorials. After reading this article, you will:

  1. Create a simple React Native app
  2. Connect to SendBird with the SendBird Javascript SDK
  3. Use React Navigation to set-up the transition between your Log-in and Menu screens

As we continue to publish articles, you'll build a chat app from scratch and add in more and more features.

Sign up for SendBird's dashboard to create this chat app

1. React Native

React Native enables developers to build both iOS and Android apps using  JavaScript. A lot of companies, like Facebook, Skype, and Walmart, use React Native in various applications.

React Native Showcase

As it gets more popular, the React Native community continues to evolve rapidly. Our past React Native Tutorial was based on version 0.20 and the latest is already version 0.49. We've  completely re-written this article and the sample code to support the latest React Native updates and the latest SendBird JavaScript SDK.

1.1. Prerequisites

React Native is a platform for JavaScript so, to begin, you should be able to  write and understand JavaScript. React Native is based on the React framework so previous experience with React could also be helpful.

After installingNode.js, you can start developing React Native by using the sample repository (Create React Native App) or using the command line tool (React Native CLI). You can take a look at the official Getting Started guide to learn more details.

In this article, we will use React Native CLI with React Native 0.48.3.

Check out our JavaScript sample code any time.

1.2. Running React Native

Under the React Native skeleton directory, there are two files: (1) 'index.android.js' and (2) 'index.ios.js'

Each index file covers Android and iOS. You can confirm that the text in each file appears in the corresponding platform.

React NativeReact Native Chat Tutorial Screens

For this tutorial, we'll make both files reference a common file and import it so we don't have to modify those index files again and again.

Let's create a folder named 'src' and then create a new file named 'App.js'. Then let's create 'App.js', 'index.android.js', 'index.ios.js' so that they appear like the pictures below.

...waiting for Gist...

You can replace '[YOUR_PROJECT_NAME]' in the index files with your own project name but be sure it is the same in both index files.

You should now be able to see changes in 'App.js' reflected in both the Android and iOS.

React Native Chat Display in Android and iOS using SendBird JS SDKReact Native

2. Starting with SendBird JS SDK

Let's start building a sample chat app using SendBird JavaScript SDK in React Native.

React Native provides some basic UI Components but it typically requires a lot of extra work to build out the UI. With the 3rd-party UI library, React Native Elements, you can save a significant amount of effortgetting to a production level UI. We highly recommend experimenting with its various UI components. They are very well designed.

2.1. Login Form

First of all, let's create a Login Form in 'App.js' that asks users for a UserID and Nickname. We've used  serveral React Native Elements components here.

...waiting for Gist...

[React Native] View Design

2.2. Connecting to SendBird

Let's build the business logic that connects your sample app to the SendBird servers after installing SendBird JS SDK.

First, install the SendBird JS SDK with this npm command.

npm install --save sendbird

To use SendBird, you need to have an APP_ID. You can generate one in SendBird Dashboard if you haven't already. This sample will use "9DA1B1F4-0BE6-4DA8-82C5-2E81DAB56F23" because we have used it in other sample codes (N.B. This APP_ID is not allowed to be used in any other circumstances).

Since we haven't yet created another UI View to display the connection result, it'll be difficult to verify it. So use the 'Debug JS Remotely' feature in React Native to see the connection status under the hood. Type command + D to show the internal developer menu. Select 'Debug JS Remotely.' 

[React Native] Debug

[React Native] Debug

This feature lets you debug or verify raw data without having a UI to display it.

Let's run the code and take a look at the result in the debug mode.

This is the connection result with UserID 'Test123' and Nickname '123test'.

You can learn more details about "connect" and "updateCurrentUserInfo" methods in the official SendBird Documentation.

[React Native] Debug

3. React Navigation

Your app needs Navigation to transition between screens. There are some popular options for implementing Navigation in React Native.

This sample uses react-navigation because it's recommended by the React Native Official Documentation. It's worth referencing the React Navigation Documentation because it has resources and demos helpful for understanding how React Native works.

Install React-Navigation with this npm commad.

npm install --save react-navigation

React Navigation provides several different types of navigators such as StackNavigatorTabNavigator, DrawerNavigator.  Of these 3, StackNavigator is the most straightforward because it's the most similar to Android and iOS's default navigation.

This article uses StackNavigator.

To use StackNavigator, let's change our file/folder structure.

  • 'App.js': a file that manages StackNavigator overall
  • 'Login.js': a file that has the login form
  • 'Menu.js': a file that shows the basic menu
  • 'src/screens' : a folder that contains UI Views used by StackNavigator

First, rename the existing 'App.js' to 'Login.js' and move it to the 'src/screens' folder. Then, create a new 'App.js' first.

Be aware that the MainNavigator's 'key' in the new 'App.js' file should always be unique and the object in 'value' should designate the file that renders the screen.

...waiting for Gist...

 Change 'Login.js' in the following way:

  • 7 line: Set the title in the header property provided by StackNavigator.
  • 44 line: Move the screen to 'Menu.js' after connecting successfully with SendBird.
...waiting for Gist...

Keep 'Menu.js' minimal for now to see how the  navigation works. We'll modify it later to show the various screens of the sample chat app. 

Now you can see 'Menu.js' after logging in to SendBird and it's been executed by the 'navigation' command. 

[React Native] Menu

If we take a look at both 'Login.js' and 'Menu.js' together, then you should see that the header of each screen displays the 'title' you defined in 'navigationOptions'. You should also notice that a 'Back button' is automactically generated in the navigation bar. This is one of the most convenient features that StackNavigator provides.

[React Native] Navigation

In this tutorial, we've reviewed how to run a simple React Native app and connect to SendBird using the SendBird SDK. With React-Navigation, we implemented the basic screen transition as well.

In next article, we will dive into the advanced features of SendBird SDK and React-Navigation.

We're Hiring!
Help SendBird build the world's no. 1 messaging platform
We're Hiring!
Help SendBird build the world's no. 1 messaging platform
Related articles
Migrating chat made easy with Sync Server
Introduction Part of the challenge of migrating from one chat provider to another is not having a live migration solution ready. Building a live migration solution can be cost
ROMMEL SUNGA
Solutions Engineer
Don't try this at home: Why software engineers shouldn't build chat in-house
Before I helped co-found SendBird as the Chief Technology Officer, I built chat as a feature for two products. Both were consumer apps for families that required a real-time s
HARRY KIM
Chief Technology Officer
Extreme Optimization of AsyncStorage in React Native
 AsyncStorage is a unique built-in feature for storing data in React Native and a good way to store simple key-value data. To make the SendBird SDK less dependent on other pac
CHRIS HEO
Software Engineer - Applications
© SendBird 2019. All rights reserved.
Follow us