react-native-screens: [native-stack] [iOS]: headerTranslucent doesn't work and causes issues with layout

Hi,

When adding headerTranslucent: true on iOS, the header does NOT get translucent, but instead, some new issues are caused by it.

Without headerTranslucent:

With headerTranslucent:

Note that the spacing from top is wrong and the content are now under the header (the week strip is not shown). And also the header does not turn translucent.

I’m using react-native-screens@2.0.0-beta.13 and @react-navigation/native-stack@5.0.3

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 6
Comments: 30 (14 by maintainers)

Most upvoted comments

@sallar setting contentInsetAdjustmentBehavior="automatic" on ScrollView seems to fix the layout issue

arjndr on May 28, 2020

What behavior do you want to achieve? setting headerTranslucent: true on iOS 13 makes the content not respect the header’s height and appears under it. If you want to see the content below the header, use semi-transparent header backgroundColor, e.g.

headerTranslucent: true,
headerStyle: {backgroundColor: 'rgba(255,255,255,.8)'},

WoLewicki on May 12, 2020

Yeah I guess this can be closed now

LRNZ09 on Aug 14, 2020

@WoLewicki ok so, the problem here is that you have to add a transparent background color to see the translucent effect. But I remember in an old version of the native stack it wasn’t mandatory and just headerTranslucent was enough

LRNZ09 on Aug 14, 2020

Can I help you any more with this issue or can I close it?

WoLewicki on Jul 17, 2020

Ran into the same issue

AzzouQ on May 7, 2020

This still remains on 2.3.0

Without headerTranslucent:

With headerTranslucent:

zcmgyu on Mar 20, 2020