Task #3801, Stage #7 - Vocabulary Builder app

Let’s work on the Lists screen. It should return a snippet with two SafeAreaView elements.
The first one should have styles: flex: 1, backgroundColor - colors.blue.
Second: flex: 0, backgroundColor: colors.blue1.
Further, all elements will be added inside the first SafeAreaView.
The first will be the NavigationHeader component with the barStyle property equal to light.
After it add a View element with styles: flex - 0.5, paddingBottom - 25, paddingLeft - 20.
Let’s call this the View header. Inside the header, add another View - an info block.
Info block styles - flex - 1, flexDirection - row, height - 40, maxHeight - 40.
Inside the info block, add two View (list block and word block) with two Text elements each (count and label).
Block styles list - width - 66, alignItems - center, justifyContent: center.
Word block styles - width - 81, alignItems - center, justifyContent: center, borderLeftWidth: 2, borderColor: colors.white.
The styles of the first text element of each list and word block are: fontSize - 22, color - colors.white, fontFamily - RobotoBold.
The styles of the second text element of each list and word block are: fontSize - 12, color - colors.blue2, fontFamily - RobotoRegular.
The first label should display the text Lists, the second one should display the text Words.
After the header, add the screen body - a View element with styles: flex - 8, backgroundColor - colors.blue1, borderTopLeftRadius - 15, borderTopRightRadius - 15.
The first child must be the text My dictionary with the following styles:
fontSize - 20, color - colors.black, fontFamily - RobotoRegular, marginTop - 26, marginLeft - 16.
This text should be followed by a FlatList element with the style marginVertical - 21.
And after the FlatList add the RadialButton component.

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.