We need to add one more, this time the last, component.
Let’s create it in the src/components/AlertModal folder.
This component must return the Modal element.
The visible property should be cast into it, and the handleClose property should be passed into its onRequestClose property.
The modal should appear from bottom to top and the background should be transparent.
Inside the Modal element add a Pressable element with styles:
flex - 1, alignItems: center, justifyContent - center.
The handleClose property must be passed to its onPress property.
Inside a Pressable there should be only one View element with styles:
alignItems - center, backgroundColor - colors.white, borderRadius- 5,
elevation - 5, margin - 20, padding - 35, shadowColor - colors.black,
shadowOffset - {width: 0, height: 2}, shadowOpacity - 0.25, shadowRadius - 3.84.
Inside this View, we need to add another View - the container for the close button.
Its styles are: position - absolute, width - 50, height - 50, top - -15,
right - -15, justifyContent - center, alignItems - center.
Inside this View there is only one IconButton component with properties:
color - colors.blue, name - cancel-circle, size - 35
The handleClose property must be passed to its onPress property.
After the container of the close button, add the title Text.
The title property must be inside this text. Its styles are:
fontSize - 18, color - colors.black, fontFamily - RobotoRegular,
marginBottom - 15, textAlign - center.
Under the heading add TouchableOpacity with the Delete text.
Button styles: backgroundColor - colors.blue, borderRadius: 5, elevation: 2, padding: 10.
Text styles: fontSize - 17, color - colors.white, fontFamily - RobotoBold, textTransform - uppercase, textAlign: center.
The handleDeleteClick property must be passed into the onPress method of this TouchableOpacity.
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.