benevbright/react-navigation-collapsible

collapsedColor with translucent statusBar

Closed this issue · 5 comments

My Screen has a
<StatusBar
...
translucent
backgroundColor="transparent"
/>.
If I add the "collapsedColor" property
<Stack.Screen
...
/>,
{
collapsedColor: 'white'
}
the statusbar will be white - always.
Am I missing something?
Is there any event i could hook into, so i was able to change the color myself?
Maybe I can pass my StatusBar into somewhere?

Thanks in advance

Hi, @cafistro Thanks for your issue.
Could you provide a gif or a screenshot?

Hello,
sorry it took me so long.
The problem ist not the statusbar. The white rectangle is part of the Header and has the height of the statusbar. So my translucent statusbar reveals a part of the Header.
below is a more detailed screenshot on android emulator.

1: Header without "collapsedColor" property.
2: with "collapsedColor" property.

a: collapsed
b: expanded

What I am looking for is a Header with states 1a & 2b.

The wrong height of the white rectangle in 2a comes from setting the height of the header to 70 in headerStyle prop by reaect-navigation. Leaving the height untouched, the white rectangle fits the statusbar height.
Now I set it to 50 and the desired effect is achieved, but the header is too small.
Maybe that helps you.

Thanks for your time

collapsibleHeader

@cafistro Thank a lot for your information. I will take a look.

Hi, @cafistro
There was a problem when using custom headerStyle.height. #130 This PR fixed it.

I will fix the status problem soon and release them together.

v5.6.0 includes #130.