React Native Assignment
Simple Data Handling App using AsyncStorage
Assignment Description
Students are required to develop a simple React Native mobile application of their own choice
(e.g., Notes App, Contact List, To-Do App, Expense Tracker, Reminder App, etc.) using Expo
Snack.
The application should allow users to enter data, store it locally, and manage it using
AsyncStorage.
The app must be simple, functional, and focused on data handling, not UI complexity.
Mandatory Features
Your application must include all of the following features:
1. User Input
o Take data from the user using appropriate input fields (e.g., TextInput).
o Example: note text, name and phone number, task title, expense amount, etc.
2. Data Storage using AsyncStorage
o Store user-entered data locally using AsyncStorage.
o Data should persist even after app refresh or reload.
3. Add New Data
o Provide functionality to add new records to storage.
o Each new entry should be saved and displayed properly.
4. Search Data
o Implement a simple search feature to find stored data.
o Example: search a note by keyword, contact by name, or task by title.
5. Delete Data
o Allow users to delete a specific record from the stored data.
o Changes should be reflected immediately in the UI and AsyncStorage.
6. Navigation Between Screens
o Use React Navigation (or equivalent) to navigate between at least two screens.
o Example screens:
Home / List Screen
Add Data Screen
Search or Details Screen
7. Simple User Interface
o The interface should be clean and understandable.
o Focus on functionality rather than advanced styling.
Technical Requirements
Platform: Expo Snack
Framework: React Native
Storage: AsyncStorage
Navigation: React Navigation
The app should run without errors on Expo Snack.
Submission Requirements
Each student must submit:
1. Expo Snack Link
o A working Snack link where the app can be run and tested online.
2. ZIP File of the Project
o Download the project from Expo Snack and submit the ZIP file.
Assignment Type
Individual Assignment
No group work is allowed.
Important Notes
This assignment is meant to test basic concepts, not advanced features.
Overly complex apps are not required.
Copying code from classmates will result in zero marks.
Make sure your Snack link is public and accessible.
React Native Assignment - Solution
To-Do App using AsyncStorage
1. Mandatory Features
User Input : The app uses a TextInput in the "Add Task" screen to take the
task title from the user.
Data Storage : It implements AsyncStorage to save the task list. Data
persists after a refresh because the useFocusEffect hook loads it from
storage every time the app opens.
Add New Data : The handleAdd function creates a new record and saves it
to the local storage array.
Search Data : A real-time search bar on the Home screen filters the list of
tasks by title as you type.
Delete Data : Each task has a "trash" icon that triggers handleDelete. This
removes the item from the UI and updates AsyncStorage immediately.
Navigation : The app uses React Navigation (Stack Navigator) to move
between the Home / List Screen and the Add Data Screen.
Simple User Interface : The UI is clean, using a FlatList for the data and
clear icons for actions, focusing on functionality rather than "overly
complex" styling.
2. Technical Requirements
Platform: Compatible with Expo Snack.
Framework: Built using React Native.
Libraries: Fully utilizes AsyncStorage and React Navigation as required.
3. Verification of "Data Handling"
Your assignment emphasizes data handling over UI complexity. The code achieves
this by:
1. Converting JavaScript objects to strings using [Link] to store
them.
2. Converting strings back to objects using [Link] to display them.
3. Managing a dynamic array of records that can be added, searched, or
deleted.
Main Home Screen
Add a New Task to your To-Do List
List the Task
Bold Option for your Text
Italic Option for your Text
Underline Option for your Text
Finally Add the Task to your To-Do List
Add Multiple Tasks to your To-Do List
Searching for Any Tasks
Checkbox for the Completed Task
Delete Task for the Unwanted Task