React Native package that exposes the Safe Area Insets as constants

License: MIT License

Ruby 10.38% Java 67.32% JavaScript 2.04% Objective-C 20.26%

react-native-static-safe-area-insets's Introduction

React Native Static Safe Area Insets

React Native package that exposes the Safe Area insets as constants (iOS and Android notch are supported).

Getting Started

Install

yarn add react-native-static-safe-area-insets
cd ios && pod install # for iOS

Usage

Constants

import StaticSafeAreaInsets from 'react-native-static-safe-area-insets';

console.log('SafeArea insets top:', StaticSafeAreaInsets.safeAreaInsetsTop)
// SafeArea insets top: 44

console.log('SafeArea insets bottom:', StaticSafeAreaInsets.safeAreaInsetsBottom)
// SafeArea insets bottom: 34

console.log('SafeArea insets left:', StaticSafeAreaInsets.safeAreaInsetsLeft)
// SafeArea insets left: 44

console.log('SafeArea insets right:', StaticSafeAreaInsets.safeAreaInsetsRight)
// SafeArea insets right: 44

Current Insets

import StaticSafeAreaInsets from 'react-native-static-safe-area-insets';

StaticSafeAreaInsets.getSafeAreaInsets((values) => {
  console.log('SafeArea insets top:', values.safeAreaInsetsTop)
  // SafeArea insets top: 44

  console.log('SafeArea insets bottom:', values.safeAreaInsetsBottom)
  // SafeArea insets bottom: 34

  console.log('SafeArea insets left:', values.safeAreaInsetsLeft)
  // SafeArea insets left: 44

  console.log('SafeArea insets right:', values.safeAreaInsetsRight)
  // SafeArea insets right: 44
})

Roadmap

Continue to support iOS & Android API updates

Contributing

Pull requests are welcome! Feel free to open issues and submit PRs, we will review them and answer back as fast as possible.

🚀 Authors

react-native-static-safe-area-insets's People

Contributors

Stargazers

Watchers

Forkers

sibe7691 osedea kodeusz grifotv inheritxsolution puckey dylancom navy774989 spartalabs jonathanj mcervenka mrousavy newbanker-damon muhammad-syaifudin mrpmohiburrahman steuerbot kadiraydinli mainguyen12

react-native-static-safe-area-insets's Issues

Is this repo abandoned?

I'm seeing hanging PRs, and having issues related to this lib. Should I just avoid it?

java.lang.NullPointerException on Android in the getConstants method

Hi,
I'm getting some crashes for Android version
java.lang.NullPointerException: Attempt to invoke virtual method 'android.view.Window android.app.Activity.getWindow()' on a null object reference, stack: com.gaspardbruno.staticsafeareainsets.RNStaticSafeAreaInsetsModule.getConstants@34

Exception in HostObject::get: for prop 'RNStaticSafeAreaInsets'

I've had a few crash reports come through crashlytics, but it's really not obvious to me what's happening here. Any help would be appreciated. Device info for latest crash included.

Version: 2.1.1

Device
Brand: samsung
Model: Galaxy A20
Orientation: Portrait
RAM free: 654.35 MB
Disk free: 3.04 GB

Operating System
Version: 10
Orientation: Portrait
Rooted: No

Fatal Exception: com.facebook.react.common.JavascriptException: Error: Exception in HostObject::get: for prop 'RNStaticSafeAreaInsets': <unknown exception>, js engine: hermes, stack:
v@1:86634
d@1:86327
o@1:85953
anonymous@1:1029868
v@1:86634
d@1:86327
o@1:85953
anonymous@1:1029042
v@1:86634
d@1:86327
o@1:85953
anonymous@1:1026417
v@1:86634
d@1:86327
o@1:85953
anonymous@1:703318
v@1:86634
d@1:86284
o@1:85953
anonymous@1:93171
R@1:467611
run@1:467897
runApplication@1:468406
value@1:118225
anonymous@1:116755
value@1:117822
value@1:116713

       at com.facebook.react.modules.core.ExceptionsManagerModule.reportException(ExceptionsManagerModule.java:79)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:372)
       at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:151)
       at com.facebook.react.bridge.queue.NativeRunnable.run(NativeRunnable.java)
       at android.os.Handler.handleCallback(Handler.java:883)
       at android.os.Handler.dispatchMessage(Handler.java:100)
       at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27)
       at android.os.Looper.loop(Looper.java:237)
       at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:226)
       at java.lang.Thread.run(Thread.java:919)

Bottom insets on Pixel 3

I'm wondering why there's a bottom inset of 48 on a Pixel 3 on my simulator? It creates extra margin beneath the icons, because I implemented this way. There's no bottom inset on Pixel 3 right? This is also the case for Android tablets.

iPhone 8 iOS 12.4 not detecting safearea

