Reason

The main reason for this issue is that now it's really not obvious that status-bar mutates the state. For me, before I started maintaining this project, this module looks like a View rendering on top of everything other, with the position absolute. And that wasn't really clear that there is no state, but only mutations.

That can really lead the bugs. I want to make it more clear, that there is no rendering at all in the StatusBar component. Only mutation in the lifecycle hooks. And currently, codebase is a bit smells as from my point of view.

Solution

I am thinking about getting rid of the component at all. Just provide the hook.

useStatusBarMutation({ hidden: true, animation: "fade" )}

This will internally use useEffect and will not make additional calling to the native module, as static methods right now.

P.S.: This is open to discussion, want to know what @cpojer thinking about that.

@dmtrKovalenko could you let me know your npm username so I can give you access to publish this package?

Doesn't compile for me with Unable to resolve module Reactfrom/Users/tolo/Repos/Cinuru/app/node_modules/@react-native-community/status-bar/js/StatusBar.js: Module React does not exist in the Haste module map or in these directories: .../app/node_modules

probably the missing React peer dependency declaration

please add demo images to README.md
https://github.com/react-native-community/react-native-statusbar

This issue was transferred from React Native repository: facebook/react-native#24596

🐛 Bug Report

StatusBar component resets its props when application was reopened on Android.

There are similar issues #19609, #16582 that were marked as closed.
But suggested ways of resolving aren't work for me.

I attach a demo of what actually happening.

I set translucent and orange background color for the StatusBar and start the application. "Welcome to React Native!" text was hidden behind the status bar. Then I pressed the home button and reopened the application again. StatusBar component lost translucent and background color "Welcome to React Native!" text located below the status bar.

To Reproduce

• Initialize a new React Native project with react-native init
• Add StatusBar component with translucent and background color
• Start the application with react-native run-android
• Press Home button
• Reopen the application

Expected Behavior

StatusBar component should keep its state when the application was reopened.

Code Example

Add the following StatusBar component:

<StatusBar backgroundColor={'orange'} translucent={true} />

Full code example repo: statusBarTest

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: (4) x64 Intel(R) Core(TM) i5-3210M CPU @ 2.50GHz
Memory: 52.02 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash

Binaries:
Node: 10.13.0 - /usr/local/bin/node
npm: 6.9.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman

SDKs:
iOS SDK:
Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
Android SDK:
API Levels: 23, 25, 26, 27, 28
Build Tools: 23.0.1, 25.0.1, 25.0.2, 26.0.1, 26.0.3, 27.0.3, 28.0.1, 28.0.2, 28.0.3
System Images: android-23 | Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom_64, android-26 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom

IDEs:
Android Studio: 3.3 AI-182.5107.16.33.5199772
Xcode: 10.1/10B61 - /usr/bin/xcodebuild

npmPackages:
react: 16.8.3 => 16.8.3
react-native: 0.59.5 => 0.59.5

npmGlobalPackages:
react-native-cli: 2.0.1
react-native-rename: 2.2.2

I've noticed an error in the manual installation guide for Android:

implementation project(':react-native-status-bar')

should be:

implementation project(':@react-native-community_status-bar')

likewise:

include ':react-native-status-bar'
project(':react-native-status-bar').projectDir = new File(rootProject.projectDir, '../../node_modules/@react-native-community/status-bar/android')

should be:

include ':@react-native-community_status-bar'
project(':@react-native-community_status-bar').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/status-bar/android')

Bug

StatusBar.setBackgroundColor('rgba(255,255,255,0)')
StatusBar.setTranslucent(true)

status bar background color is still light gray.

Environment info

