In today’s day and age, it seems like everyone and their dog wants to build a chat app or incorporate chat into their app, but for most it ends up being a big undertaking. Lucky for you and maybe your dog, I’ve done the heavy lifting and have simplified the process in this article. How you might ask? I work at G2i and we use React Native and various libraries to quickly build mobile apps for our most beloved clients. In this article, we will quickly build a chat app using React Native, Expo and Microsoft’s Bot Framework.

A dog building a chat app!

Part 1 —Building a Simple Chat App

This guide is Part One of a planned two-part series. In this first part, we focus on setting up React Native, Expo and Microsoft’s Bot Framework to receive and send messages. In the second part, we’ll explore some complex message types like sending pictures and videos.

Overview

1. Introduction

2. React Native & Expo

3. Gifted Chat

4. Microsoft Bot Framework

5. Conclusion

6. Who to ask for help

1 — Introduction

A couple years ago when I started working on building the tools that power our chat bot ecosystem, it opened my eyes to the potential of chat bots and the power of chat apps. More importantly, it made me think about the lack of tools we have to build successful chat bots and apps. Fast forward to today and our tools are better, but many people don’t know about them; that’s why I’m writing this article to show you the tools!

Before we begin, here’s some reasons on what makes this approach a good one for you:

Speed. React Native and Microsoft’s Bot Framework makes it easy for you to build a chat app in less time than ever before. Hidden complexity. Microsoft’s Bot Framework takes care of web-sockets and the messaging API so you don’t have to. Multi-platform. React Native let’s you build iOS and Android apps by writing JavaScript code once. Microsoft’s Bot Framework let’s you build an API that works immediately with Facebook Messenger, Your App™ and other platforms. Sweet nectar!

Now that you know the back story and what makes this a good approach let’s get started. If at any point you get lost, I have setup a Gitub repository with my code for you.

2 —React Native & Expo

In this section we will setup React Native and Expo.

Step 1

Before we begin its a good idea to update your Mac OS to the latest version. Additionally, you will need Xcode and the Command Line Tools provided by Xcode. You can get Xcode here and or update Xcode to the latest version in the App Store.

Lastly, open Xcode → Preferences → Locations and ensure you have the Command Line Tools setup like the below image.

Step 1 in Xcode

Step 2

Firstly, let’s bootstrap a simple React Native app. Inside a terminal, we will use create-react-native-app (commonly called CRNA) like so:

mkdir ~/workspace

cd ~/workspace

npx create-react-native-app myapp

You might not be familiar with the command above called npx — it comes with npm 5.2+ and higher, see instructions for older npm versions.

Step 3

All the commands from this point on are meant to be done in your project directory. Let’s change directories to it:

cd ~/workspace/myapp

Step 4

Install and open Expo XDE. From XDE, open your project by clicking Project → Open Project (CMD+O). As always your project is located in the folder ~/workspace/myapp .

Step 4 in Expo XDE

Step 5

Once your project has started up in Expo XDE. Click Device → Open on iOS Simulator (CMD+I).

Step 5 in Expo XDE

Step 6

Once the iOS simulator boots up your application, press the blue button labeled “Got it” and you should see an app that looks like:

Step 6 in iOS Simulator

That’s it we have now setup React Native and Expo using CRNA. That was easy!

3 —Gifted Chat

In this section we will setup Gifted Chat. It will help us build a complete chat UI with very little work.

Step 1

In a terminal let’s install react-native-gifted-chat from your project directory like so:

npm install react-native-gifted-chat --save

Step 2

Open ./App.js and replace it with the following:

import React from "react";

import { StyleSheet, Text, View } from "react-native";

import { GiftedChat } from "react-native-gifted-chat"; export default class App extends React.Component {

state = {

messages: [

{

_id: 1,

text: "Hello developer",

createdAt: new Date()

}

]

}; render() {

return (

<View style={styles.container}>

<GiftedChat messages={this.state.messages} />

</View>

);

}

} const styles = StyleSheet.create({

container: {

flex: 1

}

});

Let’s explore the code a little bit. <GiftedChat messages={this.state.messages} /> is telling GiftedChat that we want to use the array of messages found in state .

In GiftedChat a message looks like the following:

{

_id: 1,

text: 'My message',

createdAt: new Date(Date.UTC(2016, 5, 11, 17, 20, 0)),

user: {

_id: 2,

name: 'React Native',

avatar: 'https://facebook.github.io/react/img/logo_og.png',

},

image: 'https://facebook.github.io/react/img/logo_og.png',

// Any additional custom parameters are passed through

}

