Search⌘ K

The New Component

Explore how to create a new task component in a React Native todo application. Understand using NativeBase inputs, managing state for title and errors, validating input length, and storing tasks with AsyncStorage. Learn to generate unique IDs and implement navigation back to the home screen after task submission.

The New component is used to add new task items to the to-do list. A Fab will appear at the bottom left in the Home component, which will be used to navigate to the New component.

{
  "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
  "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
}
The to-do list application

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

Code explanation

The New.js screen needs two states:

  • title: The title of the new item.
  • error
...