The Home Component

Take a look at the inner workings of the Home component.

The Home component acts as the main screen to display the to-do list.

{
  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
}
The Home component

Note: Once the server starts, click the URL next to “Your app can be found at:” to view the output.

Code explanation

There are two states in this app:

  • isloading: This is used to show the loading animation while the data is being fetched from the AsyncStorage.
  • list: This is used to store the list of tasks in the list.

The useIsFocused hook

This hook is used to check whether the screen is currently being shown or focused. It will be added to the useEffect hook in the dependency array so we can fetch the data each time the screen is focused.

Colors

We use a few pastel ...