Issue with custom header and header style

[jhalborg]

Current Behavior

Passing a custom header to a stack navigator

• seems not to work if not specifying a minHeight for the header
• if you do, it seems to overlap the "real" header, as apparent when navigating into the stack

Also, it seems that applying headerStyles does not affect the header either.

The goal is for the header to look like it does here, but without the gap between the header and the content below. Specifically, I would like the header to be narrower, as well as 'blend in' with the statusbar, both being white. The custom header should be replaced by the stock header when navigating into the stack.

Expected Behavior

I expect CustomHeader to replace the stock header, not be layered on top of it. I also expect headerStyles to apply to the header container that react-navigation exposes, that (AFAIK) should contain the CustomHeader

How to reproduce

I made a snack illustrating the issues here

Your Environment

(see snack)

software	version
react-navigation	2.12.1
react-native	56
node	(local: 10.9)
npm or yarn	yarn 1.9.4

Thanks 😁

[brentvatne]

each stack has its own header potentially. you would need to add this custom header to the nested stacks not just on the outer one. or if you prefer, set the inner stacks to have headerMode: 'none'. eg: https://snack.expo.io/@notbrent/custom-header-and-height-styling-issue