fix(native): rename DetailStackHeader to ModalStackHeader and remove hero fade-in animation and continue-watching overlay

- Rename `DetailStackHeader` → `ModalStackHeader` in `modal-stack-header.tsx` and update all import sites (`title/[id].tsx`, `person/[id].tsx`)
- Remove `FadeIn` animation wrapper around `HeroBanner` in the explore screen
- Remove the dark overlay (`rgba(0,0,0,0.4)`) from `ContinueWatchingCard` thumbnail
This commit is contained in:
2026-03-18 17:36:45 -04:00
parent 3c1b7cfe11
commit 466aa5464e
5 changed files with 12 additions and 20 deletions
@@ -3,7 +3,7 @@ import { IconDeviceTv, IconFlame, IconMovie } from "@tabler/icons-react-native";
import { useInfiniteQuery, useQuery } from "@tanstack/react-query"; import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
import { useCallback, useMemo } from "react"; import { useCallback, useMemo } from "react";
import { RefreshControl, ScrollView, View } from "react-native"; import { RefreshControl, ScrollView, View } from "react-native";
import Animated, { FadeIn, FadeInDown } from "react-native-reanimated"; import Animated, { FadeInDown } from "react-native-reanimated";
import { FilterableTitleRow } from "@/components/explore/filterable-title-row"; import { FilterableTitleRow } from "@/components/explore/filterable-title-row";
import { HeroBanner } from "@/components/explore/hero-banner"; import { HeroBanner } from "@/components/explore/hero-banner";
@@ -70,11 +70,7 @@ export default function ExploreScreen() {
refreshControl={<RefreshControl refreshing={isRefreshing} onRefresh={onRefresh} />} refreshControl={<RefreshControl refreshing={isRefreshing} onRefresh={onRefresh} />}
> >
<View className="gap-8"> <View className="gap-8">
{heroItem && ( {heroItem && <HeroBanner item={heroItem} />}
<Animated.View entering={FadeIn.duration(400).withInitialValues({ opacity: 0.01 })}>
<HeroBanner item={heroItem} />
</Animated.View>
)}
<Animated.View entering={FadeInDown.duration(300).delay(100)}> <Animated.View entering={FadeInDown.duration(300).delay(100)}>
<FilterableTitleRow <FilterableTitleRow
+5 -5
View File
@@ -16,7 +16,7 @@ import Animated, { FadeIn, FadeInDown } from "react-native-reanimated";
import { useSafeAreaInsets } from "react-native-safe-area-context"; import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useCSSVariable } from "uniwind"; import { useCSSVariable } from "uniwind";
import { DetailStackHeader } from "@/components/navigation/modal-stack-header"; import { ModalStackHeader } from "@/components/navigation/modal-stack-header";
import { ExpandableText } from "@/components/ui/expandable-text"; import { ExpandableText } from "@/components/ui/expandable-text";
import { Image } from "@/components/ui/image"; import { Image } from "@/components/ui/image";
import { PosterCard } from "@/components/ui/poster-card"; import { PosterCard } from "@/components/ui/poster-card";
@@ -146,7 +146,7 @@ export default function PersonDetailScreen() {
if (isPending) { if (isPending) {
return ( return (
<> <>
<DetailStackHeader /> <ModalStackHeader />
<View <View
className="bg-background flex-1 items-center" className="bg-background flex-1 items-center"
style={{ paddingTop: headerHeight + 24 }} style={{ paddingTop: headerHeight + 24 }}
@@ -171,7 +171,7 @@ export default function PersonDetailScreen() {
if (isError && !data) { if (isError && !data) {
return ( return (
<> <>
<DetailStackHeader /> <ModalStackHeader />
<View <View
className="bg-background flex-1 items-center justify-center" className="bg-background flex-1 items-center justify-center"
style={{ paddingTop: insets.top }} style={{ paddingTop: insets.top }}
@@ -198,7 +198,7 @@ export default function PersonDetailScreen() {
if (!person) { if (!person) {
return ( return (
<> <>
<DetailStackHeader /> <ModalStackHeader />
<View <View
className="bg-background flex-1 items-center justify-center" className="bg-background flex-1 items-center justify-center"
style={{ paddingTop: insets.top }} style={{ paddingTop: insets.top }}
@@ -221,7 +221,7 @@ export default function PersonDetailScreen() {
const listHeader = ( const listHeader = (
<> <>
<DetailStackHeader /> <ModalStackHeader />
{/* Profile hero */} {/* Profile hero */}
<Animated.View <Animated.View
+4 -4
View File
@@ -27,7 +27,7 @@ import {
HorizontalPosterRow, HorizontalPosterRow,
type PosterRowItem, type PosterRowItem,
} from "@/components/dashboard/horizontal-poster-row"; } from "@/components/dashboard/horizontal-poster-row";
import { DetailStackHeader } from "@/components/navigation/modal-stack-header"; import { ModalStackHeader } from "@/components/navigation/modal-stack-header";
import { CastCard } from "@/components/titles/cast-card"; import { CastCard } from "@/components/titles/cast-card";
import { ContinueWatchingBanner } from "@/components/titles/continue-watching-banner"; import { ContinueWatchingBanner } from "@/components/titles/continue-watching-banner";
import { SeasonAccordion } from "@/components/titles/season-accordion"; import { SeasonAccordion } from "@/components/titles/season-accordion";
@@ -198,7 +198,7 @@ export default function TitleDetailScreen() {
if (detail.isPending) { if (detail.isPending) {
return ( return (
<> <>
<DetailStackHeader /> <ModalStackHeader />
<View className="bg-background flex-1"> <View className="bg-background flex-1">
{/* Hero skeleton */} {/* Hero skeleton */}
<Skeleton width="100%" height={300} borderRadius={0} /> <Skeleton width="100%" height={300} borderRadius={0} />
@@ -228,7 +228,7 @@ export default function TitleDetailScreen() {
if (!title) { if (!title) {
return ( return (
<> <>
<DetailStackHeader /> <ModalStackHeader />
<View className="bg-background flex-1 items-center justify-center px-6"> <View className="bg-background flex-1 items-center justify-center px-6">
<IconMovie size={48} color={mutedForeground} /> <IconMovie size={48} color={mutedForeground} />
<Text className="font-display text-foreground mt-3 text-xl"> <Text className="font-display text-foreground mt-3 text-xl">
@@ -252,7 +252,7 @@ export default function TitleDetailScreen() {
contentInsetAdjustmentBehavior={useAutomaticInsets ? "automatic" : "never"} contentInsetAdjustmentBehavior={useAutomaticInsets ? "automatic" : "never"}
contentContainerStyle={titleScrollContentStyle} contentContainerStyle={titleScrollContentStyle}
> >
<DetailStackHeader /> <ModalStackHeader />
{/* Hero */} {/* Hero */}
<View className="h-[300px]" style={heroMarginStyle}> <View className="h-[300px]" style={heroMarginStyle}>
@@ -62,10 +62,6 @@ export function ContinueWatchingCard({ item }: { item: ContinueWatchingItem }) {
contentFit="cover" contentFit="cover"
/> />
)} )}
<View
className="absolute inset-0"
style={{ backgroundColor: "rgba(0,0,0,0.4)" }}
/>
{item.nextEpisode && ( {item.nextEpisode && (
<View className="absolute right-2.5 bottom-3 left-2.5"> <View className="absolute right-2.5 bottom-3 left-2.5">
<Text <Text
@@ -2,7 +2,7 @@ import { useLingui } from "@lingui/react/macro";
import { Stack, useRouter } from "expo-router"; import { Stack, useRouter } from "expo-router";
import { View } from "react-native"; import { View } from "react-native";
export function DetailStackHeader() { export function ModalStackHeader() {
const { dismissAll } = useRouter(); const { dismissAll } = useRouter();
const { t } = useLingui(); const { t } = useLingui();
return ( return (