Enhance navigation and layout consistency across the app; integrate native screens for improved performance, update header visibility logic in NuvioHeader, and implement fixed layout dimensions in AppNavigator. Refactor screens to ensure consistent status bar settings and header spacing, while optimizing content rendering in DiscoverScreen, LibraryScreen, and SettingsScreen for better user experience.

App.tsx

@@ -14,6 +14,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 AppNavigator, { 
   CustomNavigationDarkTheme,
   CustomDarkTheme
@@ -23,6 +24,9 @@ import { CatalogProvider } from './src/contexts/CatalogContext';
 import { GenreProvider } from './src/contexts/GenreContext';
 import { TraktProvider } from './src/contexts/TraktContext';
 
+// This fixes many navigation layout issues by using native screen containers
+enableScreens(true);
+
 function App(): React.JSX.Element {
   // Always use dark mode
   const isDarkMode = true;
@@ -33,7 +37,11 @@ function App(): React.JSX.Element {
         <CatalogProvider>
           <TraktProvider>
             <PaperProvider theme={CustomDarkTheme}>
-              <NavigationContainer theme={CustomNavigationDarkTheme}>
+              <NavigationContainer 
+                theme={CustomNavigationDarkTheme}
+                // Disable automatic linking which can cause layout issues
+                linking={undefined}
+              >
                 <View style={[styles.container, { backgroundColor: '#000000' }]}>
                   <StatusBar
                     style="light"

src/components/NuvioHeader.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { View, TouchableOpacity, Platform, StyleSheet, Image } from 'react-native';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
 import { colors } from '../styles/colors';
-import { useNavigation } from '@react-navigation/native';
+import { useNavigation, useRoute } from '@react-navigation/native';
 import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import type { RootStackParamList } from '../navigation/AppNavigator';
 import { BlurView as ExpoBlurView } from 'expo-blur';
@@ -13,6 +13,12 @@ type NavigationProp = NativeStackNavigationProp<RootStackParamList>;
 
 export const NuvioHeader = () => {
   const navigation = useNavigation<NavigationProp>();
+  const route = useRoute();
+
+  // Only render the header if the current route is 'Home'
+  if (route.name !== 'Home') {
+    return null;
+  }
   
   // Determine if running in Expo Go
   const isExpoGo = Constants.executionEnvironment === ExecutionEnvironment.StoreClient;

src/navigation/AppNavigator.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import { NavigationContainer, DefaultTheme as NavigationDefaultTheme, DarkTheme as NavigationDarkTheme, Theme, NavigationProp } from '@react-navigation/native';
 import { createNativeStackNavigator, NativeStackNavigationOptions, NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { createBottomTabNavigator, BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
-import { useColorScheme, Platform, Animated, StatusBar, TouchableOpacity, View, Text } from 'react-native';
+import { useColorScheme, Platform, Animated, StatusBar, TouchableOpacity, View, Text, AppState } from 'react-native';
 import { PaperProvider, MD3DarkTheme, MD3LightTheme, adaptNavigationTheme } from 'react-native-paper';
 import type { MD3Theme } from 'react-native-paper';
 import type { BottomTabBarProps } from '@react-navigation/bottom-tabs';
@@ -12,6 +12,7 @@ import { BlurView } from 'expo-blur';
 import { colors } from '../styles/colors';
 import { NuvioHeader } from '../components/NuvioHeader';
 import { Stream } from '../types/streams';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 // Import screens with their proper types
 import HomeScreen from '../screens/HomeScreen';
@@ -320,6 +321,65 @@ const TabIcon = React.memo(({ focused, color, iconName }: {
   );
 });
 
+// Update the TabScreenWrapper component with fixed layout dimensions
+const TabScreenWrapper: React.FC<{children: React.ReactNode}> = ({ children }) => {
+  // Force consistent status bar settings
+  useEffect(() => {
+    const applyStatusBarConfig = () => {
+      StatusBar.setBarStyle('light-content');
+      StatusBar.setTranslucent(true);
+      StatusBar.setBackgroundColor('transparent');
+    };
+    
+    applyStatusBarConfig();
+    
+    // Apply status bar config on every focus
+    const subscription = Platform.OS === 'android' 
+      ? AppState.addEventListener('change', (state) => {
+          if (state === 'active') {
+            applyStatusBarConfig();
+          }
+        })
+      : { remove: () => {} };
+      
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
+  return (
+    <View style={{ 
+      flex: 1, 
+      backgroundColor: colors.darkBackground,
+      // Lock the layout to prevent shifts
+      position: 'relative',
+      overflow: 'hidden'
+    }}>
+      {/* Reserve consistent space for the header area on all screens */}
+      <View style={{ 
+        height: Platform.OS === 'android' ? 80 : 60, 
+        width: '100%', 
+        backgroundColor: colors.darkBackground,
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        zIndex: -1
+      }} />
+      {children}
+    </View>
+  );
+};
+
+// Add this component to wrap each screen in the tab navigator
+const WrappedScreen: React.FC<{Screen: React.ComponentType<any>}> = ({ Screen }) => {
+  return (
+    <TabScreenWrapper>
+      <Screen />
+    </TabScreenWrapper>
+  );
+};
+
 // Tab Navigator
 const MainTabs = () => {
   // Always use dark mode
@@ -454,6 +514,14 @@ const MainTabs = () => {
   };
   
   return (
+    <View style={{ flex: 1, backgroundColor: colors.darkBackground }}>
+      {/* Common StatusBar for all tabs */}
+      <StatusBar
+        translucent
+        barStyle="light-content"
+        backgroundColor="transparent"
+      />
+      
       <Tab.Navigator
         tabBar={renderTabBar}
         screenOptions={({ route }) => ({
@@ -493,6 +561,14 @@ const MainTabs = () => {
             fontWeight: '600',
             marginTop: 0,
           },
+          // Completely disable animations between tabs for better performance
+          animationEnabled: false,
+          // Keep all screens mounted and active
+          lazy: false,
+          freezeOnBlur: false,
+          detachPreviousScreen: false,
+          // Configure how the screen renders
+          detachInactiveScreens: false,
           tabBarBackground: () => (
             Platform.OS === 'ios' ? (
               <BlurView
@@ -529,37 +605,47 @@ const MainTabs = () => {
           ),
           header: () => route.name === 'Home' ? <NuvioHeader /> : null,
           headerShown: route.name === 'Home',
+          // Add fixed screen styling to help with consistency
+          contentStyle: {
+            backgroundColor: colors.darkBackground,
+          },
         })}
+        // Global configuration for the tab navigator
+        detachInactiveScreens={false}
       >
         <Tab.Screen 
           name="Home" 
-        component={HomeScreen as any}
+          component={HomeScreen}
           options={{ 
             tabBarLabel: 'Home',
           }}
         />
         <Tab.Screen 
           name="Discover"
-        component={DiscoverScreen as any}
+          component={DiscoverScreen}
           options={{ 
-          tabBarLabel: 'Discover'
+            tabBarLabel: 'Discover',
+            headerShown: false
           }}
         />
         <Tab.Screen 
           name="Library" 
-        component={LibraryScreen as any}
+          component={LibraryScreen}
           options={{ 
-          tabBarLabel: 'Library'
+            tabBarLabel: 'Library',
+            headerShown: false
           }}
         />
         <Tab.Screen 
           name="Settings" 
-        component={SettingsScreen as any}
+          component={SettingsScreen}
           options={{ 
-          tabBarLabel: 'Settings'
+            tabBarLabel: 'Settings',
+            headerShown: false
           }}
         />
       </Tab.Navigator>
+    </View>
   );
 };
 
@@ -569,7 +655,7 @@ const AppNavigator = () => {
   const isDarkMode = true;
   
   return (
-    <>
+    <SafeAreaProvider>
       <StatusBar
         translucent
         backgroundColor="transparent"
@@ -579,7 +665,12 @@ const AppNavigator = () => {
         <Stack.Navigator
           screenOptions={{
             headerShown: false,
-            animation: Platform.OS === 'android' ? 'fade_from_bottom' : 'default',
+            // Disable animations for smoother transitions
+            animation: 'none',
+            // Ensure content is not popping in and out
+            contentStyle: {
+              backgroundColor: colors.darkBackground,
+            }
           }}
         >
           <Stack.Screen 
@@ -734,7 +825,7 @@ const AppNavigator = () => {
           />
         </Stack.Navigator>
       </PaperProvider>
-    </>
+    </SafeAreaProvider>
   );
 };
 

src/screens/DiscoverScreen.tsx

@@ -24,6 +24,7 @@ import { LinearGradient } from 'expo-linear-gradient';
 import { RootStackParamList } from '../navigation/AppNavigator';
 import { logger } from '../utils/logger';
 import { BlurView } from 'expo-blur';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 interface Category {
   id: string;
@@ -281,10 +282,24 @@ const useStyles = () => {
       flex: 1,
       backgroundColor: colors.darkBackground,
     },
+    headerBackground: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      backgroundColor: colors.darkBackground,
+      zIndex: 1,
+    },
+    contentContainer: {
+      flex: 1,
+      backgroundColor: colors.darkBackground,
+    },
     header: {
       paddingHorizontal: 20,
-      paddingVertical: 16,
-      paddingTop: Platform.OS === 'android' ? ANDROID_STATUSBAR_HEIGHT + 16 : 16,
+      justifyContent: 'flex-end',
+      paddingBottom: 8,
+      backgroundColor: 'transparent',
+      zIndex: 2,
     },
     headerContent: {
       flexDirection: 'row',
@@ -487,6 +502,24 @@ const DiscoverScreen = () => {
   const [allContent, setAllContent] = useState<StreamingContent[]>([]);
   const [loading, setLoading] = useState(true);
   const styles = useStyles();
+  const insets = useSafeAreaInsets();
+
+  // Force consistent status bar settings
+  useEffect(() => {
+    const applyStatusBarConfig = () => {
+      StatusBar.setBarStyle('light-content');
+      if (Platform.OS === 'android') {
+        StatusBar.setTranslucent(true);
+        StatusBar.setBackgroundColor('transparent');
+      }
+    };
+    
+    applyStatusBarConfig();
+    
+    // Re-apply on focus
+    const unsubscribe = navigation.addListener('focus', applyStatusBarConfig);
+    return unsubscribe;
+  }, [navigation]);
 
   // Load content when category or genre changes
   useEffect(() => {
@@ -580,17 +613,18 @@ const DiscoverScreen = () => {
   // Memoize list key extractor
   const catalogKeyExtractor = useCallback((item: GenreCatalog) => item.genre, []);
 
+  const headerBaseHeight = Platform.OS === 'android' ? 80 : 60;
+  const topSpacing = Platform.OS === 'android' ? (StatusBar.currentHeight || 0) : insets.top;
+  const headerHeight = headerBaseHeight + topSpacing;
+
   return (
-    <SafeAreaView style={styles.container}>
-      <StatusBar
-        barStyle="light-content"
-        backgroundColor="transparent"
-        translucent
-      />
+    <View style={styles.container}>
+      {/* Fixed position header background to prevent shifts */}
+      <View style={[styles.headerBackground, { height: headerHeight }]} />
       
       <View style={{ flex: 1 }}>
-        {/* Header Section */}
-        <View style={styles.header}>
+        {/* Header Section with proper top spacing */}
+        <View style={[styles.header, { height: headerHeight, paddingTop: topSpacing }]}>
           <View style={styles.headerContent}>
             <Text style={styles.headerTitle}>Discover</Text>
             <TouchableOpacity 
@@ -607,6 +641,8 @@ const DiscoverScreen = () => {
           </View>
         </View>
         
+        {/* Rest of the content */}
+        <View style={styles.contentContainer}>
           {/* Categories Section */}
           <View style={styles.categoryContainer}>
             <View style={styles.categoriesContent}>
@@ -666,7 +702,8 @@ const DiscoverScreen = () => {
             </View>
           )}
         </View>
-    </SafeAreaView>
+      </View>
+    </View>
   );
 };
 

src/screens/LibraryScreen.tsx

@@ -24,6 +24,7 @@ import { catalogService } from '../services/catalogService';
 import type { StreamingContent } from '../services/catalogService';
 import { RootStackParamList } from '../navigation/AppNavigator';
 import { logger } from '../utils/logger';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 // Types
 interface LibraryItem extends StreamingContent {
@@ -97,6 +98,24 @@ const LibraryScreen = () => {
   const [loading, setLoading] = useState(true);
   const [libraryItems, setLibraryItems] = useState<LibraryItem[]>([]);
   const [filter, setFilter] = useState<'all' | 'movies' | 'series'>('all');
+  const insets = useSafeAreaInsets();
+
+  // Force consistent status bar settings
+  useEffect(() => {
+    const applyStatusBarConfig = () => {
+      StatusBar.setBarStyle('light-content');
+      if (Platform.OS === 'android') {
+        StatusBar.setTranslucent(true);
+        StatusBar.setBackgroundColor('transparent');
+      }
+    };
+    
+    applyStatusBarConfig();
+    
+    // Re-apply on focus
+    const unsubscribe = navigation.addListener('focus', applyStatusBarConfig);
+    return unsubscribe;
+  }, [navigation]);
 
   useEffect(() => {
     const loadLibrary = async () => {
@@ -216,20 +235,25 @@ const LibraryScreen = () => {
     );
   };
 
-  return (
-    <SafeAreaView style={styles.container}>
-      <StatusBar
-        barStyle="light-content"
-        backgroundColor="transparent"
-        translucent
-      />
+  const headerBaseHeight = Platform.OS === 'android' ? 80 : 60;
+  const topSpacing = Platform.OS === 'android' ? (StatusBar.currentHeight || 0) : insets.top;
+  const headerHeight = headerBaseHeight + topSpacing;
 
-      <View style={styles.header}>
+  return (
+    <View style={styles.container}>
+      {/* Fixed position header background to prevent shifts */}
+      <View style={[styles.headerBackground, { height: headerHeight }]} />
+      
+      <View style={{ flex: 1 }}>
+        {/* Header Section with proper top spacing */}
+        <View style={[styles.header, { height: headerHeight, paddingTop: topSpacing }]}>
           <View style={styles.headerContent}>
             <Text style={styles.headerTitle}>Library</Text>
           </View>
         </View>
 
+        {/* Content Container */}
+        <View style={styles.contentContainer}>
           <View style={styles.filtersContainer}>
             {renderFilter('all', 'All', 'apps')}
             {renderFilter('movies', 'Movies', 'movie')}
@@ -273,7 +297,9 @@ const LibraryScreen = () => {
               removeClippedSubviews={Platform.OS === 'android'}
             />
           )}
-    </SafeAreaView>
+        </View>
+      </View>
+    </View>
   );
 };
 
@@ -282,10 +308,24 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: colors.darkBackground,
   },
+  headerBackground: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    backgroundColor: colors.darkBackground,
+    zIndex: 1,
+  },
+  contentContainer: {
+    flex: 1,
+    backgroundColor: colors.darkBackground,
+  },
   header: {
     paddingHorizontal: 20,
-    paddingVertical: 16,
-    paddingTop: Platform.OS === 'android' ? ANDROID_STATUSBAR_HEIGHT + 16 : 16,
+    justifyContent: 'flex-end',
+    paddingBottom: 8,
+    backgroundColor: 'transparent',
+    zIndex: 2,
   },
   headerContent: {
     flexDirection: 'row',

src/screens/SettingsScreen.tsx

@@ -26,6 +26,7 @@ import { stremioService } from '../services/stremioService';
 import { useCatalogContext } from '../contexts/CatalogContext';
 import { useTraktContext } from '../contexts/TraktContext';
 import { catalogService, DataSource } from '../services/catalogService';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 const { width } = Dimensions.get('window');
 
@@ -125,6 +126,7 @@ const SettingsScreen: React.FC = () => {
   const navigation = useNavigation<NavigationProp<RootStackParamList>>();
   const { lastUpdate } = useCatalogContext();
   const { isAuthenticated, userProfile } = useTraktContext();
+  const insets = useSafeAreaInsets();
   
   // States for dynamic content
   const [addonCount, setAddonCount] = useState<number>(0);
@@ -132,6 +134,23 @@ const SettingsScreen: React.FC = () => {
   const [mdblistKeySet, setMdblistKeySet] = useState<boolean>(false);
   const [discoverDataSource, setDiscoverDataSource] = useState<DataSource>(DataSource.STREMIO_ADDONS);
 
+  // Force consistent status bar settings
+  useEffect(() => {
+    const applyStatusBarConfig = () => {
+      StatusBar.setBarStyle('light-content');
+      if (Platform.OS === 'android') {
+        StatusBar.setTranslucent(true);
+        StatusBar.setBackgroundColor('transparent');
+      }
+    };
+    
+    applyStatusBarConfig();
+    
+    // Re-apply on focus
+    const unsubscribe = navigation.addListener('focus', applyStatusBarConfig);
+    return unsubscribe;
+  }, [navigation]);
+
   const loadData = useCallback(async () => {
     try {
       // Load addon count and get their catalogs
@@ -231,13 +250,24 @@ const SettingsScreen: React.FC = () => {
     await catalogService.setDataSourcePreference(dataSource);
   }, []);
 
+  const headerBaseHeight = Platform.OS === 'android' ? 80 : 60;
+  const topSpacing = Platform.OS === 'android' ? (StatusBar.currentHeight || 0) : insets.top;
+  const headerHeight = headerBaseHeight + topSpacing;
+
   return (
-    <SafeAreaView style={[
+    <View style={[
       styles.container,
       { backgroundColor: isDarkMode ? colors.darkBackground : '#F2F2F7' }
     ]}>
-      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
-      <View style={styles.header}>
+      {/* Fixed position header background to prevent shifts */}
+      <View style={[
+        styles.headerBackground,
+        { height: headerHeight, backgroundColor: isDarkMode ? colors.darkBackground : '#F2F2F7' }
+      ]} />
+      
+      <View style={{ flex: 1 }}>
+        {/* Header Section with proper top spacing */}
+        <View style={[styles.header, { height: headerHeight, paddingTop: topSpacing }]}>
           <Text style={[styles.headerTitle, { color: isDarkMode ? colors.highEmphasis : colors.textDark }]}>
             Settings
           </Text>
@@ -245,6 +275,9 @@ const SettingsScreen: React.FC = () => {
             <Text style={[styles.resetButtonText, {color: colors.primary}]}>Reset</Text>
           </TouchableOpacity>
         </View>
+
+        {/* Content Container */}
+        <View style={styles.contentContainer}>
           <ScrollView 
             style={styles.scrollView}
             showsVerticalScrollIndicator={false}
@@ -390,7 +423,9 @@ const SettingsScreen: React.FC = () => {
               </Text>
             </View>
           </ScrollView>
-    </SafeAreaView>
+        </View>
+      </View>
+    </View>
   );
 };
 
@@ -398,34 +433,51 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  headerBackground: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 1,
+  },
+  contentContainer: {
+    flex: 1,
+    zIndex: 1,
+    width: '100%',
+  },
   header: {
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    paddingTop: Platform.OS === 'android' ? ANDROID_STATUSBAR_HEIGHT + 12 : 8,
+    paddingHorizontal: 20,
     flexDirection: 'row',
     justifyContent: 'space-between',
-    alignItems: 'center',
+    alignItems: 'flex-end',
+    paddingBottom: 8,
+    backgroundColor: 'transparent',
+    zIndex: 2,
   },
   headerTitle: {
     fontSize: 32,
-    fontWeight: '700',
-    letterSpacing: 0.5,
+    fontWeight: '800',
+    letterSpacing: 0.3,
   },
   resetButton: {
-    paddingVertical: 6,
+    paddingVertical: 8,
     paddingHorizontal: 12,
   },
   resetButtonText: {
-    fontSize: 15,
+    fontSize: 16,
     fontWeight: '600',
   },
   scrollView: {
     flex: 1,
+    width: '100%',
   },
   scrollContent: {
+    flexGrow: 1,
+    width: '100%',
     paddingBottom: 32,
   },
   cardContainer: {
+    width: '100%',
     marginBottom: 20,
   },
   cardTitle: {
@@ -444,6 +496,7 @@ const styles = StyleSheet.create({
     shadowOpacity: 0.1,
     shadowRadius: 4,
     elevation: 3,
+    width: undefined, // Let it fill the container width
   },
   settingItem: {
     flexDirection: 'row',
@@ -452,6 +505,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 16,
     borderBottomWidth: 0.5,
     minHeight: 58,
+    width: '100%',
   },
   settingItemBorder: {
     // Border styling handled directly in the component with borderBottomWidth