Problem with StackNavigator in reactnative

Question

I am new to reactnative and I was following a tutorial with YouTube and I went exactly like an instructor, but my app does not work and the white screen shows The program is very simple, there are three js files that I will put in now. App.js :

import { StatusBar } from 'expo-status-bar';
import { Image, StyleSheet, Text, View, Button } from 'react-native';
import { NavigationContainer } from 'react-navigation';
import StackNavigator from './pages/StackNavigator';
export default function App() {
  return (
    <NavigationContainer>
        <StackNavigator />
    </NavigationContainer>

  );
}

Home.js:

import { StatusBar } from 'expo-status-bar';
import { Image, StyleSheet, Text, View, Button } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Image  source={require('./header.png') } style={{ width: "100%", height: 300 }} />
    
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#04294F',
  },

});

StackNavigator.js:

import { View, Text } from 'react-native'
import React from 'react'
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Home from "./pages/Home";

const Stack = createNativeStackNavigator();
const StackNavigator = () => {
  return (
    <Stack.Navigator ScreenOptions={{headerShown: false }}>
        <Stack.Group>
          <Stack.screen name="Home" component={Home} />
        </Stack.Group>
    </Stack.Navigator>
  );    
};

export default StackNavigator;