Let’s work on the AddingListOrWord
container.
This screen will have one input field, and the entered value will need to be stored somewhere.
Use useState
for this.
The AddingListOrWord
container itself must return a SafeAreaView
with styles:
flex
- 1, backgroundColor
- colors.blue1
.
The first child of AddingListOrWord
must be a NavigationHeader
component.
The second child must be the View
element. This will be the header.
Header styles: flexDirection
- row
, alignItems
- center
, marginTop
: 18
, paddingLeft
- 12
.
Inside the header there must be an IconButton
component, when clicked, the goBack
method should be called.
The size
property of IconButton
must be 23
, name
- cancel-circle
.
The IconButton
must be followed by a title made with the Text
element. Its styles are:
color
: colors.black
, fontSize
: 18
, fontFamily
: RobotoRegular
, marginLeft
: 12
.
Inside the title, there must be an Add list
text for a screen named ADD_LIST_SCREEN
.
For a screen named ADD_WORD_SCREEN
, the internal title test must be Add word
.
After the title, add a screen body - a View
element with a flex
style of 1
.
Inside it must be an input field container - a View
element with styles:
marginTop
- 29
, paddingHorizontal
- 15
, flexDirection
- row
.
The input field container consists of two elements - the Input
component and the Button
component.
The value of the input field must equal the state values we have already created, and it must be changed in the onChangeText
property.
placeholder
field must have enter list name
for ADD_LIST_SCREEN
and enter word name
for ADD_WORD_SCREEN
screens.
The autoFocus
property of the input field must be true
, and the styles: marginRight
- 14
.
The 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: color
- colors.red
, fontFamily
- RobotoBold
, fontSize
- 14
, textAlign
- center
, marginTop
- 33
.
This task is part of the Full-Stack JavaScript Course.
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.