expo / status-bar-height

Listen to status bar changes during incoming calls and other multi-tasking events

🚨 This package has been deprecated in favor of react-native-safe-area-context which works in Expo Go and across iOS, Android, and web!

@expo/status-bar-height

Listen to status bar changes during incoming calls and other multi-tasking events 💙

Test in a simulator with (⌘ Y) to toggle the status bar height.

Snack: https://snack.expo.io/@bacon/status-bar-height-example

Installation

yarn add @expo/status-bar-height

Usage

Import the library into your JavaScript file:

import StatusBarHeight from '@expo/status-bar-height';

Functions

StatusBarHeight.addEventListener( (height: number) => {} )

Given a callback this will be invoked whenever the status bar height changes. The status bar height changes when another app is running a background activity.

• Phone Calls
• Navigating
• Facetime

StatusBarHeight.removeEventListener( (height: number) => {} )

The provided function will stop receiving updates

StatusBarHeight.getAsync(): Promise<number>

Get the current height of the status bar async.

const height = await StatusBarHeight.getAsync();

status-bar-height's Issues

Listen to StatusBar component hidden prop

When I change the StatusBar status using the React-Native component StatusBar, the events are not triggered. Any way of achieving this? Cmd + y works fine on the simulator though!

import { StatusBar } from 'react-native'

<StatusBar
    hidden={false}
/>

Does not support orientation changes

Hi,

This component does not support well device orientation changes.

As far as I understand the code, it only listen for willChange events, and does nothing for didChange

Let's consider that I have an app in portrait mode first.
It's an iphone XS (actually a simulator)

When I rotate it to landscape I get

So the user callback will be fired with 0, which seems fine to me

But once the device is rotated back to portrait, the height for both events will actually be 0:

One workaroud that seems to work in my app is to do this, but obviously there is a little bit of flickering due to async nature of the workaround:

    const handler = async height => {
      setStatusBarHeight(height)
      const realHeight = await StatusBarHeight.getAsync();
      setStatusBarHeight(realHeight);
    };
    StatusBarHeight.addEventListener(handler);
    return () => StatusBarHeight.removeEventListener(handler);

Maybe this kind of workaround can be included in the lib until something better/synchronous is possible (maybe Fabric will help?)

Support android

In android StatusBarManager.getHeight is undefined, but StatusBarManager.HEIGHT is defined. Can we consider this in the library?

Doesn't work at Android. TypeError: undefined is not an object (evaluating '_this.emitter.addListener')

Checked locally and at snack:
https://snack.expo.io/@bacon/status-bar-height-example

Android error: StatusBarManager.getHeight is not a function

I am running this on my Android phone and receiving an error that seems like it shouldn't happen:

[Unhandled promise rejection: TypeError: StatusBarManager.getHeight is not a function. (In 'StatusBarManager.getHeight(function (_ref) {]
at /Users/giladgray/peregrine/peregrine-frontend-3/node_modules/@expo/status-bar-height/lib/index.js:35:6 in Promise$argument_0
at /Users/giladgray/peregrine/peregrine-frontend-3/node_modules/@expo/status-bar-height/lib/index.js:34:4 in StatusBarHeight#getAsync

looking at the source code, SBM.getHeight seems specifically for iOS and should be undefined on Android, but it isn't.
perhaps the check needs to be beefier, like typeof SBM.gH === 'function' or 'getHeight' in SBM to ensure that it really exists before attempting to call it.

Constants.statusBarHeight is not updated

If you have an incoming call first (before launching the app) and then you launch the app, it is started with Constants.statusBarHeight = 40
If you use it in StyleSheet a paddingTop: Constants.statusBarHeight,
when you close the call, this constant is not updated, leaving a gray zone and moving the app 20 pixels down.
Using EStyleSheet I found this workaround :

paddingTop: Constants.statusBarHeight > 20 ? Constants.statusBarHeight - 20 : Constants.statusBarHeight,

Integration with react-navigation / SafeAreaView ?

Hi,

This library is helpful to listen for ios statusbar changes. However, it's not really clear to me how this is supposed to integrate with ReactNavigation or SafeAreaView, which most of us are probably using.

What would you recommend for such an integration?

Transform ES6+ to ES5 for Jest runner

Issue

Currently when I use this package and run Jest test suite, it will throw error on unexpected token for import.

Solution

Transform all ES6+, like: import to require before publishing to npm.

Error log

import { NativeEventEmitter, NativeModules } from 'react-native';
^^^^^^

    SyntaxError: Unexpected token import

      at ScriptTransformer._transformAndBuildScript (node_modules/jest-runtime/build/script_transformer.js:305:17)
      at Object.<anonymous> (utilities/XXXXX.js:1:202)
      at Object.<anonymous> (screens/XXXXX.js:26:21)

Temporary solution

Add

transformIgnorePatterns: [ 'node_modules/@expo/status-bar-height' ],

to jest/config.js

First

First post