layout anim

This commit is contained in:
tapframe 2025-10-18 23:34:43 +05:30
parent 024646579e
commit 707ceb711a
4 changed files with 22 additions and 10 deletions

View file

@ -7,7 +7,7 @@ import { LinearGradient } from 'expo-linear-gradient';
import { CatalogContent, StreamingContent } from '../../services/catalogService';
import { useTheme } from '../../contexts/ThemeContext';
import ContentItem from './ContentItem';
import Animated, { FadeIn } from 'react-native-reanimated';
import Animated, { FadeIn, Layout } from 'react-native-reanimated';
import { RootStackParamList } from '../../navigation/AppNavigator';
interface CatalogSectionProps {
@ -77,7 +77,11 @@ const CatalogSection = ({ catalog }: CatalogSectionProps) => {
const keyExtractor = useCallback((item: StreamingContent) => `${item.id}-${item.type}`, []);
return (
<Animated.View style={styles.catalogContainer} entering={FadeIn.duration(400)}>
<Animated.View
style={styles.catalogContainer}
entering={FadeIn.duration(400)}
layout={Layout.springify().damping(15).stiffness(150)}
>
<View style={styles.catalogHeader}>
<View style={styles.titleContainer}>
<Text style={[styles.catalogTitle, { color: currentTheme.colors.text }]} numberOfLines={1}>{catalog.name}</Text>

View file

@ -10,7 +10,7 @@ import {
ActivityIndicator
} from 'react-native';
import { FlashList } from '@shopify/flash-list';
import Animated, { FadeIn } from 'react-native-reanimated';
import Animated, { FadeIn, Layout } from 'react-native-reanimated';
import { useNavigation, useFocusEffect } from '@react-navigation/native';
import { NavigationProp } from '@react-navigation/native';
import { RootStackParamList } from '../../navigation/AppNavigator';
@ -726,7 +726,11 @@ const ContinueWatchingSection = React.forwardRef<ContinueWatchingRef>((props, re
}
return (
<Animated.View style={styles.container} entering={FadeIn.duration(350)}>
<Animated.View
style={styles.container}
entering={FadeIn.duration(350)}
layout={Layout.springify().damping(15).stiffness(150)}
>
<View style={styles.header}>
<View style={styles.titleContainer}>
<Text style={[styles.title, { color: currentTheme.colors.text }]}>Continue Watching</Text>

View file

@ -18,7 +18,7 @@ import { useTraktContext } from '../../contexts/TraktContext';
import { useLibrary } from '../../hooks/useLibrary';
import { RootStackParamList } from '../../navigation/AppNavigator';
import { parseISO, isThisWeek, format, isAfter, isBefore } from 'date-fns';
import Animated, { FadeIn } from 'react-native-reanimated';
import Animated, { FadeIn, Layout } from 'react-native-reanimated';
import { useCalendarData } from '../../hooks/useCalendarData';
import { memoryManager } from '../../utils/memoryManager';
import { tmdbService } from '../../services/tmdbService';
@ -185,7 +185,11 @@ export const ThisWeekSection = React.memo(() => {
};
return (
<Animated.View style={styles.container} entering={FadeIn.duration(350)}>
<Animated.View
style={styles.container}
entering={FadeIn.duration(350)}
layout={Layout.springify().damping(15).stiffness(150)}
>
<View style={styles.header}>
<View style={styles.titleContainer}>
<Text style={[styles.title, { color: currentTheme.colors.text }]}>This Week</Text>

View file

@ -29,7 +29,7 @@ import { Stream } from '../types/metadata';
import { MaterialIcons } from '@expo/vector-icons';
import { LinearGradient } from 'expo-linear-gradient';
import FastImage from '@d11/react-native-fast-image';
import Animated, { FadeIn } from 'react-native-reanimated';
import Animated, { FadeIn, Layout } from 'react-native-reanimated';
import { PanGestureHandler } from 'react-native-gesture-handler';
import {
Gesture,
@ -653,12 +653,12 @@ const HomeScreen = () => {
const renderListItem = useCallback(({ item }: { item: HomeScreenListItem; index: number }) => {
switch (item.type) {
case 'thisWeek':
return <Animated.View>{memoizedThisWeekSection}</Animated.View>;
return <Animated.View layout={Layout.springify().damping(15).stiffness(150)}>{memoizedThisWeekSection}</Animated.View>;
case 'continueWatching':
return null; // Moved to ListHeaderComponent to avoid remounts on scroll
case 'catalog':
return (
<Animated.View>
<Animated.View layout={Layout.springify().damping(15).stiffness(150)}>
<CatalogSection catalog={item.catalog} />
</Animated.View>
);
@ -701,7 +701,7 @@ const HomeScreen = () => {
</Animated.View>
);
case 'welcome':
return <Animated.View><FirstTimeWelcome /></Animated.View>;
return <Animated.View layout={Layout.springify().damping(15).stiffness(150)}><FirstTimeWelcome /></Animated.View>;
default:
return null;
}