On an iPhone 8 (iOS 12.4) StaticSafeAreaInsets (with version 1.3.4 and React Native 0.59.10) are not working for some reason. That's all I have so far to go on. I will investigate more. Works fine on iPhone SE, 6S, X but not iPhone 8.

This is what we use on our screens:

import StaticSafeAreaInsets from 'react-native-static-safe-area-insets';

const topSafeArea = Platform.OS === 'ios' ? StaticSafeAreaInsets.safeAreaInsetsTop : 25;

And then we'll insert safeAreaInsetTop into the styling of something rendered.

Any ideas why this might not be working on one iPhone type? Any suggestions on how to debug? I find this puzzling.

Use of undeclared identifier 'UIApplication'

I'm trying to install and link react-native-static-safe-area-insets.

I installed the library via npm:
npm install react-native-static-safe-area-insets

and followed the steps to link it manually. However, when I try to rebuild in xcode I get the following error:

What might be happening?

I have react native 0.57 and an iPhone X and library in version 1.1.0

Only works on Android in fullscreen

After updating this package, I noticed it was returning 0 for all sides.. Looking at the source code it seems it now only works in full-screen for some reason: https://github.com/Gaspard-Bruno/react-native-static-safe-area-insets/blob/master/android/src/main/java/com/gaspardbruno/staticsafeareainsets/RNStaticSafeAreaInsetsModule.java#L50

getSystemWindowInsetTop is null

Android : 9.0
Device : HTC U11+
"react-native-static-safe-area-insets": "^1.3.4"

Exception in HostObject::get(propName:RNStaticSafeAreaInsets): java.lang.NullPointerException: Attempt to invoke virtual method 'int android.view.WindowInsets.getSystemWindowInsetTop()' on a null object reference

Sometimes happen when i install the app, and click the open button, then it will crash.

How do I add this manually in Android?

Am using this with RN 0.59.

Managed to add it manually to iOS following this guide: https://reactnative.dev/docs/linking-libraries-ios

But how do I add this to Android?

Shouldn't those inset values update on orientation change?

on an iPhone XE (iOS 12.0), I'm getting the following values

PORTRAIT
{safeAreaInsetsRight: 0, safeAreaInsetsTop: 44, safeAreaInsetsBottom: 34, safeAreaInsetsLeft: 0, getConstants: ƒ}

LANDSCAPE-RIGHT
{safeAreaInsetsRight: 44, safeAreaInsetsTop: 0, safeAreaInsetsBottom: 21, safeAreaInsetsLeft: 44, getConstants: ƒ}

LANDSCAPE-LEFT
{safeAreaInsetsRight: 44, safeAreaInsetsTop: 0, safeAreaInsetsBottom: 21, safeAreaInsetsLeft: 44, getConstants: ƒ}

But on orientation change, the inset values are always based on the orientation when the app started.

Wrong insets for android

Not sure why, but I'm getting really large inset values on android (top and bottom). Any ideas what the problem could be?

Exception on Android

I am getting the following exception on Android in my application:

2020-04-18 15:58:30.280 18532-18720/com.app E/unknown:ReactNative: Exception in native call java.lang.ClassCastException: java.lang.Float cannot be cast to java.lang.Integer at com.gaspardbruno.staticsafeareainsets.RNStaticSafeAreaInsetsModule.getSafeAreaInsets(RNStaticSafeAreaInsetsModule.java:65) at java.lang.reflect.Method.invoke(Native Method) at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:372) at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:151) at com.facebook.react.bridge.queue.NativeRunnable.run(Native Method) at android.os.Handler.handleCallback(Handler.java:873) at android.os.Handler.dispatchMessage(Handler.java:99) at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27) at android.os.Looper.loop(Looper.java:193) at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:226) at java.lang.Thread.run(Thread.java:764)

API 'variant.getJavaCompile()' is obsolete

Hi, after linking library to android and after syncing project i get this error in build.gradle of your package:

API 'variant.getJavaCompile()' is obsolete and has been replaced with 'variant.getJavaCompileProvider()'.
It will be removed at the end of 2019.
For more information, see https://d.android.com/r/tools/task-configuration-avoidance.
To determine what is calling variant.getJavaCompile(), use -Pandroid.debug.obsoleteApi=true on the command line to display a stack trace.

As i browsed for this error it might have something to do with 'com.android.tools.build:gradle:2.2.3' dependency in build.gradle of your package and current version is 3.4.1 . When i change manually to newest it does not compile because it can not find it.
How to solve this error?

Support for "immersion" mode

Does this package support "immersion" mode on Android? I.e. do the insets take the visibility of the navigation bar into consideration?

Left and Right insets

Is there anyway to retrieve Left and Right insets in Landscape mode?

gaspard-bruno / react-native-static-safe-area-insets Goto Github PK