Now is the time to work on the Word component. It will expand and collapse word details.
To do this, add a flag using the useState hook. The initial value is false.
The Word component must return a View element, inside which there will be a TouchableOpacity with styles:
height - 53, flexDirection - row, justifyContent - space-between, alignItems - center, marginVertical - 7,
backgroundColor - colors.white, borderRadius - 5, paddingHorizontal - 17, borderWidth - 0, shadowOpacity - 0.4,
shadowOffset - {width: 0, height: 1}, shadowColor - colors.black, elevation - 3, marginHorizontal - 16, shadowRadius - 3.
When clicking on TouchableOpacity, the flag should toggle to the opposite value
The first child of the TouchableOpacity must be a Text, which outputs the word property.
Its styles are: fontSize - 16, color - colors.blackOpacity80, fontFamily - RobotoRegular.
The second child of the TouchableOpacity must be the View icon container.
Its styles are: flexDirection - row, justifyContent - space-between, alignItems - center.
Icon group consists of two IconButton components with properties size - 20, color - colors.blue and style.marginLeft - 19
When clicking on the first flag, it should switch to the opposite value
If the flag is true - name the first IconButton must be up-open-big, otherwise - down-open-big
The second IconButton must have a name property trash.
The dispatchDeleteWord property must be forwarded to onPress by the second IconButton.
We will connect it in the next steps.
After TouchableOpacity, show View if the flag is true.
We’ll show the word details here. The marginHorizontal should be 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.