mirror of
https://github.com/tapframe/NuvioStreaming.git
synced 2026-04-18 07:12:18 +00:00
layout anim
This commit is contained in:
parent
024646579e
commit
707ceb711a
4 changed files with 22 additions and 10 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue