diff --git a/src/components/home/CatalogSection.tsx b/src/components/home/CatalogSection.tsx index 792429c0..1f344fb3 100644 --- a/src/components/home/CatalogSection.tsx +++ b/src/components/home/CatalogSection.tsx @@ -77,10 +77,9 @@ const CatalogSection = ({ catalog }: CatalogSectionProps) => { const keyExtractor = useCallback((item: StreamingContent) => `${item.id}-${item.type}`, []); return ( - diff --git a/src/components/home/ContinueWatchingSection.tsx b/src/components/home/ContinueWatchingSection.tsx index 63714e02..f6b0a387 100644 --- a/src/components/home/ContinueWatchingSection.tsx +++ b/src/components/home/ContinueWatchingSection.tsx @@ -726,10 +726,9 @@ const ContinueWatchingSection = React.forwardRef((props, re } return ( - diff --git a/src/components/home/ThisWeekSection.tsx b/src/components/home/ThisWeekSection.tsx index 19c46ff2..b58d5b94 100644 --- a/src/components/home/ThisWeekSection.tsx +++ b/src/components/home/ThisWeekSection.tsx @@ -185,10 +185,9 @@ export const ThisWeekSection = React.memo(() => { }; return ( - diff --git a/src/screens/HomeScreen.tsx b/src/screens/HomeScreen.tsx index 0543ca71..ee93c7e5 100644 --- a/src/screens/HomeScreen.tsx +++ b/src/screens/HomeScreen.tsx @@ -124,6 +124,16 @@ const HomeScreen = () => { const totalCatalogsRef = useRef(0); const [visibleCatalogCount, setVisibleCatalogCount] = useState(5); // Reduced for memory const insets = useSafeAreaInsets(); + + // Stabilize insets to prevent iOS layout shifts + const [stableInsetsTop, setStableInsetsTop] = useState(insets.top); + useEffect(() => { + // Only update insets after initial mount to prevent shifting + const timer = setTimeout(() => { + setStableInsetsTop(insets.top); + }, 100); + return () => clearTimeout(timer); + }, [insets.top]); const { featuredContent, @@ -653,15 +663,11 @@ const HomeScreen = () => { const renderListItem = useCallback(({ item }: { item: HomeScreenListItem; index: number }) => { switch (item.type) { case 'thisWeek': - return {memoizedThisWeekSection}; + return memoizedThisWeekSection; case 'continueWatching': return null; // Moved to ListHeaderComponent to avoid remounts on scroll case 'catalog': - return ( - - - - ); + return ; case 'placeholder': return ( @@ -701,7 +707,7 @@ const HomeScreen = () => { ); case 'welcome': - return ; + return ; default: return null; } @@ -747,10 +753,10 @@ const HomeScreen = () => { } }, [toggleHeader]); - // Memoize content container style - const contentContainerStyle = useMemo(() => - StyleSheet.flatten([styles.scrollContent, { paddingTop: insets.top }]), - [insets.top] + // Memoize content container style - use stable insets to prevent iOS shifting + const contentContainerStyle = useMemo(() => + StyleSheet.flatten([styles.scrollContent, { paddingTop: stableInsetsTop }]), + [stableInsetsTop] ); // Memoize the main content section @@ -775,7 +781,7 @@ const HomeScreen = () => { onEndReached={handleLoadMoreCatalogs} onEndReachedThreshold={0.6} recycleItems={true} - maintainVisibleContentPosition + maintainVisibleContentPosition={Platform.OS !== 'ios'} // Disable on iOS to prevent shifting onScroll={handleScroll} /> {/* Toasts are rendered globally at root */} @@ -1341,4 +1347,5 @@ const HomeScreenWithFocusSync = (props: any) => { return ; }; -export default React.memo(HomeScreenWithFocusSync); \ No newline at end of file +export default React.memo(HomeScreenWithFocusSync); +