Hiding header in bottom tab navigator not working

Question

I have a react native expo app with a bottom tab navigator. How do I hide a specific screen header?

Here is my code:

export default function MainContainer() {
    const Tab = createBottomTabNavigator();
    const {toggleColorMode} = useColorMode();
    const settings = {bg: useColorModeValue("white", "muted.800")};

    return (
        <NavigationContainer>
            <Tab.Navigator screenOptions={{headerShown: false}}>
                <Tab.Screen name="Home" children={() => <Home settings={settings}/>}/>
                <Tab.Screen name="Test" children={() => <Test settings={settings}/>}/>
                <Tab.Screen name="Result" children={() => <Result settings={settings}/>}
                            options={{headerShown: false}}/>
                <Tab.Screen name="Training" children={() => <Training settings={settings}/>}/>
                <Tab.Screen name="History" children={() => <History settings={settings}/>}/>
                <Tab.Screen name="Stats" children={() => <Stats settings={settings}/>}/>
                <Tab.Screen name="Settings"
children={() => <Settings darkMode={toggleColorMode} settings={settings}/>}/>
            </Tab.Navigator>
        </NavigationContainer>
    );
}

As you can see, I tried to use options={{headerShown: false}} and screenOptions={{headerShown: false}} but it just doesn't work for some reason.

Do you know what could be causing this problem and how to solve it?

Note that I removed unnecessary lines of code and rewrote some words to english, so the code itself might not work, but the code works fine except for the header hiding.

Answer 1

At navigator level hide a header for all screens and show for certain at screen level

<Tab.Navigator screenOptions={{headerShown: false}}>
  <Tab.Screen options={{headerShown: true}} name="Home" component={HomeScreen} />
  <Tab.Screen name="Settings" component={SettingsScreen}/>
</Tab.Navigator>

or just hide for certain at screen level

<Tab.Navigator>
  <Tab.Screen name="Home" component={HomeScreen} />
  <Tab.Screen options={{headerShown: false}} name="Settings" component={SettingsScreen}/>
</Tab.Navigator>

and in both cases a header is hidden for Settings screen.