diff --git a/App.tsx b/App.tsx index 0b52a801..bd297656 100644 --- a/App.tsx +++ b/App.tsx @@ -17,7 +17,7 @@ import { NavigationContainer } from '@react-navigation/native'; import { GestureHandlerRootView } from 'react-native-gesture-handler'; import { StatusBar } from 'expo-status-bar'; import { Provider as PaperProvider } from 'react-native-paper'; -import { enableScreens } from 'react-native-screens'; +import { enableScreens, enableFreeze } from 'react-native-screens'; import AppNavigator, { CustomNavigationDarkTheme, CustomDarkTheme @@ -71,6 +71,8 @@ LogBox.ignoreLogs([ // This fixes many navigation layout issues by using native screen containers enableScreens(true); +// Freeze non-focused screens to stop background re-renders +enableFreeze(true); // Inner app component that uses the theme context const ThemedApp = () => { diff --git a/src/components/home/HeroCarousel.tsx b/src/components/home/HeroCarousel.tsx index ba09cf2f..773b6a13 100644 --- a/src/components/home/HeroCarousel.tsx +++ b/src/components/home/HeroCarousel.tsx @@ -616,7 +616,7 @@ const CarouselCard: React.FC = memo(({ item, colors, logoFail } ] as StyleProp}> {/* FRONT FACE */} - + {!bannerLoaded && ( @@ -681,7 +681,7 @@ const CarouselCard: React.FC = memo(({ item, colors, logoFail {/* BACK FACE */} - + = ({ +const SeriesContentComponent: React.FC = ({ episodes, selectedSeason, loadingSeasons, @@ -1429,6 +1429,9 @@ export const SeriesContent: React.FC = ({ ); }; +// Export memoized component to reduce unnecessary re-renders when focused +export const SeriesContent = memo(SeriesContentComponent); + const styles = StyleSheet.create({ container: { flex: 1, diff --git a/src/navigation/AppNavigator.tsx b/src/navigation/AppNavigator.tsx index 40592854..7dcd7632 100644 --- a/src/navigation/AppNavigator.tsx +++ b/src/navigation/AppNavigator.tsx @@ -1095,6 +1095,8 @@ const InnerNavigator = ({ initialRouteName }: { initialRouteName?: keyof RootSta initialRouteName={initialRouteName || 'MainTabs'} screenOptions={{ headerShown: false, + // Freeze non-focused stack screens to prevent background re-renders (e.g., SeriesContent behind player) + freezeOnBlur: true, // Use slide_from_right for consistency and smooth transitions animation: Platform.OS === 'android' ? 'slide_from_right' : 'slide_from_right', animationDuration: Platform.OS === 'android' ? 250 : 300,