Scribd
Upload
10 views2 pages

Assignment2 Login UseReducer

The document outlines the assignment to build a Todo List application using React Native, focusing on core components like TextInput, Button, and FlatList. It includes functional requirements for a login screen with a 'Remember Password' feature and a main screen to manage tasks, utilizing useReducer for state management and AsyncStorage for credential storage. The application should allow users to add, complete, and delete tasks, with state not being persisted across app reloads.

Uploaded by

lamgiangvpr123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views2 pages

Assignment2 Login UseReducer

The document outlines the assignment to build a Todo List application using React Native, focusing on core components like TextInput, Button, and FlatList. It includes functional requirements for a login screen with a 'Remember Password' feature and a main screen to manage tasks, utilizing useReducer for state management and AsyncStorage for credential storage. The application should allow users to add, complete, and delete tasks, with state not being persisted across app reloads.

Uploaded by

lamgiangvpr123
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Assigment 2: Building a Todo List Application with React Native

Objective

 Build a simple React Native application to manage a todo list.


 Utilize core React Native components such as TextInput, Button, and
FlatList.
 Manage application state using useReducer.
 Implement screen navigation using React Navigation.
 Extension: Add a "Remember Password" feature to automatically log in on
subsequent app launches.

Functional Requirements

1. Login Screen:
o Display two input fields: Username and Password.
o Include a "Login" button to handle login.
o Add a "Remember Password" checkbox:
 If checked, save the login credentials (username and password)
to automatically log in on future app launches.
 If unchecked, do not save credentials, requiring the user to log
in again when the app is opened.
o If login is successful (simulated check, e.g., non-empty username and
password), navigate to the main screen.
o If login fails, display an error message (alert).
o Auto-login:
 On app launch, check for saved credentials. If valid credentials
exist, navigate directly to the main screen without showing the
login screen.
2. Main Screen:
o Display a list of current tasks using FlatList.
o Include an input field (TextInput) and an "Add" button to add new
tasks.
o Each task in the list should display:
 Task Title: Text describing the task.
 "Complete" Button: Toggle the task's completion status.
 "Delete" Button: Remove the task from the list.
o When the "Complete" button is pressed:
 The task title is displayed with a strikethrough
(textDecorationLine: 'line-through') or styled differently (e.g.,
change text color) to indicate completion.
o When the "Delete" button is pressed:
 The task is removed from the list.
o Data does not need to be persisted (task state is lost when the app is
reloaded).
3. State Management:
o Use useReducer to manage the state of the task list (add, delete, toggle
completion).
o The state includes a list of tasks, each with the following properties:
 id: Unique identifier (e.g., timestamp or simple UUID).
 title: Task title.
 completed: Completion status (boolean).
o Store Login Credentials:
 Use AsyncStorage to save and retrieve login credentials
(username and password) when the "Remember Password"
option is selected.

You might also like