React Native Expo app showing two topbars - react-native

Question

I'm following this example: https://reactnavigation.org/docs/tab-based-navigation#a-native-stack-navigator-for-each-tab
I've copy pasted the example from the website. However, this is what I see:
I've the following packages in package.json:
"#react-navigation/bottom-tabs": "^6.0.9",
"#react-navigation/native": "^6.0.6",
"#react-navigation/native-stack": "^6.2.5",
"#react-navigation/stack": "^6.0.11",
Here's my code:
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';
import Ionicons from '#expo/vector-icons/Ionicons';
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>
);
}
function AnalyticsScreen({ navigation }) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Analytics screen</Text>
<Button
title="Go to Details"
onPress={() => navigation.navigate('Details')}
/>
</View>
);
}
const HomeStack = createNativeStackNavigator();
function HomeStackScreen() {
return (
<HomeStack.Navigator>
<HomeStack.Screen name="HomeScreen" component={HomeScreen} />
<HomeStack.Screen name="Details" component={DetailsScreen} />
</HomeStack.Navigator>
);
}
const SettingsStack = createNativeStackNavigator();
function SettingsStackScreen() {
return (
<SettingsStack.Navigator>
<SettingsStack.Screen name="SettingsScreen" component={SettingsScreen} />
<SettingsStack.Screen name="Details" component={DetailsScreen} />
</SettingsStack.Navigator>
);
}
const AnalyticsStack = createNativeStackNavigator();
function AnalyticsStackScreen() {
return (
<AnalyticsStack.Navigator>
<AnalyticsStack.Screen name="Analytics" component={SettingsScreen} />
<AnalyticsStack.Screen name="Details" component={DetailsScreen} />
</AnalyticsStack.Navigator>
)
}
const Tab = createBottomTabNavigator();
export default function App() {
return (
<NavigationContainer>
<Tab.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === 'Home') {
iconName = 'home';
} else if (route.name === 'Settings') {
iconName = 'search';
} else if (route.name === 'Analytics') {
iconName = 'bar-chart'
}
// You can return any component that you like here!
return <Ionicons name={iconName} size={size} color={color} />;
},
tabBarActiveTintColor: 'tomato',
tabBarInactiveTintColor: 'gray',
})}
>
<Tab.Screen name="Home" component={HomeStackScreen} />
<Tab.Screen name="Settings" component={SettingsStackScreen} />
<Tab.Screen name="Analytics" component={AnalyticsStackScreen} />
</Tab.Navigator>
</NavigationContainer>
);
}

Answer 1

You can easily hide navigator headers like this:
<YourNavigator.Navigator
screenOptions={{ headerShown: false /* <-- This will hide your header */ }}
>
<YourNavigator.Screen
name='Settings' /* <-- This name will be shown as header if true */
component={YourSettingsNavigator}
/>
</YourNavigator.Navigator>
Since YourSettingsNavigator is another Navigator, you are nesting navigators in each other. When doing this make sure to set headerShown: false in at least one of the navigators or you get two headers.