Instructions

Part $1$: Hard Code ToDo List and Form

In your project directory, open the App.jsx file.

Inside the App component, hard code the ToDo list items and the form to add tasks. The code should resemble the attached App.jsx file.

Part $2$: Move Into Separate Files

ToDoList.jsx:

Create a new file named ToDoList.jsx in the project directory.

Copy the ScrollView containing the tasks from App.jsx and paste it into the ToDoList.jsx file.

Import the necessary components and styles into ToDoList.jsx$.$

ToDoForm.jsx:

Create a new file named ToDoForm.jsx in the project directory.

Copy the View containing the input field and button from App.jsx and paste it into the ToDoForm.jsx file.

Import the necessary components and styles into ToDoForm.jsx$.$

Part $3$: Import Separate Components

In App.jsx$,$ import the ToDoList and ToDoForm components.

Replace the hard$-$coded ToDo list and form sections with the components.

Submission Guidelines

GitHub

Create a new public GitHub repository to host your code.

Push all your assignment files $($except the "node$\_$modules" folder$)$ to the GitHub repository.

D$2$L Submission

Compress all the files and folders for your assignment $($except the "node$\_$modules" folder$)$ into a single ZIP file.

Upload the ZIP file to the appropriate assignment drop$-$box on D$2$L$.$

Include the link to your GitHub repository in the comments area.The code for the app.jsx file: $"/**$

$*$ My To Do List App

$*$

$*$ @format

$*/$

import React from 'react';

import $\{$

SafeAreaView,

StyleSheet,

Pressable,

View,

Text,

ScrollView,

TextInput,

Button

$\}$ from 'react$-$native';

function App$()\{$

return $($

Do laundry

Go to gym

Walk dog

$)$;

$\}$

const styles $=$ StyleSheet.create$(\{$

task: $\{$

padding: $10,$

borderBottomWidth: $1,$

borderColor: $\text{'}$#ccc$\text{'},$

$\},$

completed: $\{$

backgroundColor: $\text{'}$#e$0$e$0$e$0\text{'},$

$\},$

taskText: $\{$

fontSize: $16,$

$\},$

form: $\{$

flexDirection: 'row',

justifyContent: 'space$-$between',

alignItems: 'center',

marginHorizontal: $20,$

marginTop: $20,$

$\},$

input: $\{$

flex: $1,$

borderWidth: $1,$

borderColor: $\text{'}$#ccc$\text{'},$

paddingHorizontal: $10,$

paddingVertical: $5,$

marginRight: $10,$

$\},$

$\})$;

export default App;"