Let’s work on the
This screen will have one input field, and the entered value will need to be stored somewhere.
useState for this.
AddingListOrWord container itself must return a
SafeAreaView with styles:
flex - 1,
The first child of
AddingListOrWord must be a
The second child must be the
View element. This will be the header.
Inside the header there must be an
IconButton component, when clicked, the
goBack method should be called.
size property of
IconButton must be
IconButton must be followed by a title made with the
Text element. Its styles are:
Inside the title, there must be an
Add list text for a screen named
For a screen named
ADD_WORD_SCREEN, the internal title test must be
After the title, add a screen body - a
View element with a
flex style of
Inside it must be an input field container - a
View element with styles:
The input field container consists of two elements - the
Input component and the
The value of the input field must equal the state values we have already created, and it must be changed in the
placeholder field must have
enter list name for
enter word name for
autoFocus property of the input field must be
true, and the styles:
text of the
Button component must be equal to
Add, and the
loading property is forwarded from the container properties.
If the container has a defined
error property, it should be displayed inside the
Text element after the screen body.
Its styles are:
If you have any issues with it, you can ask for community help below the post.
Feel free to help others if you’ve already solved the task.