React Navigation: Transparent header has no height

Question

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.

Answer 1

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' },
  };

Answer 2

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