Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Navigation: Transparent header has no height

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 :( ):

enter image description here

Without transparent header:

enter image description here

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.

like image 563
J. Hesters Avatar asked May 28 '19 12:05

J. Hesters


People also ask

How do I hide the header title in react navigation?

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.

How do I hide the drawer header in react-native?

You should set the navigation options in your drawer's instantiation : const HomeStack = DrawerNavigator({ Home: { screen: Home, navigationOptions: { header: null } }, ...


2 Answers

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' },
  };
like image 86
omerts Avatar answered Dec 28 '22 07:12

omerts


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();
like image 29
Khim Bahadur Gurung Avatar answered Dec 28 '22 07:12

Khim Bahadur Gurung