Learn to use Firebase with React Native

Hello to all of our new and existing readers! If you’re climbing up the ranks of all-things React Native, you know that you’ll inevitably need to have a database in the cloud. Whilst you can deploy an application using Heroku or various AWS services, at hackajob, we believe that Firebase is one of the easiest and most documented platforms to integrate with any app.

It’s crucial to note that Firebase isn’t just an online database for applications and includes lots of other features, such as cloud hosting, storage, analytics and authentication. For databases in particular, Firebase offers two options: Realtime Database and Firestore. In this tutorial, you’ll be using the Realtime Database option.

The app you’ll be creating today will feature a to-do list with all four CRUD options: Create, Read, Update and Delete. Because the app will be a single page application with a Firebase connection, you won’t be managing the authentication in this case.

Creating an App

In the first part of this tutorial, you’ll be working on the app itself. All functions will be mocked.

Start by creating the app:

react-native init todoApp && cd todoApp

You won’t be working in the ‘App.js’, so make a new file and name it ‘Home.js’. You’ll be using hooks so if you aren’t familiar with them yet, make sure to check out our tutorial before going any further.

Edit ‘App.js’ to import the ‘Home’ and show it:

In ‘Home’ you’ll have a button at the bottom of the page with an ‘add’ option that’ll open a modal within the input field. Your screen will now be divided into two sections: ‘List’ and ‘Button’. To add a new task, the button will set the visible modal state to ‘true’ and your modal will then appear.

It’s time to add your modal component (which will have an input field to add new tasks). Here, you’ll have a new state titled ‘newTask’ as well as an additional array of tasks.

Inserting a Task

Remember that in this part of the tutorial, you’ll only work in the ‘states’ and will use some mocks to fake your connection with Firebase.

Your task object will be something like this:

{id: firebase returned key, task: ‘string’, done: boolean}

Note that you won’t have the Id in the first instance because it’ll be returned right after the insert.

Listing Tasks and FlatList

In this next step, you’ll only fill your list with some fixed values:

When the application starts, you’ll use ‘useEffect()’ to fill your tasks.

To show your tasks, use the ‘react-native-elements ListItem’ component and execute the following commands in your terminal:

npm i react-native-elements --save  

npm i react-native-vector-icons —save

react-native link react-native-vector-icons

Import the ‘ListItem’ and ‘FlatList’ components:

Declare the ‘renderItem’ function as well as the ‘extractKey’:

Use the ‘FlatList’ component inside the ‘List’ section in the app:

How to Update a Task (and set it to ‘done’)

You’ll use a ‘normal press’ to set your task to done, as well as a ‘long press’ to delete it:

Remember to update the ‘onPress’ props in ‘ListItem’.

Deleting a Task

In the first instance, you’ll use an ‘array filter’ to remove your component:

In its current state, your app should look like so:

This is the end of part one of this tutorial. In part two, you’ll be learning how to create a Firebase application and connect it with your app.

Like what you’ve read? Be sure to take a look at our other React Native tutorials.