React Navigation: Transparent header has no height - react-native

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

Answer 3

You will need to give you screen component a top padding equivalent to the height of the header ,

Answer 4

On React Native v6.x
Instead of doing
screenOptions={{headerTransparent: true}}
You can apply it in the backgroundColor in the header style like so
screenOptions={{
headerStyle: {
backgroundColor: 'transparent';
}
}}
This is if you wanna keep the padding

Answer 5

Add headerBackground to navigationOptions like this
static navigationOptions = {
title: strings.header,
headerTitleStyle: { color: '#fff' },
headerTintColor: '#fff',
headerTransparent: true,
headerBackground: Platform.select({
ios: <BlurView style={{ flex: 1 }} intensity={98} />,
android: (
<View style={{ flex: 1, backgroundColor: 'rgba(255,255,255,0.7)' }} />
),
}),
};

Answer 6

We can make transparent header with the help of
headerTransparent: true
but with this we also need to give headerStyle like this to make transparent header.
static navigationOptions = {
headerTransparent: true,
headerStyle: { borderBottomWidth: 0 }
};
In my case I make it possible by giving this style to my header.
style:{ position: 'absolute', backgroundColor: 'transparent', zIndex:
100, top: 0, left: 0, right: 0}