Closing React Native view controller with StatusBar will reset status bar font color

Some Info

Integrated RN single view into existing iOS project. Doing a push presentation (not modal).

Existing iOS screen is using light content already (i.e. status bar text color is white).

🐛 Bug Report

When going back to native app, status bar color always changes back to default (i.e. status bar text colour is black) when I render StatusBar.

To Reproduce

1. Use the code below.

1. Make sure your native app status bar at this point in time is already lightContent. 2. Present a RN view controller via push. Notice how the status bar is still light-content (i.e. white text) because of the StatusBar code (see code). 3. Pop the RN view controller. Observe the color change bug in the status bar.

1. Now remove the RN code with StatusBar. Reload your app.
2. Repeat Step 1-3. Observe how the status bar text colour is not changed anymore as expected!

I did not test if the problem exists if presenting modally, but I am pretty sure the issue is with StatusBar.

Expected Behavior

Status bar color should remain unchanged when using StatusBar and closing RN view controller.

Code Example

Render code:

Note that nativeCloseVC is a function that calls native to pop this view controller.

return (
      <View style={{ flex: 1 }}>
        <Touchable onPress={nativeCloseVC} style={{ flex: 1 }}>
          <View style={{ flex: 1, backgroundColor: "#ff0000" }} />
        </Touchable>
        {/* This is the problematic code!! */}
        <StatusBar barStyle={"light-content"} />
      </View>
    );

Environment

  React Native Environment Info:
    System:
      OS: macOS 10.14.3
      CPU: (12) x64 Intel(R) Core(TM) i7-8700B CPU @ 3.20GHz
      Memory: 10.29 GB / 32.00 GB
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 10.15.1 - /usr/local/bin/node
      npm: 6.9.0 - /usr/local/bin/npm
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
    IDEs:
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.1 => 16.6.1 
      react-native: 0.57.7 => 0.57.7 
    npmGlobalPackages:
      react-native-cli: 2.0.1

[bartolkaruza]

Hi there, thanks for posting this issue! It looks like a bug specifically for brown field apps, caused by the StatusBar._defaultProps being merged with an empty StatusBar._propStack on unmount of the StatusBar. A possible solution would be to retrieve the current status bar values from the StatusBar manager and using those instead of the arbitrary defaultProps.

The StatusBar component has been moved out of React Native core to a separate repo, where it will get the attention it deserves. @cpojer could you please use the migration script on this issue to move it there?

[bartolkaruza]

@CyberMew

1. Change your app dependency following the getting started on react-native-community/react-native-statusbar

2. Fork that repo

3. Fix the issue

4. Point your statusbar dependency to the fork (it will be fixed for you now)

5. Offer the fix as a PR to react-native-community/react-native-statusbar (fixed for everyone now 😄)