info
  React Native Environment Info:
    System:
      OS: macOS 10.14.5
      CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
      Memory: 1.18 GB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 8.11.3 - ~/.nvm/versions/node/v8.11.3/bin/node
      Yarn: 1.3.2 - /usr/local/bin/yarn
      npm: 5.6.0 - ~/.nvm/versions/node/v8.11.3/bin/npm
      Watchman: 4.7.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
      Android SDK:
        API Levels: 19, 22, 23, 24, 25, 26, 27, 28
        Build Tools: 23.0.1, 23.0.2, 24.0.0, 24.0.1, 24.0.2, 25.0.0, 25.0.1, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.0, 27.0.3, 28.0.1, 28.0.3
        System Images: android-19 | Google APIs Intel x86 Atom, android-23 | Intel x86 Atom, android-23 | Intel x86 Atom_64, android-23 | Google APIs Intel x86 Atom, android-23 | Google APIs Intel x86 Atom_64, android-24 | Google APIs Intel x86 Atom, android-25 | Google APIs ARM 64 v8a, android-25 | Google APIs ARM EABI v7a, android-25 | Google APIs Intel x86 Atom, android-25 | Google APIs Intel x86 Atom_64, android-25 | Google Play Intel x86 Atom
    IDEs:
      Android Studio: 3.3 AI-182.5107.16.33.5314842
      Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3
      react-native: 0.59.9 => 0.59.9
    npmGlobalPackages:
      react-native-create-bridge: 2.0.1
      react-native-create-library: 3.1.2
      react-native-wechat: 1.9.10

React native info output:

 // paste it here

Library version: x.x.x

Steps To Reproduce

Bug

After status-bar is excluded from original React Native, I got this error and could not find anywhere else to resolve the issue. Simply, installed the library from npm, link it but after the run, this error appears.

Environment info

React Native Environment Info:
    System:
      OS: macOS 10.14.5
      CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
      Memory: 1.55 GB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 10.15.3 - /usr/local/bin/node
      Yarn: 1.16.0 - /usr/local/bin/yarn
      npm: 6.10.1 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2
    IDEs:
      Android Studio: 3.4 AI-183.6156.11.34.5522156
      Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.8.3 => 16.8.3 
      react-native: 0.59.4 => 0.59.4 
    npmGlobalPackages:
      react-native-asset: 1.1.3
      react-native-cli: 2.0.1
      react-native: 0.59.8

Library version: 1.0.3

Describe what you expected to happen:

1. Just works as normal.

Feature Request

Make the StatusBar height available via a constant on iOS just like on Android.
RCTSharedApplication().statusBarFrame.size.height

Why it is needed

This would make the API more consistent between the platforms. On iOS it used to be the case that the StatusBar was always 20 pt (portrait at least), this has changed since the iPhone X was introduced, since the height on such devices is 44. The problem is now similar to Android, if you want to use the StatusBar height in a calculation on iOS you need to guess it based on the full screen size. This guessing would be solved by exposing the height of the StatusBar using a constant just like the implementation for Android.

I am aware of the existence of the (internal?) getHeight callback API that is exposed by the native iOS module, however since the StatusBar height is mostly static so I think the current documented Android API is better.

Possible implementation

Just like the Android implementation: using the constant exporting feature that native modules have.

Code sample

- (NSDictionary *)constantsToExport
{
  return @{ @"HEIGHT": @(RCTSharedApplication().statusBarFrame.size.height), };
}

This issue was originally created by @adamivancza as facebook/react-native#20623.

- [x] Review the documentation: https://facebook.github.io/react-native

• Search for existing issues: https://github.com/facebook/react-native/issues
• Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i7-3740QM CPU @ 2.70GHz
Memory: 31.93 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.9.0 - /usr/local/bin/node
npm: 6.3.0 - /usr/local/bin/npm
Watchman: 4.5.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
Android SDK:
Build Tools: 23.0.1, 23.0.2, 23.0.3, 24.0.2, 25.0.0, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.0, 27.0.3
API Levels: 19, 22, 23, 24, 25, 26, 27
IDEs:
Android Studio: 2.2 AI-145.3360264
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
react: 16.4.1 => 16.4.1
react-native: 0.56.0 => 0.56.0
npmGlobalPackages:
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7

Description

I found this problem when I wanted to display a transparent modal over a screen which has a white status bar. Attached some screenshots about the issue:

So this is the default state - the screen's status bar is set to white background with dark-content style.

