If I set headerTransparent: true
the other content which was usually rendered below it moves underneath it. How can I avoid that?
My code:
export class RegisterScreen extends Component {
static navigationOptions = {
title: strings.header,
headerTitleStyle: { color: '#fff' },
headerTintColor: '#fff',
headerTransparent: true,
};
render() {
return <Display onSignUpPressed={() => {}} onHelpPressed={() => {}} />;
}
}
With transparent header (it overlaps :( ):
Without transparent header:
I'd like to have the content aligned as if the header had a height. So I want the content to be like in the second picture, but with a transparent header like in the first.
How do I hide the header in navigation? To hide the navigation header on Press of a Button setOptions({headerShown: false}); In this example, We will create a stack navigator with a single screen which will have a header and has a button to click.
You should set the navigation options in your drawer's instantiation : const HomeStack = DrawerNavigator({ Home: { screen: Home, navigationOptions: { header: null } }, ...
You can now use the headerStyle
property to give your header a transparent background, while keeping its height:
static navigationOptions = {
title: strings.header,
headerTitleStyle: { color: '#fff' },
headerTintColor: '#fff',
headerStyle: { backgroundColor: 'transparent' },
};
Header overlaps with the content underneath if headerTransparent: true
is set. You need to manually add a top margin or padding according to your situation to your content if you dont want it overlapped. React Navigation won't do it automatically but it provides a hook that gets header height
import { useHeaderHeight } from '@react-navigation/stack';
Now, you can get the height in your component like this:
const headerHeight = useHeaderHeight();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With