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

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.

You'll need to sign up to 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 installing Node.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.

 

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.

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 effort getting 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.

 [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.

 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.

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.

Stay tuned for more next week!

 

See what's possible for your messaging

 

 

Written by

TAGS ENGINEERING

Subscribe to Email Updates

Recent Posts

Language