Firebase and DialogFlow with React Native made easy

How to integrate Firebase Authentication and DialogFlow into your React Native app.

Firebase + Dialogflow + React-Native

Hello guys! I hope you are doing well. So in this tutorial, we will be making a simple React Native chat application with Dialogflow. We will be using Dialogflow fulfilments so that our Dialogflow agent may fetch data stored in our Firebase. Also, we will integrate Firebase Authentication for the login and sign up functionality.

So after reading this tutorial, we will be able to understand how we can integrate Firebase and Dialogflow and its various functionalities in our react native app.

We will break down our tutorial into three parts. The first part will be a general introduction and UI of our app. In the second part, we will integrate the Firebase and in the third and the last part, we will integrate Dialogflow.

So first let’s have a brief introduction to Firebase and Dialogflow.

So Firebase is a mobile and web app development platform that provides developers with a lot of tools and services to help them develop high-quality apps, grow their user base and earn more profit.

In our app, we will be using Firebase for authentication and data storage. You may also refer to Firebase’s official site from here.

Now comes the DialogFlow.

Dialogflow is an end-to-end, build-once deploy-everywhere development suite for creating conversational interfaces for websites, mobile applications, popular messaging platforms, and IoT devices.

In simpler terms, Dialogflow is Google’s natural language understanding tool for building conversational experiences, such as voice apps and chatbots, powered by AI.

Okay, so that’s enough of theory. Let’s start coding. We will be using React-Native an open-source mobile development framework created by Facebook that lets you build apps for both android and ios with the same codebase.

So the first thing first. We will first create a react native project so fire up your terminal and start off by typing the commands :

react-native init rnapp
cd rnapp

We will be testing our app in our physical android device. You may refer the documentation if you are not comfortable creating apps without using expo from here. Make sure that you run the following command in your rnapp directory.

adb reverse tcp:8081 tcp:8081

This command lets you run the development server running on your laptop to your mobile device.

So now let’s start the development server :

npm start

And you will be welcome with the following screen in your mobile app.

Before proceeding, we will install the dependencies required for our app. So in your terminal using npm package manager we will install :

npm i --save react-native-gesture-handler react-navigation react-navigation-stack

We will need to link react-native-gesture-handler because newly added native modules must be linked because they are out of the “default scope” of the project and in order to be available to the RN platform, they must follow the linking process.

react-native link react-native-gesture-handler
react-native run-android

We will use native-base to design our UI part. You can refer to their documentation from here. So also let’s install native-base too.

npm i --save native-base

So in our app, we will be needing just two screens Login screen and Home screen.

So in your current directory(i.e. rnapp) make a folder named ‘Screens’ and inside the ‘Screens’ folder make two files Login.js file and Home.js file. So finally your file structure should look like :

Project Structure

So first set up the navigation flow of our app. On opening our app we will have a Login screen and after a successful login, we will be navigated to the Home screen. So in your App.js file remove all the code and add the following code :

import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import Login from './Screens/Login';
import Home from './Screens/Home';
const MainNavigator = createStackNavigator({
Login : {screen : Login},
Home : {screen : Home},
},{
defaultNavigationOptions : {
headerTintColor : '#fff',
headerStyle : {
backgroundColor : '#000'
}
}});
const App = createAppContainer(MainNavigator);
export default App;

Next, add the following code to your Login Screen :

import React, { Component } from 'react';
import { Container, Content, Form, Item, Input, Label, Button } from 'native-base';
import { Text } from 'react-native';
export default class Login extends Component {
static navigationOptions = {
title : 'Login',
}
render() {
return (
<Container>
<Content>
<Form>
<Item floatingLabel>
<Label>Username</Label>
<Input />
</Item>
<Item floatingLabel last>
<Label>Password</Label>
<Input />
</Item>
<Button
style={{marginTop : 40}}
full dark block>
<Text style={{color:'#fff'}}>Login</Text>
</Button>
<Button
style={{marginTop : 15}}
full dark block>
<Text style={{color:'#fff'}}>Register</Text>
</Button>
</Form>
</Content>
</Container>
);
}}

Now for the Home Screen, we need to implement the chat UI. For this, we don’t need to design it from scratch. Thanks to the react-native-gifted-chat package which we can simply install using npm and import it into our home screen. So back to your terminal :

npm i --save react-native-gifted-chat

After installation, run your server using npm start and then add the following code to your Home.js file

import React from 'react'
import { GiftedChat } from 'react-native-gifted-chat';
export default class Home extends React.Component {
static navigationOptions = {
title : 'Home',
}
state = {
messages: [],
}
componentDidMount() {
this.setState({
messages: [
{
_id: 1,
text: 'Hello developer',
createdAt: new Date(),
user: {
_id: 2,
name: 'React Native',
avatar: 'https://placeimg.com/140/140/any',
},
},
],
})
}
onSend(messages = []) {
this.setState(previousState => ({
messages: GiftedChat.append(previousState.messages, messages),
}))
}
render() {
return (
<GiftedChat
messages={this.state.messages}
onSend={messages => this.onSend(messages)}
user={{
_id: 1,
}}
/>
)}
}

And after you have run the server your Chat UI in your home screen would look like this :)

So finally we are done with the UI part of our app. We will integrate Firebase in our next part of the tutorial.

I hope you are enjoying this tutorial and let’s catch up in the next part :).

The link for the second part is here.

Thanks a lot!

Thank You!