I'm trying to switch screen using both stack and tab navigator.
const MainNavigation = StackNavigator({
otp: { screen: OTPlogin },
otpverify: { screen: OTPverification},
userVerified: {
screen: TabNavigator({
List: { screen: List },
Settings: { screen: Settings }
}),
},
});
In this case stacknavigator is used first and then tabnavigator. and i want to hide headers of stack navigator. WIt is not working properly when i use navigationoptions like::
navigationOptions: { header: { visible: false } }
i'm trying this code on first two components which are using in stacknavigator. if i use this line then getting some error like::
This question is related to
javascript
react-native
react-navigation
expo
For the single screen, you can set header:null or headerShown: false in createStackNavigator like this
const App = createStackNavigator({
First: {
screen: Home,
navigationOptions: {
header: null,
},
},
});
Hide the header from all the screens in once using defaultNavigationOptions
const App = createStackNavigator({
First: {
screen: HomeActivity,
},
},
{
defaultNavigationOptions: {
header: null
},
});
In the latest version of react-navigation this works to hide the header on every screen: headerMode={'none'}
<Stack.Navigator
headerMode={'none'}
>
<Stack.Screen name="Home" component={HomeScreen}/>
<Stack.Screen name="Details" component={DetailsScreen}/>
</Stack.Navigator>
_x000D_
<Stack.Screen
name="SignInScreen"
component={Screens.SignInScreen}
options={{ headerShown: false }}
/>
options={{ headerShown: false }}
works for me.
** "@react-navigation/native": "^5.0.7",
"@react-navigation/stack": "^5.0.8",
In the given solution Header is hidden for HomeScreen by- options={{headerShown:false}}
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} options={{headerShown:false}}/>
<Stack.Screen name="Details" component={DetailsScreen}/>
</Stack.Navigator>
</NavigationContainer>
This will remove the header from the component class.
export default class SampleClass extends Component {
navigationOptions = {
headerMode: 'none'
}
...
}
This is working for stack navigation
<Stack.Screen
name="Home"
component={HomeComponent}
options={{
headerShown: false,
}}
/>
On v4 simply use below code in the page you want to hide the header
export default class Login extends Component {
static navigationOptions = {
header: null
}
}
refer to Stack Navigator
You can hide header like this:
<Stack.Screen name="Login" component={Login} options={{headerShown: false}} />
Just add this into your class/component code snippet and Header will be hidden
static navigationOptions = { header: null }
In react navigation 5.x you can hide the header for all screens by setting the headerMode
prop of the Navigator
to false
.
<Stack.Navigator headerMode={false}>
{/* Your screens */}
</Stack.Navigator>
const MyNavigator = createStackNavigator({
FirstPage: {screen : FirstPageContainer, navigationOptions: { headerShown:false } },
SecondPage: {screen : SecondPageContainer, navigationOptions: { headerShown: false } }
});
//header:null will be removed from upcoming versions
If your screen is a class component
static navigationOptions = ({ navigation }) => {
return {
header: () => null
}
}
code this in your targeted screen as the first method (function).
It's important to match which version of react-navigation library you're using to the solution as they're all different. For those still using react-navigation v1.0.0 for some reason like me, both these worked:
For disabling/hiding header on individual screens:
const AppScreens = StackNavigator(
{
Main: { screen: Main, navigationOptions: { header: null } },
Login: { screen: Login },
Profile: { screen: Profile, navigationOptions: { header: null } },
});
For disabling/hiding all screens at once, use this:
const AppScreens = StackNavigator(
{
Main: { screen: Main},
Login: { screen: Login },
Profile: { screen: Profile },
},
{
headerMode: 'none',
}
);
All the answer are showing how to do it with class components, but for functional components you do:
const MyComponent = () => {
return (
<SafeAreaView>
<Text>MyComponent</Text>
</SafeAreaView>
)
}
MyComponent.navigationOptions = ({ /*navigation*/ }) => {
return {
header: null
}
}
If you remove the header your component may be on places where you can't see it (when the phone don't have square screen) so it's important to use it when removing the header.
Add new navigationOptions object in the stackNavigator.
Try this :
const MainNavigator = createStackNavigator({
LoginPage: {screen : LoginPageContainer, navigationOptions: { header: null } },
MiddlePage: {screen : MiddlePageContainer, navigationOptions: { header: null } },
SMS: {screen: ShowSmsContainer, navigationOptions: { header: null } },
Map: {screen: ShowMapContainer, navigationOptions: { header: null } }
});
Hope it helps.
const CallStack = createStackNavigator({
Calls: Calls,
CallsScreen:CallsScreen,
}, {headerMode: 'none'});
CallStack.navigationOptions = {
tabBarLabel: 'Calls',
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}
/>
),
header: null,
headerVisible: false,
};
With latest react-navigation-stack v4 you can hide the header with
import { createStackNavigator } from 'react-navigation-stack';
createStackNavigator({
stackName: {
screen:ComponentScreenName,
navigationOptions: {
headerShown:false
}
}
})
If you only want to remove it from one screen in react-native-navigation
then:
<Stack.Navigator>
<Stack.Screen
name="Login"
component={Login}
options= {{headerShown: false}} />
</Stack.Navigator>
I am using header : null
instead of header : { visible : true }
i am using react-native cli. this is the example :
static navigationOptions = {
header : null
};
This worked for me:
const Routes = createStackNavigator({
Intro: {
screen: Intro,
navigationOptions: {
header: null,
}
}
},
{
initialRouteName: 'Intro',
}
);
You can hide StackNavigator header like this:
const Stack = createStackNavigator();
function StackScreen() {
return (
<Stack.Navigator
screenOptions={{ headerShown: false }}>
<Stack.Screen name="Login" component={Login} />
<Stack.Screen name="Training" component={Training} />
<Stack.Screen name="Course" component={Course} />
<Stack.Screen name="Signup" component={Signup} />
</Stack.Navigator>
);
}
for 4.x, the header: null
is deprecated, should use headerShown: false
instead
ex:
const AppScreens = createStackNavigator({
cover: {
screen: Login,
path: '/login',
navigationOptions: () => ({
headerShown: false,
}),
},
})
In your targeted screen you have to code this !
static navigationOptions = ({ navigation }) => {
return {
header: null
}
}
If someone searching how to toggle header so in componentDidMount write something like:
this.props.navigation.setParams({
hideHeader: true,
});
When
static navigationOptions = ({ navigation }) => {
const {params = {}} = navigation.state;
if (params.hideHeader) {
return {
header: null,
}
}
return {
headerLeft: <Text>Hi</Text>,
headerRight: <Text>Hi</Text>,
headerTitle: <Text>Hi</Text>
};
};
And somewhere when event finish job:
this.props.navigation.setParams({
hideHeader: false,
});
If you want to hide on specific screen than do like this:
// create a component
export default class Login extends Component<{}> {
static navigationOptions = { header: null };
}
if you want remove the header from all screen goto app.js and add this code to Stack.Navigator
screenOptions={ { headerShown: false } }
For me navigationOptions
didn't work. The following worked for me.
<Stack.Screen name="Login" component={Login}
options={{
headerShown: false
}}
/>
Source: Stackoverflow.com