You can probably guess what each property means but to learn more visit this page.

Step 3

Open your app on the iOS simulator like we did in the second section and press CMD+R to reload the application. This is what your app should look like now:

Step 3 in iOS Simulator

It looks pretty good for a minimal amount of work!

4 — Microsoft Bot Framework

In this section we will setup Microsoft’s Bot Framework.

Step 1

Firstly, sign into the Microsoft Bot Framework here. If you don’t already have a Microsoft account you can create one when you attempt to sign in or click here. Once signed in your screen should look like this:

Step 1 in Microsoft Bot Framework

Lets click the “Create” button as seen in the above image.

Step 2

You will see the following screen, click the “Create” button:

Step 2 in Microsoft Bot Framework

Next you will see this screen. Click “Sign up for a new subscription”. You will have to give your credit card information but you won’t be charged.

Azure subscription

After signing up for a new trial subscription, log in and out of your account as I have found Microsoft doesn’t detect the subscription until you log out. Click here to log in.

Step 3

Now create a new Web App Bot.

Step 3 in Microsoft Bot Framework

And configure the app so it uses NodeJS as its bot template like so:

Configuration for Microsoft Bot Framework

This will take a couple of minutes to deploy on Azure’s end. Once its finished check your notifications and click “Go to Resource”.

Azure Notifications

Step 4

From your newly created Bot resource, go to Channels and setup DirectLine which we will be using in the next section to connect our React Native app to our bot.

Make note of your secret keys, which we will need later.

Secret Keys in Direct Line

This is what it should look like when you go back to Channels.

Direct Line is now running

Step 5

Now, let’s install DirectLine which will help us on the client side for sending and receiving messages. Inside the root of your React Native app run the following:

npm install botframework-directlinejs --save

Step 6

Update your App.js file to import Direct Line and use your secret keys found in step 4.

import React from "react";

import { StyleSheet, Text, View } from "react-native";

import { GiftedChat } from "react-native-gifted-chat";

import { DirectLine } from "botframework-directlinejs"; const directLine = new DirectLine({

secret: "YOUR_SECRET_GOES_HERE"

});

...botMessage,

_id: botMessage.id,

createdAt: botMessage.timestamp,

user: {

_id: 2,

name: "React Native",

avatar:

"https://cdn.iconscout.com/public/images/icon/free/png-512/avatar-user-business-man-399587fe24739d5a-512x512.png"

}

}); const botMessageToGiftedMessage = botMessage => ({...botMessage,_id: botMessage.id,createdAt: botMessage.timestamp,user: {_id: 2,name: "React Native",avatar:}); function giftedMessageToBotMessage(message) {

return {

from: { id: 1, name: "John Doe" },

type: "message",

text: message.text

};

} export default class App extends React.Component {

state = {

messages: []

}; constructor(props) {

super(props);

directLine.activity$.subscribe(botMessage => {

const newMessage = botMessageToGiftedMessage(botMessage);

this.setState({ messages: [newMessage, ...this.state.messages] });

});

} onSend = messages => {

this.setState({ messages: [...messages, ...this.state.messages] });

messages.forEach(message => {

directLine

.postActivity(giftedMessageToBotMessage(message))

.subscribe(() => console.log("success"), () => console.log("failed"));

});

}; render() {

return (

<View style={styles.container}>

<GiftedChat

user={{

_id: 1

}}

messages={this.state.messages}

onSend={this.onSend}

/>

</View>

);

}

} const styles = StyleSheet.create({

container: {

flex: 1

}

});

Step 7

Let’s see it in action. Run Expo XDE again and run the iOS simulator from there. You should see your app:

Step 7 in iOS Simulator

We are done! You now have a bot that echos what you say. How cool?

5 — Conclusion

I hope this guide helped you setup your React Native chat app. If you would like to go further I encourage you to open the online code editor in Microsoft Azure. It can be found under the Build section of your bot as shown below.

Build Section in Microsoft Azure

Then inside app.js you can start changing your bot’s code. Try making your bot respond to different messages by modifying the code inside bot.dialog(...) :

Editing app.js

That concludes part one of this series, in the next part I will explore sending images and videos to your bot. Follow me on Medium to stay tuned!

6 — Who to ask for help