Skip to content

Setting StatusBar's barStyle doesn't work in Android #1190

Open
@kg-currenxie

Description

@kg-currenxie
import { StatusBar, Styles, View } from 'reactxp'

...

<Button
  text="dark-content"
  onPress={() => {
    StatusBar.setBarStyle('dark-content', false)
    StatusBar.setBackgroundColor('#333', false)
  }}
/>
<Button
  text="light-content"
  onPress={() => {
    StatusBar.setBarStyle('light-content', false)
    StatusBar.setBackgroundColor('#999', false)
  }}
/>

Gifs:
2020-03-11 16 53 10
2020-03-11 16 53 32

Using React-Native's component works fine in Android, and does actually change the text/icon colors.

import { StatusBar } from 'react-native'

...

<StatusBar
  translucent
  backgroundColor="rgba(0,0,0,0)"
  barStyle="dark-content"
/>

Screenshot 2020-03-11 at 16 56 03

Edit

Found this

    setBarStyle(style: 'default' | 'light-content' | 'dark-content', animated: boolean): void {
        // Nothing to do on android
    }

https://github.com/microsoft/reactxp/blob/master/src/android/StatusBar.ts#L34

But React Native has this implemented:

https://github.com/facebook/react-native/blob/master/Libraries/Components/StatusBar/StatusBar.js#L288

https://github.com/facebook/react-native/blob/master/Libraries/Components/StatusBar/NativeStatusBarManagerAndroid.js

Edit 2:

Works fine in Android using the React Native way.

In some component:

+import NativeStatusBarManager from 'react-native/Libraries/Components/StatusBar/NativeStatusBarManager'
-import { StatusBar } from 'reactxp'

...

+NativeStatusBarManager.setStyle(barColor)
-StatusBar.setBarStyle(barColor, false)

Would it make sense to just add NativeStatusBarManager in RXP's StatusBar?

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions