Create ToDo App using React Native

A ToDo App using React Native is a mobile application that helps users manage daily tasks efficiently. It allows users to add, update, and delete tasks while providing a smooth cross-platform experience on both Android and iOS using a single codebase.

• Helps users organize tasks by adding, editing, and deleting to-do items easily.
• Uses React Native components and state management for responsive UI and real-time updates.
• Supports cross-platform development, saving time and effort with one codebase for multiple devices.

Here, We start implementing the React Native ToDo App step by step, from setup to task management features.

Step 1: Create a React Native Project

Now, create a project with the following command.

npx create-expo-app app-name --template

Note: Replace the app-name with your app name for example : react-native-demo-app

• Next, you might be asked to choose a template. Select one based on your preference as shown in the image below.
• I am selecting the blank template because it will generate a minimal app, as clean as an empty canvas in JavaScript.

It completes the project creation and displays a message: "Your Project is ready!" as shown in the image below.

Now go into your project folder, i.e., react-native-demo

cd app-name

Project Structure:

Step 2: Run  Application

Start the server by using the following command.

npx expo start

Then, the application will display a QR code.

1. For the Android users,

• For the Android Emulator, press " a" as mentioned in the image below.
• For the Physical Device, download the " Expo Go " app from the Play Store. Open the app, and you will see a button labeled " Scan QR Code. " Click that button and scan the QR code; it will automatically build the Android app on your device.

2. For iOS users, simply scan the QR code using the Camera app .

3. If you're using a web browser, it will provide a local host link that you can use as mentioned in the image below.

Step 3: Start Coding

Approach:

• To develop a React Native todo application, it is crucial to adhere to a systematic method.
• Commence by specifying the features and functionalities of the app, encompassing tasks like adding, modifying, and removing items.
• Outline the architecture and data flow of the app, determining the required components and their interactions.
• Explore options for managing the app's state using React hooks or a state management library, and select a suitable data storage solution for preserving tasks.
• Design the user interface by breaking it down into reusable components, and incorporate navigation if necessary.
• Conduct comprehensive testing, including unit tests for critical functions and components, as well as user testing for obtaining feedback on usability.

Import libraries: Import required libraries at the top of the file.

StyleSheet: Create a StyleSheet to style components like container, title, heading, input, addButton, addButtonText, task, itemList, taskButton, editButton and deleteButton.

Main UI: Below is the code for the Main UI, which contains components like a

• TextInput : To take input from the user
• TouchableOpacity: Buttons for Add, Update, and Delete tasks
• Text: Used to display the text on the screen.
• FlatList : Used to display a list of tasks.

renderItem: Function to render each task item.

handleAddTask: Function to handle adding or updating a task.

handleEditTask: Function to handle editing a task.

handleDeleteTask: Function to handle deleting a task.

useState: useState is used to manage the state of the task input, list of tasks, and index of the task being edited.

Complete Source Code

App.js:

Output: