Remove top navigation bar for certain screens
options={{ headerShown: false }}
you are done .. have a nice day
import { createStackNavigator } from "@react-navigation/stack";
import HomeScreen from "./screens/HomeScreen";
import NewsDetailScreen from "./screens/NewsDetailScreen";
import React from "react";
const HomeStack = createStackNavigator();
const HomeScreenStack = () => {
return (
<HomeStack.Navigator >
<HomeStack.Screen
name="homeScreen"
component={HomeScreen}
options={{ title: "Home" }}
/>
<HomeStack.Screen
name="newsDetailScreen"
component={NewsDetailScreen}
options={{
title: "News Detail",
headerShown:false
}}
/>
</HomeStack.Navigator>
);
};
export default HomeScreenStack;
I use the headerShown
flag like this:
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import 'react-native-gesture-handler';
import Welcome from "./compenents/Welcome";
import Home from "./compenents/Home";
const Stack = createStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Welcome" component={Welcome} options={{ headerShown: false }} />
<Stack.Screen name="Home" component={Home} />
</Stack.Navigator>
</NavigationContainer>
);
}
This is an example of how I did mine using StackNavigator:
const stackN = StackNavigator({
Screen1 : {
screen: Screen1,
navigationOptions: {
header: null,
}
},
Home : {
screen: HomeScreen,
navigationOptions: ({navigation}) => ({
title: 'Home',
headerStyle: styles.headerStyle,
headerTitle: <Text>Home</Text>,
headerLeft : null,
headerRight: null,
})
},
}, {headerMode: 'screen'})
So every screen have their own navigationOptions instead. There may be a way to share navigationOptions, but I haven't looked into it at the moment.