Netflix-Style OTT Streaming Home in React Native — Hero Banner + Progress Bars
A Netflix-style streaming home with an Unsplash hero banner, a Continue Watching row with per-show purple progress bars keyed to show ID, a Trending grid with rank badges, and a +My List button with withSpring(1.3).
▸ Watch on
Open reelNetflix-Style OTT Streaming Home in React Native 🎬
Hero banner. Continue watching. Trending now. All built with real Unsplash images and zero streaming libraries.
Continue Watching — per-show progress bars
const WATCH_PCT: Record<string, number> = {
show_1: 0.72, // 72% watched
show_2: 0.38,
show_3: 0.91,
};
// In each card:
<View style={[styles.progressBar, { width: `${WATCH_PCT[show.id] * 100}%` }]} />Each show has its own progress percentage keyed to its ID in a plain object. No playback state, no API — just a data map.
Trending Now — rank badges
{TRENDING.map((show, i) => (
<View key={show.id} style={styles.trendCard}>
<Text style={styles.rankBadge}>#{i + 1}</Text>
<Image source={{ uri: show.image }} style={styles.trendImg} />
</View>
))}+My List button spring
listScale.value = withSpring(1.3, { damping: 5, stiffness: 400 }, () => {
listScale.value = withSpring(1, { damping: 8, stiffness: 300 });
});The +My List button has its own Animated.View wrapper — separate from the card scale so it can spring independently.
Stack: React Native · Reanimated 3 · expo-linear-gradient · TypeScript
I'm available for freelance & contract React Native work — apps, features, UI implementation, you name it.