move status bar to main screen only

App.tsx

@@ -3,6 +3,7 @@ import { NavigationContainer } from "@react-navigation/native";
 import { createNativeStackNavigator } from "@react-navigation/native-stack";
 import HomeScreen from "@/screens/Home";
 import ProfileScreen from "@/screens/Profile";
+import { StatusBar } from "expo-status-bar";
 
 export type RootStackParamList = {
   Home: undefined;
@@ -14,10 +15,12 @@ const Stack = createNativeStackNavigator<RootStackParamList>();
 function App() {
   return (
     <NavigationContainer>
-      <Stack.Navigator screenOptions={{ headerLargeTitle: true }}>
+      <Stack.Navigator>
         <Stack.Screen name="Home" component={HomeScreen} />
         <Stack.Screen name="Profile" component={ProfileScreen} />
       </Stack.Navigator>
+
+      <StatusBar style="auto" />
     </NavigationContainer>
   );
 }

src/screens/Home.tsx

@@ -1,6 +1,4 @@
 import { useNavigation } from "@react-navigation/native";
-import { type RootStackParamList } from "App";
-import { StatusBar } from "expo-status-bar";
 import { Button, StyleSheet, Text, View } from "react-native";
 
 export default function HomeScreen() {
@@ -11,7 +9,6 @@ export default function HomeScreen() {
       <Text>Open up App.tsx to start working on your app!</Text>
 
       <Button title="profile" onPress={() => navigation.navigate("Profile")} />
-      <StatusBar style="auto" />
     </View>
   );
 }

src/screens/Profile.tsx

@@ -1,11 +1,9 @@
-import { StatusBar } from "expo-status-bar";
 import { StyleSheet, Text, View } from "react-native";
 
 export default function ProfileScreen() {
   return (
     <View style={styles.container}>
       <Text>This is a profile screen</Text>
-      <StatusBar style="auto" />
     </View>
   );
 }