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:
- Create a simple React Native app
- 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.
1. React Native
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.
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.
2. Starting with SendBird JS SDK
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.
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.'
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.
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 StackNavigator, TabNavigator, 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.
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.
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!