Quantcast
Channel: Active questions tagged header - Stack Overflow
Viewing all articles
Browse latest Browse all 647

header in react navigation bottom tabs

$
0
0

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

enter image description here

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>  );}

Viewing all articles
Browse latest Browse all 647

Trending Articles