how to hide header in react native new version

Question

import  React from 'react';
import { View, Text, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import LoginScreen from './Screen/LoginScreen';
import OnboardingScreen from './Screen/OnboardingScreen';



const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
      
     headerMode= 'none'
      >
        <Stack.Screen name="Welcome" component={OnboardingScreen} />
        <Stack.Screen name="Login" component={LoginScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

*i am trying to hide header from my onborading screen but header = "none" is not working anyone can help me

Answer 1

YOu can use my code here :

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
      screenOptions={{headerShown:false}} 
      >
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Dashboard" component={Dashboard} />
      </Stack.Navigator>
    </NavigationContainer>
  ); 
}

The main part is :

<Stack.Navigator
          screenOptions={{headerShown:false}} 
          >

Answer 2

Ok, I got it.

Here is the answer, my header disappears. I hope this will work for you also:

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
      screenOptions={{headerShown:false}} 
      >
        <Stack.Screen name="Welcome" component={OnboardingScreen} />
        <Stack.Screen name="Login" component={LoginScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  ); 
}