fix: Fix android statusbar translucency

[DragonSpirit]

Sup!
This PR should fix transparency issue from #321. It would be great if @vikrantnegi or anybody else can check this.

[amaury1093]

looks good to me, thanks! I'll let @vikrantnegi review if he sees this, or else I'll merge this in 2d.

[vikrantnegi]

@DragonSpirit Hey, I just reviewd the PR on my Android and unfortunately it is not seems to working as expected.

However, when I added barStyle to the StatusBar it worked.

<StatusBar translucent={false} barStyle="dark-content" />

cc @amaurymartiny

[DragonSpirit]

@vikrantnegi I am not sure it's correct way for light-based theme devices. Main point is disable transparency from statusbar. Can you attach screenshot for check difference?

[vikrantnegi]

Good point. But we can always update the bar style as per the app theme like this:

<StatusBar
  barStyle={
    this.state.theme === 'light'
      ? 'dark-content'
      : 'light-content'
  }
  backgroundColor={
    this.state.theme === 'light' ? '#fff' : '#000'
  }
/>

I implemented this in one of my expo apps.

Here is the screenshots before and after adding the barStyle.
Before:

After:

[DragonSpirit]

@vikrantnegi, thank you for research. But I think theme feature for statusbar should be implemented in #320. Use force dark-content can break iOS dark theme.
@amaurymartiny what do you think about it?

[vikrantnegi]

@DragonSpirit Using dark-content won't break iOS dark theme as the app doesn't support dark theme, so iOS won't apply dark theme to the app.

[amaury1093]

Use force dark-content can break iOS dark theme.

I believe @vikrantnegi is actually correct. By default the light theme is used everywhere (see here), so we can just put <StatusBar barStyle="dark-content"> and it should be enough.

In the future, after #320, we can enable automatic dark/light detection and add a piece of code similar to #374 (comment)

[amaury1093]

Thanks a lot @DragonSpirit and @vikrantnegi!