One-to-one communication is the main use for mobile phones although, text messaging has been quickly replaced by direct messaging apps. In this lesson, we will build a messaging app in React Native with the support of Firebase, a mobile backend as a service that will free us from having to build a whole backend for our app. Instead, we will focus on handling the state of our app fully from the frontend. Of book, this may have security implications that need to be eventually tackled, but to keep the focus of this book on React Native's capabilities, we will stick with the approach of keeping all the logic inside our app.
Firebase is a real-time database built on self-synching collections of data, it plays very well with MobX, so we will use it again for controlling the state of our app. But in this lesson, we will dive deeper as we will build larger data stores, which will be injected in our component tree through the mobx-react connectors.
We will build the app to be used both with iOS and Android having some platform-specific code for navigation (we will use tabbed navigation for iOS and drawer navigation for Android).
To reduce the size of the code, in this lesson, we will set the focus on functionality rather than design. Most of the user interface will be plain and simple, but trying to keep usability in mind. Moreover, we will use a react-native-gifted chat for our chat screen--a pre-built React Native component to render chat rooms based on a list of messages.
A messaging app requires more work than the apps we reviewed in previous lessons, as it needs a user management system comprising of logging in, registering, and logging out. We will reduce the complexity of building this system using Firebase as a backend. Together with its user management system, we will use their push notifications system to notify users when new messages are sent to them. Firebase also gives an analytics platform, a lambda functions service, and a storage system for free, but the feature we will take the most profit from is their real-time database. We will store our user's profile, messages, and chats data there.
Let's take a look at what our app will look like to have a mental image of the screens we will be building:
First screen will be a login/registration screen because we need our users to provide a name and some credentials to attach their device to a specific account, so they can receive push notifications for each message they need to receive. Both authentication methods are validated using Firebase's API and would result in the chats screen when they are successful:
When pressing a contact in the contacts list, the app will display the conversation with the selected contact in the chat screen:
The chats screen will show up all the chats that were started for the logged in user. Initially, this screen will be empty as the user won't have initiated any chats. To start a conversation, the user should go to the search screen in order to find some contacts:
This is a simple screen where the user can enter the contact name to search for it in the database. If there is a match on the name of the contact; the user will be able to tap on it to get the conversation started. From that point on, the conversation will show in the chat screen.
The last screen is the profile screen:
This screen is just a mean to log the current user out. When extending the app, we could add more features such as changing the avatar or the username.
While the app will look very similar on Android, navigation will be replaced by a drawer from which all the screens will be available. Let's take a look at the Android version:
The login/registration screen has standard text input and button components for Android:
Once the user logs in, he/she can navigate through all the screens by opening the drawer through the sliding finger gesture. The screen that opens by default after login is the chats screens where we will list the list of open conversations the user has:
From this screen, the user can press a specific conversation to list the messages on it:
The next screen is the search screen, which will be used to search for other users and start conversations with them:
The last screen is the profile screen where the LOGOUT button can be found:
The app will work on both platforms in portrait and landscape mode out of the box:
As we can imagine, this app will require of a powerful backend environment to store our users, messages, and statuses. Moreover, we will require a Push Notifications platform to notify users when they receive any messages. Since we are focusing in React Native in this book, we will delegate all this backend work to one of the most popular Mobile Backend as a Services (MBaaS) in the mobile world: Firebase
Before start coding, we will spend some time setting up our Firebase's push notifications service and real-time database to better understand what kind of data we will be dealing with in our app.
In summary, we will go through the following topics in this lesson:
- Complex Redux in React Native
- Firebase real-time database
- Firebase push notifications
- Firebase user management
- Forms
Let's start by reviewing the data models we will be using and how our app will connect with Firebase for syncing its data.