Fix status bar

[housseindjirdeh]

Screens that use a profile component (repository screen/user profile screen) should have white status bar text. Currently, the text is dark.

I've already exposed a barColor prop to modify this attribute in the ViewContainer component which is the wrapper for all screens in the application. However simply changing the value doesn't correctly change the status bar colour as it should, and this probably has to do with how we have nested stack navigations within tabs so it's most likely being overwritten.

[ShaunEvening]

@housseindjirdeh I can take a peek at this this afternoon!

[housseindjirdeh]

Nothing but love for you <3

[lex111]

@housseindjirdeh on Android, a simple change works.

barStyle={barColor === 'light' ? 'light-content' : 'dark-content'}

But I do not understand why you need a dark status bar, can by default make it light?

[andrewda]

@lex111 On almost every screen a dark status bar should be used because a light one would be impossible to see. However, on profiles, orgs and repos, a light one should be used.

[lex111]

@andrewda mmm, yeah, thanks, I did not understand at first. But however, a simple property change seems to work.

[housseindjirdeh]

Looping @darecki to the conversation as he similarly tried to fix the issue by changing the status bars on the top screens of the stack (see #176)

[darecki]

I noticed that when the Tab Bar is initiated it loads and renders all its' tab views one by one. The final result is the status bar color is the one defined in AuthProfile, as it is the last screen loaded. It seems that rendering a StatusBar component overrides any previously StatusBar rendered. You can even do things like:

<View>
<StatusBar barStyle="light-content" />
<StatusBar barStyle="light-content" />
<StatusBar barStyle="dark-content" />
</View>

which will render a view with only one status bar styled as "dark-content" (the last one). Maybe this things are obvious, but it was quite surprising to me, so I'm pointing that out.

Now, my idea of resolving the issue is to re-render the corresponding screen when you change a tab . That would render only the relevant StatusBar. Unfortunately, I have no idea how to force such re-rendering. Can you help me here?

[krizzu]

Hey,
What about setting status bar color imperatively using setBarStyle?
You'd not need to pass props anymore, as this setting will be just in one place.

Also, exposing a option in app settings to change status bar color would be great :)

[machour]

Assigned @jouderianjr as he's working on it, using setBarStyle as mentioned by @krizzu

[lex111]

🎉