Cosmo App Rating Widget

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:

import React, { useState } from "react";
import { View, Text, TouchableOpacity, Image } from "react-native";

const StarRating = ({ maxStars = 5 }) => {
  const [rating, setRating] = useState(0);
  const [cosmoMood, setCosmoMood] = useState("default");

  const handleSetRating = (newRating) => {
    setRating(newRating);
    if (newRating === 1) setCosmoMood("confused");
    else if (newRating === maxStars) setCosmoMood("happy");
    else setCosmoMood("default");
  };

  return (
    <View>
      {/* Cosmo's avatar changes based on mood */}
      <Image source={{ uri: getCosmoAvatar(cosmoMood) }} style={{ width: 60, height: 60 }} />
      {/* Render stars */}
      <View style={{ flexDirection: "row" }}>
        {Array.from({ length: maxStars }, (_, i) => (
          <TouchableOpacity key={i} onPress={() => handleSetRating(i + 1)}>
            <Image
              source={{ uri: i < rating ? "filled-star-url" : "outline-star-url" }}
              style={{ width: 32, height: 32 }}
            />
          </TouchableOpacity>
        ))}
      </View>
      <Text>You rated: {rating} / {maxStars}</Text>
    </View>
  );
};

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.