How to make a ToDo List App with React Native, Expo and Back4App
Expo is a tool that helps you speed up development time and testing.
This article explains how you can integrate a React Native app with Back4App. After completing this step-by-step tutorial, you will have built a project to manipulate a To-Do List.
Is it your first time using Back4App? If so, you need to do the Sign-Up.
According to the React Native instructions, you need to install Node 10+ and Expo CLI using the following command:
npm install -g expo-cli
For more details: https://facebook.github.io/react-native/docs/getting-started.html
Download the starter project
To download the ToDoListApp template project, run the following commands in your terminal:
wget "https://github.com/templates-back4app/react-native-todoapp/archive/template.zip" -O template.zip; unzip template.zip; rm template.zip && cd react-native-todoapp && npm install
Note: Remember that you need to replace the keys of your Back4App app. Open the file constans/Keys.js file and paste into the following keys.
Diagram of your App
If you followed the instructions linked above, you should see this flow diagram:
Start the ToDo List App
Step 1 – Create the Login Page
To login users to our application, use our method to give them access to their account:
Check the complete code here: https://github.com/templates-back4app/react-native-todoapp/blob/login-page/screens/LogInScreen.js
Step 2 – SignUp Page
After you finish the previous step, you should ask the users to sign up to our application. The following code illustrates a typical sign up:
Check the complete code here: https://github.com/templates-back4app/react-native-todoapp/blob/signup-page/screens/SignUpScreen.js
Step 3 – Set up Reset Password Page
Imagine that as long as we have an authentication flow, users may forget their password. Parse Server enables securely resetting the user passwords. Configure a function that asks the user for their email address:
Check the complete code here: https://github.com/templates-back4app/react-native-todoapp/blob/resetpassword-page/screens/RestorePasswordScreen.js
Step 4 – ToDo List Page
Configure the Layout and functions to create, read, update and delete an item from a list.
Step 4.1 – Create an item
Use the save function to store an item in the Parse Cloud. This makes it possible to create a new object in your app. Look at the Data Browser in your app on Parse:
Step 4.2 – Reading all objects
This function is invoked many times because it is used to start a screen, update or delete an object. The data can be retrieved using the following code:
Step 4.3 – Update an item
After an object is created, there should be a way to update it in the future. It’s simple, you only need to retrieve that item and call the save method using this code:
Step 4.4 – Delete an item
Working with a list of items necessitates allowing users to delete their objects by themselves.
Check the complete code here: https://github.com/templates-back4app/react-native-todoapp/blob/home-page/screens/HomeScreen.js
That’s it for the ToDo list app! Note, you might want to stylize your screens. For this reason, it is recommended to check the complete repo following the link below:
If you need any help or a function doesn’t work, please contact our team via chat!