In previous blog, we talked about what are the basics of React Native and how to set up the Environment for development of React Native. In this blog, using the same knowledge i will be creating a simple ToDoList app where user can enter their daily needs, mark them as complete and can delete it also.

So let's get Started!!!!!

Setting up Expo

Before starting anything, we will have to setup Expo as we are using this instead of react native CLI.

First open the VScode terminal or standard terminal.

Run the following command:

npm install --global expo-cli

These commands can also be found at expo official documentation page, which will be linked below.

Now to create the project, run the following command:

npm create-expo-app ToDoList

This command will create the basic app structure where we will be working on App.js in this blog.

Make sure, you have simulator installed on your system or you have physical device with you. If not, refer to previous blog linked down below.

Structure of App

After creating the app , structure of app will look like this:

This is the basic structure of the app that we will be working on. This app doesn't require rendering the item again and again so i will be writing everything in App.js. If you want you can create components folder and render the product from different js or jsx. It still follows the 'DRY' principle which is Don't repeat yourself.

Installing Dependencies

We need multiple dependencies to make this app. So let's take a look at it.

First we need Async storage to store the data in the app. To install this run this command:

npm i @react-native-async-storage/async-storage

Second we need vector icon to render the icons in the app. To install this run this command:

npm i @react-native-vector-icons

That's all the extra dependencies we need write now.

Let's move towards creating the App.

Extensions

I forgot to mention that you can use prettier and ES7 to easily format and use the snippets to making coding easier.

Here this is what it looks like in VScode:

Implementation

So now let's start the coding, i will explaining the code as we go.

After installing all the dependencies, let's start the app with running the following command:

expo start

This will start the application and ask that where you want to open the app. I will be using simulator and will choose the appropriate option.

The main reason to start the application is that i can see the changes as i write code.

To delete the List

To delete the list, i will create a pressable object with the help of vector icons.I will import it and use it in the view. So that whenever i press on the icon, it invokes a function.

To use the icon, the code is given below:

the functionality to clear the todolist will look like this:

It will be placed in the header.

To Write in the list

To write in the list we will write something like this:

This will create the list with text and marked as complete and delete button with it.

It will be rendered as many time as new task is created. In here, TouchableOpacity is where user can touch the object. It is replaced by button over here.

To render the List

I will use FlatList to render the the item in the app. It has property called data from which will pass todo to get the data and renderItem where the List of item will be rendered as item as property,

To add the Item in the List

Textinput is used to write the text in the field and there is touchable opacity with adding functionality that will add the item in the list where then it can be render in the list and will be displayed in the screen. Add button contains the functionality here to add the item in the product and to add the item, the code is given below:

This will add the items and with the help of use state it will setTodos to add the item in the list.

To get the item from device

To getting the item from device, i will be using async useEffect which will help in getting the item from the AsyncStorage and json file. To implement this , refer to the code below:

useEffect for Get:

Async getTodo function:

To save the item into device

To save the item into device, i will be using async useEffect which will help in saving the item from the AsyncStorage and json file. To implement this , refer to the code below:

useEffect for saving

Async saveToDo function:

This will use the stringify function which converts the object to a string function.

Styling

I will be styling the app in the same App.js which is good thing about React Native. To style the items stylesheet is needed. It is needed to be imported from react-native.

This is how my Stylesheet looks like:

Here i have set the primary and secondary color as constant so that i don't have to write it again and again.

Final Product

Welcome Screen:

Adding the item in the list

Video Implementation

I have made the video about the same and here is the link below, where i have explained everything and working of the app in depth.

Conclusion

So we together have made a todolist app where user is able to create, delete and mark the task complete. It is basic app but contains all the functionality required to get you started in React Native. It contains useEffect, useState and some other components to make this app possible. I hope i was able to help you guys with this. Thanks for Watching!!

Feedbacks will be appreciated.

Stay Tuned for more blogs!!!!😁

References

https://github.com/oblador/react-native-vector-icons

https://reactnative.dev/docs/getting-started

https://docs.expo.dev/versions/latest/sdk/async-storage/

https://docs.expo.dev/get-started/installation/

Search This Blog

React Native

ToDoList App[Beginner] with React Native[Expo]