Welcome to Lesson 4 of the introduction to props and event handlers in React Native course! In our previous lessons, you learned how to pass data between components using props, manage state with the useState hook, and make your UI more interactive with event handlers and conditional rendering. Each of these skills is essential for building modern, user-friendly mobile apps. In this lesson, we’ll bring these concepts together by building a Cosmo-themed app rating widget — a practical, real-world component that lets users rate your app and see instant feedback. This lesson will help you see how state, event handlers, and dynamic rendering work together in a single, cohesive feature.

User feedback is a cornerstone of successful mobile applications. Ratings not only help developers understand what users like or dislike, but they also encourage engagement and trust among new users. By providing a simple and fun way for users to rate your app, you make it easier for them to share their opinions and for you to gather valuable insights. In this lesson, we’ll focus on building a star rating widget featuring Cosmo, our friendly mascot, to make the feedback process both interactive and enjoyable.

Let’s look at the challenge we’re solving. We want to create a widget that allows users to tap on stars to rate the app, and we want Cosmo’s mood to change based on the rating. The widget should:

• Display a row of stars (for example, 5 stars).
• Allow the user to tap a star to set their rating.
• Visually fill in the selected number of stars.
• Show Cosmo’s avatar, which changes expression depending on the rating (for example, happy for 5 stars, confused for 1 star).
• Display the current rating numerically.

This problem is a great opportunity to practice using state to track the rating, event handlers to respond to user taps, and dynamic rendering to update the UI in real time.

To solve this problem, we’ll use the useState hook to keep track of the user’s rating and Cosmo’s mood. We’ll render a row of stars, and each star will be a button (using TouchableOpacity) that updates the rating when pressed. After the user taps a star, we’ll update both the rating and Cosmo’s mood accordingly.

Let’s look at a simplified version of the core logic:

In this example, we use useState to store the current rating and Cosmo’s mood. The handleSetRating function updates both pieces of state. The stars are rendered in a row, and each one is clickable. When a star is tapped, the rating updates, and Cosmo’s avatar changes if needed.

Now, let’s look at a more complete version of the Cosmo app rating widget, including some basic styles and the logic for changing Cosmo’s avatar:

In this code, we define two state variables: rating and cosmoMood. The handleSetRating function updates both when a user taps a star. The and objects store the URLs for Cosmo’s different moods and the star images. The UI displays Cosmo’s avatar, a title, the row of stars, and the current rating. Each star is a button that updates the rating and Cosmo’s mood when pressed.

In this lesson, you learned how to build a Cosmo-themed app rating widget by combining state management, event handling, and dynamic rendering. We explored how to track the user’s rating, update the UI in response to user actions, and provide instant visual feedback with Cosmo’s changing expressions. This widget is a great example of how the concepts you’ve learned so far — props, state, and event handlers — come together to create interactive, user-friendly components.

You’re now ready to put these ideas into practice. In the next exercise, you’ll build and customize your own Cosmo app rating widget, reinforcing your understanding and preparing you for even more advanced React Native features. Let’s get started!