expo / status-bar-height Goto Github PK
View Code? Open in Web Editor NEWListen to status bar changes during incoming calls and other multi-tasking events
License: MIT License
Listen to status bar changes during incoming calls and other multi-tasking events
License: MIT License
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?
In android StatusBarManager.getHeight
is undefined
, but StatusBarManager.HEIGHT
is defined. Can we consider this in the library?
Checked locally and at snack:
https://snack.expo.io/@bacon/status-bar-height-example
Currently when I use this package and run Jest test suite, it will throw error on unexpected token for import
.
Transform all ES6+, like: import
to require
before publishing to npm
.
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)
Add
transformIgnorePatterns: [ 'node_modules/@expo/status-bar-height' ],
to jest/config.js
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?)
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,
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.
First post
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}
/>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.