microsoft / reactxp

Library for cross-platform app development.
https://microsoft.github.io/reactxp/
Other
8.29k stars 491 forks source link

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

Open kg-currenxie opened 4 years ago

kg-currenxie commented 4 years ago
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?

kg-currenxie commented 4 years ago

Is this project dead? Not even a response

mikehardy commented 4 years ago

Not dead but not moving terribly fast no, at last check Microsoft was pretty deeply invested in react-native / reactxp but I'm not sure what the current is @berickson1 ?

fbartho commented 4 years ago

@kg-currenxie -- it looks like you found the issue! I think we just need to connect a native-common implementation that uses ReactNative's NativeStatusBarManager

Thoughts @mikehardy ?

mikehardy commented 4 years ago

Seems about right and I wouldn't be surprised if @kg-currenxie doesn't already have this locally integrated via patch-package ;-), should be a quick PR Kristian?

kg-currenxie commented 4 years ago

Seems about right and I wouldn't be surprised if @kg-currenxie doesn't already have this locally integrated via patch-package ;-), should be a quick PR Kristian?

Sorry, no patch-package for this one :) Just using RN's own at the moment (component not used on the web anyway) 🙈 🙈 🙈

fbartho commented 4 years ago

If somebody wants to contribute this fix, I'd be happy to help review and get it slotted into the next release!