Simple Todo app using reactnative,firebase and nativebase

loginsystemfeatured
loginsystemfeatured

This tutorial is the second part of react native firebase series.We are going to continue from where we left of in the last tutorial which can be found here.

In this part we are going to learn how to use real-time database provided by firebase for storing and retrieving database entries.

We need to enable anonymous database update feature of firebase realtime db:

First login into firebase console and go to your project.

Click on the database tab on the left and then click on rules tab in the main page.

Modify the rules to allow anonymous db updates as follows:

 

We will modify our Main.js file as follows:

First create a reference to database method in constructor:

Create a listener for database changes in the componentDidMount method and then populate task array as follows:

The method creates a listener for getting updates from firebase and update the tasks array in realtime.

We store the name as well as key of each task so that we can remove the task on completion based on key value which is unique for each database item.

We are going to use Card and CardItem component of Nativebase to display our todo list.

Include appropriate components in the top of Main as follows:

 

Modify the render method of Main as follows:

We have created a input box at the footer of the screen to add new task using TextInput and FloatingActionButton(FAB) of nativebase which executes addtask handler function which is defined as follows:

The add task handler checks if textInput is empty and creates a new database entry with name of the task in the firebase database.It then sets newTask value to blank for adding new task and displays an alert to the user about successful task addition.

The render method contain Card component which takes input dataArray as our tasks array and renders each arrayitem using in renderRow props using renderItem handler which is defined as follows:

Here we are passing onTaskcompletion method as prop which we will discuss later.For now just observe that it return a ListItem component to parent renderRow for each array item.

Lets us create ListItem component.For this create a new components folder inside src folder besides pages and styles folder.Create ListItem.js file in the Components folder and write the following code:

Here we have simply created a carditem which can be further customised based on your needs. We have added a checkmark besides each task by which we can remove the task when it is completed.The onPress method of the checkmark icon gives a call to onTaskCompletion method in renderItem method of Main component.

The onTaskcompletion removes the item from firebase database based on the key that it receives from the carditem object.It then displays alert the user that the given task is completed.

The complete Main.js will look like this after making all the changes:

Update the mainstyle.js with following additonal parts:

 

Once you are done with all the changes reload the app on phone and you will get a todo app interface in the main page after you login which looks like this:

todoapp1
todoapp1
todoapp2
todoapp2

 

I did not get time to search for logout icon on top right but back button does the job of log out for now.

The complete source code for the app can be found on Github repo here.Feel free to fork the project or report issues.

The app currently will not work offline since we have not enabled data persistence.I will cover offline data storage in the next tutorial so stay tuned.

You can make your own improvements and additions to the app to  make it more usable like:

  • Allow editing task name on press on pencil/create icon.
  • Add new screen/component on press of Plus button which allows user to add additional  information like due date of task,set reminder for the task or add image for the task
  • Use firebase auth to associate task list for each user

Kindly mention your doubts/suggestions/appreciations in the comments section.

 

 

 

 

 

Share post-
About Saurabh Mhatre 71 Articles
Currently working in web and hybrid application development