Part 3: Final Touches

Finishing Up

Note

Before starting this section, install the latest version of react-native-svg by running the following line in your terminal:

npm install react-native-svg@latest

Your task for this part is to add functionality to the Simple Counter to support additional behaviors:

• When trying to decrement below 0, an error message should appear
• When trying to decrement above 20, an error message should appear
• If performing a valid action, any error message on the screen should disappear

Additionally, try to make the UI look as close as possible to the example below, including the border around the screen area.

Here are some links that may be helpful:

• https://gluestack.io/ui/docs/components/heading
• https://gluestack.io/ui/docs/components/text
• https://gluestack.io/ui/docs/components/button
• https://gluestack.io/ui/docs/components/alert
• https://gluestack.io/ui/docs/components/icon
• https://reactnative.dev/docs/stylesheet

Have fun!