Now this happens if I display a transparent Modal. As you can see the status bar's style is either changed or the transparent modal just overlaps the StatusBar somehow and causing this weirdness.

There isn't any problem if Modal isn't transparent.

I think there shouldn't be any difference in the StatusBar regardless of Modal is transparent on not. On iOS this is completely consistent:

Reproducible Demo

https://github.com/adamivancza/rn-modal-statusbar-android-problem-repro

This issue was originally created by @CyberMew as facebook/react-native#24083.

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

0. 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.

4. Now remove the RN code with StatusBar. Reload your app.
5. 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

Add unit (and | or) detox tests for this package.

Add support for react-native-web. I have a working implementation at https://github.com/piranna/react-native-web-statusbar. Should it be used as a dependency, or should I add the code directly to this repo?

On android devices, StatusBar.currentHeight returns the value of the status bar height for the orientation that the app was opened.

For devices like the Pixel 3 XL, it has two different status bar heights depending on orientation. The portrait uses a notch, so it's taller than the landscape counterpart.

When you launch the app on landscape, StatusBar.currentHeight returns 28. Launching it on portrait returns 40 something. Since these values are static, rotating the device results in the wrong status bar height for that orientation.

referencing facebook/react-native#24603

My English is poor.
I do not understand native. I add react-native-statusbar to react-native v0.59.1. but i get this problem:

then, I tried to add a google() to build.gradle in android project. it run.

This issue was originally created by @steipete as facebook/react-native#11710.

Description

React Native currently requires that UIViewControllerBasedStatusBarAppearance is set to NO. This is an app-global setting and Apple offers this to help bringing old (pre-iOS 7) apps over to newer OS versions. It's not recommended that this is set for new apps. The methods for manual status bar control are already deprecated and Apple explicitly discourages using them:

To opt out of the view controller-based status bar appearance behavior, you must add the UIViewControllerBasedStatusBarAppearance key with a value of false to your app’s Info.plist file, but doing so is not recommended.
https://developer.apple.com/reference/uikit/uiapplication/1622923-setstatusbarstyle#discussion

The check was added in 2015:
https://github.com/facebook/react-native/blame/64a4c6070df7e711e7fd01c490f369bbd0d0fb28/React/Modules/RCTStatusBarManager.m#L109-L111

At PSPDFKit we offer a React Native module. We also have a very similar check that warns if the value of UIViewControllerBasedStatusBarAppearance is still set to the old behavior.
https://pspdfkit.com/blog/2016/react-native-module/

Here's our FAQ article about it:
https://pspdfkit.com/guides/ios/current/faq/uiviewcontrollerbasedstatusbarappearance/

Other platforms (Xamarin) are switching to the new style as well:
xamarin/Xamarin.Forms#463

Reproduction

See the code check for UIViewControllerBasedStatusBarAppearance. React should either support both or just default to the non-deprecated style. Currently any modification of the status bar requires this key to be set to false (true is the default)

Solution

This is tricky. See the related discussion on Twitter with Nick who wrote the original check:
https://twitter.com/nicklockwood/status/816334935422337025

I realize that React doesn't own the parent View Controller. There are still quite a few ways how the parent VC can be accessed and how hooks could be installed to both have the current flexibility (so we do not break any API) and offer compatibility with the new way of controlling the status bar.

I am willing to help and work on this but I'd first love to hear if there are any discussions around this that I missed while searching for it and what the mid- to long-term plans here are. I know that everything related to the status bar on iOS is painful, so I'm apologizing in advance for bringing up this issue.

Additional Information

• React Native version: 0.39
• Platform: iOS
• Operating System: MacOS

Hey there! We (members of React Native community and React Native core) are still not sure about the future of this repository. Current state of events is that the StatusBar stays in the core for now. We're not sure for how long though.

Having that in mind, we kindly ask you to hold off with the development of this repository and point the improvements, if any, to the core for now. We know that this is an extraordinary favor to ask, and it didn't happen to any extracted package yet. We had some valid reasons to have it this way. And it was a mistake to extract this module so early. Please bare with us.

Cc @kelset @cpojer