Hi I am creating an app with react native and I am using react navigation for the menu but I find a problem and now when I create a menu with bottom tabs a header is also created and it gives me a problem for that reason I would like to know how I can solve it this or disappear the header
mi code is
import * as React from 'react';import { Button, Text, View } from 'react-native';import { NavigationContainer } from '@react-navigation/native';import { createNativeStackNavigator } from '@react-navigation/native-stack';import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';function DetailsScreen() { return (<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><Text>Details!</Text></View> );}function HomeScreen({ navigation }) { return (<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><Text>Home screen</Text><Button title="Go to Details" onPress={() => navigation.navigate('Details')} /></View> );}function SettingsScreen({ navigation }) { return (<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><Text>Settings screen</Text><Button title="Go to Details" onPress={() => navigation.navigate('Details')} /></View> );}const HomeStack = createNativeStackNavigator();function HomeStackScreen() { return (<HomeStack.Navigator><HomeStack.Screen name="Home" component={HomeScreen} /><HomeStack.Screen name="Details" component={DetailsScreen} /></HomeStack.Navigator> );}const SettingsStack = createNativeStackNavigator();function SettingsStackScreen() { return (<SettingsStack.Navigator><SettingsStack.Screen name="Settings" component={SettingsScreen} /><SettingsStack.Screen name="Details" component={DetailsScreen} /></SettingsStack.Navigator> );}const Tab = createBottomTabNavigator();export default function App() { return (<NavigationContainer><Tab.Navigator><Tab.Screen name="Home" component={HomeStackScreen} /><Tab.Screen name="Settings" component={SettingsStackScreen} /></Tab.Navigator></NavigationContainer> );}