Now let’s add a component that will be an element of the Lists
.
Let’s add it to the src/containers/Lists/List
folder.
First, let’s add the getWordsCount
helper method in the src/containers/Lists/List/helpers.js
file.
This method will receive a list of words as the first argument, and the name of the list as the second.
It should return the number of words for which the listKey
field is equal to the passed list name.
The List
component should return TouchableOpacity
with styles: backgroundColor
- colors.white
,
flexDirection-
row,
height-
55,
borderRadius-
5,
marginVertical-
7,
marginHorizontal-
16,
paddingHorizontal- 10,
shadowOpacity- 0.4,
shadowRadius-
3,
shadowOffset-
{width: 0, height: 1},
shadowColor-
colors.black,
elevation-
3,
borderWidth-
0. A
TouchableOpacitymust have two
Viewchildren, a left and a right side. The left one with styles
flexis
8,
justifyContentis
centerand two children are
Text. The first
Textshould display the
listKeyproperty with styles:
fontSize-
16,
color-
colors.black,
fontFamily-
RobotoRegular. The second
Textshould display the moment of the
createAtproperty in the format
DD.MM.YYYY. Styles:
fontSize-
10,
color-
colors.blackOpacity80,
fontFamily-
RobotoRegular,
fontWeight-
300,
marginTop-
4. Styles for the right side:
flex-
8,
flexDirection-
row,
justifyContent-
flex-end,
alignItems-
center, The first element on the right is the
Iconcomponent with the properties
name -
penciland
color-
colors.blue. The second element on the right is the text that displays the result of calling
getWordsCountwith the properties
wordsand
listKey. The styles of this part are
fontSize-
15,
color-
colors.blue,
fontFamily-
RobotoRegular,
marginLeft-
6`.
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.