Creating and Integrating a Custom StarRating Component in TV Apps

⭐

In this section, we’ll create a reusable StarRating component and integrate it into our details screen. This will demonstrate best practices for creating TV-friendly components and enhancing existing screens.

Implementation Guide

Create the StarRating Component

📦

First, create components/StarRating.tsx:

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { scaledPixels } from '@/hooks/useScale';
 
interface StarRatingProps {
  rating: number;
  maxStars?: number;
}
 
export const StarRating: React.FC<StarRatingProps> = ({ rating, maxStars = 5 }) => {
  return (
    <View style={styles.container}>
      {[...Array(maxStars)].map((_, index) => (
        <Ionicons
          key={index}
          name={index < Math.floor(rating) ? 'star' : 'star-outline'}
          size={scaledPixels(24)}
          color="#FFD700"
        />
      ))}
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
  },
});

Key Features:

Uses Ionicons for consistent star icons
Implements responsive scaling via scaledPixels
Accepts configurable rating and max stars

Integrate into Details Screen

🔄

Update app/details.tsx:

import { StarRating } from '../components/StarRating';
 
export default function DetailsScreen() {
  // ... existing imports and setup
 
  return (
    <SpatialNavigationRoot isActive={isFocused}>
      <View style={styles.container}>
        <Image source={headerImage} style={styles.backgroundImage} />
        <View style={styles.contentContainer}>
          <View style={styles.topContent}>
            <Text style={styles.title}>{title}</Text>
            <View style={styles.ratingContainer}>
              <StarRating rating={4.5} />
              <Text style={styles.ratingText}>4.5/5</Text>
            </View>
            <Text style={styles.description}>{description}</Text>
          </View>
        </View>
      </View>
    </SpatialNavigationRoot>
  );
}
 
const useDetailsStyles = function() {
  return StyleSheet.create({
    ratingContainer: {
      flexDirection: 'row',
      alignItems: 'center',
      marginTop: scaledPixels(10),
      marginBottom: scaledPixels(20),
    },
    ratingText: {
      color: '#ffffff',
      fontSize: scaledPixels(18),
      marginLeft: scaledPixels(10),
      textShadowColor: 'rgba(0, 0, 0, 0.75)',
      textShadowOffset: { width: -1, height: 1 },
      textShadowRadius: 10,
    },
  });
};

TV Interface Considerations

📺

When implementing UI components for TV make sure you consider these best practices:

Visibility
- Use appropriate scaling for viewing distance
- Ensure sufficient size for recognition
Contrast
- Maintain readability against varying backgrounds
- Consider adding subtle shadows for clarity
Focus Management
- Decide if component should be focusable and if it’s focusable handle this correctly
Performance
- If you have animations keep them simple! Thank you performance!
- Consider using features flags to deactivate animations on lower-end devices

Enhancement Exercises

💻

Try these exercises to enhance the StarRating component:

Make Rating Dynamic

Pass rating data from previous screen

Add Interactivity

Implement focusable rating component

Add Animations

Create smooth loading animations

✅

Success Criteria:

Stars are clearly visible at viewing distance of 10 feet
Rating scales appropriately across screens
Focus management works smoothly
Performance remains smooth on all devices
Component is reusable across app

Exploring the Details screen Multi platform development