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 twoViewchildren, a left and a right side. The left one with stylesflexis8, justifyContentiscenterand two children areText. The first Textshould display thelistKeyproperty with styles:fontSize-16, color-colors.black, fontFamily-RobotoRegular. The second Textshould display the moment of thecreateAtproperty in the formatDD.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 propertiesname -pencilandcolor-colors.blue. The second element on the right is the text that displays the result of calling getWordsCountwith the propertieswordsandlistKey. 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.