th3rdwave / react-native-safe-area-context Goto Github PK

A flexible way to handle safe area insets in JS. Also works on Android and Web!

License: MIT License

JavaScript 2.11% Java 4.07% Ruby 2.04% Objective-C 14.79% TypeScript 38.60% C++ 6.21% Objective-C++ 7.63% Kotlin 23.28% Shell 0.06% CMake 1.21%

android ios react react-native safeareainsets web

react-native-safe-area-context's People

Contributors

Stargazers

Watchers

Forkers

brentvatne evanbacon brunolemos r4ggj anfriis hoangpq novasponge chinesedfan jalson1982 fomayette akshlu leanmazzu callejupa shotskydiver yasser-g smartkarma msdgwzhy6 mikehardy friederbluemle akinncar hyochan ahanusek just1and0 gertyxs muhamad-rizki shirakaba liruwei stephenkopylov fson reactrondev jacobp100 tsapeta bodhitreestudio browser-privacy vabaly senpai-codes juniorboaventura ahce nelsonprsousa kyberius jaulz kaiguo ryanhefner wenit123 wordpress-mobile tamagokun hsource grant0550 cdbridger sbardian mernxl wmonecke radko93 akinolu52 xqccc257990 tv4 jglezma weverkley kidken285 maihongyenit spryrocks spencerlynn luancurti robertjcolley someonewithpc thealmightybob wolewicki liqiankun chauhan-saurabh nandorojo sinlyly luohao-david badsyntax sidious18 adityamittal-fintech chuganzy milankamilya nguyenthienthanh kacperkapusciak tiieoo97 tienle46 ehxxn dustinth openswplatform-todo danilobuerger aymanhossam phamfoo cp julthep romixch jeremybarbet exp8589ert bomjkolyadun hsjoberg jackkinsella naturalatlas ddrulez oxbits mpadev0103 aayushanand99

react-native-safe-area-context's Issues

After installing the library app is getting crashed .

package.json

{
"version": "0.0.1",
"private": true,
"rnpm": {
"assets": [
"./Assets/Fonts"
]
},
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
"dependencies": {
"@react-native-community/cli": "^4.1.0",
"@react-navigation/bottom-tabs": "^5.0.5",
"@react-navigation/drawer": "^5.0.5",
"@react-navigation/native": "^5.0.5",
"@react-navigation/stack": "^5.0.5",
"react": "16.9.0",
"react-native": "0.61.5",
"react-native-gesture-handler": "^1.6.0",
"react-native-reanimated": "^1.7.0",
"react-native-screens": "^2.0.0-beta.7",
"react-native-vector-icons": "^6.6.0"
},
"devDependencies": {
"@babel/core": "^7.6.2",
"@babel/runtime": "^7.6.2",
"@react-native-community/eslint-config": "^0.0.5",
"babel-jest": "^24.9.0",
"eslint": "^6.5.1",
"jest": "^24.9.0",
"metro-react-native-babel-preset": "^0.56.0",
"react-test-renderer": "16.9.0"
},
"jest": {
"preset": "react-native"
}
}

Unable to resolve "./InitialWindowSafeAreaInsets" from "node_modules\react-native-safe-area-context\src\index.tsx"

After upgrade from 0.7.3 to 1.0.0:
Unable to resolve "./InitialWindowSafeAreaInsets" from "node_modules\react-native-safe-area-context\src\index.tsx"

Android: Top inset is changed on keyboard dismissal when windowSoftInputMode = adjustPan

Not sure if this is the expected behavior, but when windowSoftInputMode is set to adjustPan, the top inset changes significantly after opening and dismissing the keyboard, i.e. the top inset can increase from 0 to over 100 after the keyboard is dismissed.

On Android, the adjustPan input mode automatically shifts the screen upward so that focused text inputs are moved above the software keyboard. This input mode is often recommended for handling input/keyboard avoidance on Android due to inconsistent behavior with KeyboardAvoidingView. I assume that when the app screen is shifted back downwards, the top inset value is set to the Y offset value used to pan the view back into its original position.

If this is expected behavior, it seems inconsistent in that the bottom inset doesn't change when the pan-upwards effect is performed upon opening the keyboard.

In my particular use case, the fact that the adjustPan mode affects insets makes it difficult to rely on the safe area context insets in places that are intended to account only for the presence of notches: I'm using the top inset to add top padding to a navigation bar but the padding value jumps in size after dismissing the keyboard.

[QUESTION🤔] using with react-native-community/safe-area-view

Question

So, with recent release 0.4.1
As noted here: https://github.com/react-native-community/react-native-safe-area-view#usage, it uses Context from this repo, but last release introduce it's own SafeAreaView component.
So I can assume we no longer need the community one?

So the difference is that SafeAreaView from here just adds insets to padding, and doesn't support forceInset.

forceInset - can be achieved by overriding paddingLeft/Right/Top/Bottom via style prop.

Overall this SafeAreaView is good starting point, before plugin-in more complex SafeAreaVie from https://github.com/react-native-community/react-native-safe-area-view/

E/AndroidRuntime: FATAL EXCEPTION: mqt_native_modules

This happens intermittently on app load, not to sure exactly as too why.

v0.7.2

    java.lang.NullPointerException: Attempt to invoke virtual method 'int android.view.WindowInsets.getSystemWindowInsetTop()' on a null object reference
        at com.th3rdwave.safeareacontext.SafeAreaUtils.getSafeAreaInsets(SafeAreaUtils.java:47)
        at com.th3rdwave.safeareacontext.SafeAreaViewManager.getExportedViewConstants(SafeAreaViewManager.java:69)
        at com.facebook.react.uimanager.UIManagerModuleConstantsHelper.createConstantsForViewManager(UIManagerModuleConstantsHelper.java:134)
        at com.facebook.react.uimanager.UIManagerModuleConstantsHelper.createConstants(UIManagerModuleConstantsHelper.java:93)
        at com.facebook.react.uimanager.UIManagerModule.createConstants(UIManagerModule.java:275)
        at com.facebook.react.uimanager.UIManagerModule.<init>(UIManagerModule.java:182)
        at com.facebook.react.uimanager.UIManagerModule.<init>(UIManagerModule.java:143)
        at com.facebook.react.CoreModulesPackage.createUIManager(CoreModulesPackage.java:184)
        at com.facebook.react.CoreModulesPackage.getModule(CoreModulesPackage.java:152)
        at com.facebook.react.TurboReactPackage$ModuleHolderProvider.get(TurboReactPackage.java:122)
        at com.facebook.react.TurboReactPackage$ModuleHolderProvider.get(TurboReactPackage.java:110)
        at com.facebook.react.bridge.ModuleHolder.create(ModuleHolder.java:188)
        at com.facebook.react.bridge.ModuleHolder.getModule(ModuleHolder.java:153)
        at com.facebook.react.bridge.NativeModuleRegistry.getModule(NativeModuleRegistry.java:148)
        at com.facebook.react.bridge.CatalystInstanceImpl.getNativeModule(CatalystInstanceImpl.java:479)
        at com.facebook.react.bridge.CatalystInstanceImpl.getNativeModule(CatalystInstanceImpl.java:466)
        at com.facebook.react.uimanager.UIManagerHelper.getUIManager(UIManagerHelper.java:31)
        at com.facebook.react.ReactInstanceManager.attachRootViewToInstance(ReactInstanceManager.java:1054)
        at com.facebook.react.ReactInstanceManager.setupReactContext(ReactInstanceManager.java:1012)
        at com.facebook.react.ReactInstanceManager.access$1400(ReactInstanceManager.java:125)
        at com.facebook.react.ReactInstanceManager$5$2.run(ReactInstanceManager.java:972)
        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:26)
        at android.os.Looper.loop(Looper.java:214)
        at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:225)
        at java.lang.Thread.run(Thread.java:919)

App crashes after updating to 1.0.0

0.7.3 was fine. After the update to 1.0.0 app crashes upon every start.

System:
     OS: Windows 8.1 6.3.9600
     CPU: (8) x64 Intel(R) Xeon(R) CPU           E5630  @ 2.53GHz
     Memory: 38.13 GB / 48.00 GB
  Binaries:
    Node: 12.16.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK:
      API Levels: 23, 28, 29
      Build Tools: 28.0.3, 29.0.3
      System Images: android-29 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: Version  3.6.0.0 AI-192.7142.36.36.6392135
  Languages:
    Java: Not Found
    Python: Not Found
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0
    react-native: 0.62.2 => 0.62.2
  npmGlobalPackages:
    *react-native*: Not Found

App.js:

import { SafeAreaProvider } from 'react-native-safe-area-context';
const App = () => {
return (
 <SafeAreaProvider>
     <View style={{ flex: 1 }}>
         <StatusBar barStyle="light-content" backgroundColor={Colors.statusBar} />
         <AppRoot style={{ flex: 1 }} />
     </View>
 </SafeAreaProvider>
)}

Crash Log:

2020-05-12 07:56:05.098 5196-5291/de.wrz.haustraum A/libc: Fatal signal 6 (SIGABRT), code -6 (SI_TKILL) in tid 5291 (mqt_js), pid 5196 (e.wrz.haustraum)
2020-05-12 07:56:05.336 5312-5312/? A/DEBUG: *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** ***
2020-05-12 07:56:05.336 5312-5312/? A/DEBUG: Build fingerprint: 'samsung/gts4lvwifieea/gts4lvwifi:9/PPR1.180610.011/T720XXS1ATC5:user/release-keys'
2020-05-12 07:56:05.336 5312-5312/? A/DEBUG: Revision: '5'
2020-05-12 07:56:05.337 5312-5312/? A/DEBUG: ABI: 'arm64'
2020-05-12 07:56:05.337 5312-5312/? A/DEBUG: pid: 5196, tid: 5291, name: mqt_js  >>> de.wrz.haustraum <<<
2020-05-12 07:56:05.337 5312-5312/? A/DEBUG: signal 6 (SIGABRT), code -6 (SI_TKILL), fault addr --------
2020-05-12 07:56:05.337 5312-5312/? A/DEBUG:     x0  0000000000000000  x1  00000000000014ab  x2  0000000000000006  x3  0000000000000008
2020-05-12 07:56:05.337 5312-5312/? A/DEBUG:     x4  fefeff041f3c9b0a  x5  fefeff041f3c9b0a  x6  fefeff041f3c9b0a  x7  7f7f7f7f7f7fff7f
2020-05-12 07:56:05.337 5312-5312/? A/DEBUG:     x8  0000000000000083  x9  6e8baa80f0a3624b  x10 0000000000000000  x11 fffffffc7ffffbdf
2020-05-12 07:56:05.337 5312-5312/? A/DEBUG:     x12 0000000000000001  x13 0000000000000000  x14 ffffffffffffffff  x15 0000007d14e47d90
2020-05-12 07:56:05.337 5312-5312/? A/DEBUG:     x16 0000007db7fdf298  x17 0000007db7f000fc  x18 0000000000000000  x19 000000000000144c
2020-05-12 07:56:05.337 5312-5312/? A/DEBUG:     x20 00000000000014ab  x21 0000000000000001  x22 0000007d1523435c  x23 0000007d14e4b588
2020-05-12 07:56:05.337 5312-5312/? A/DEBUG:     x24 0000000000000000  x25 0000000000000001  x26 0000007d12429800  x27 0000007d15cd5fd8
2020-05-12 07:56:05.337 5312-5312/? A/DEBUG:     x28 0000007d122701fc  x29 0000007d14e47d90
2020-05-12 07:56:05.337 5312-5312/? A/DEBUG:     sp  0000007d14e47d50  lr  0000007db7ef25cc  pc  0000007db7ef25f4
2020-05-12 07:56:05.413 5312-5312/? A/DEBUG: backtrace:
2020-05-12 07:56:05.413 5312-5312/? A/DEBUG:     #00 pc 00000000000225f4  /system/lib64/libc.so (abort+116)
2020-05-12 07:56:05.413 5312-5312/? A/DEBUG:     #01 pc 00000000000b8124  /data/app/de.wrz.haustraum-EYwCMySKegD9LZqUkC8B5w==/lib/arm64/libc++_shared.so
2020-05-12 07:56:05.413 5312-5312/? A/DEBUG:     #02 pc 00000000000b43d4  /data/app/de.wrz.haustraum-EYwCMySKegD9LZqUkC8B5w==/lib/arm64/libc++_shared.so (__gxx_personality_v0+364)
2020-05-12 07:56:05.413 5312-5312/? A/DEBUG:     #03 pc 000000000003b398  /data/app/de.wrz.haustraum-EYwCMySKegD9LZqUkC8B5w==/lib/arm64/libhermes-executor-debug.so
2020-05-12 07:56:05.413 5312-5312/? A/DEBUG:     #04 pc 000000000003b8a0  /data/app/de.wrz.haustraum-EYwCMySKegD9LZqUkC8B5w==/lib/arm64/libhermes-executor-debug.so (_Unwind_Resume+116)
2020-05-12 07:56:05.413 5312-5312/? A/DEBUG:     #05 pc 0000000000026c5c  /data/app/de.wrz.haustraum-EYwCMySKegD9LZqUkC8B5w==/lib/arm64/libhermes-executor-debug.so (facebook::react::JSIExecutor::callNativeModules(facebook::jsi::Value const&, bool)+224)
2020-05-12 07:56:05.413 5312-5312/? A/DEBUG:     #06 pc 0000000000028804  /data/app/de.wrz.haustraum-EYwCMySKegD9LZqUkC8B5w==/lib/arm64/libhermes-executor-debug.so
2020-05-12 07:56:05.413 5312-5312/? A/DEBUG:     #07 pc 0000000000020c18  /data/app/de.wrz.haustraum-EYwCMySKegD9LZqUkC8B5w==/lib/arm64/libhermes-executor-debug.so (std::__ndk1::__function::__func<facebook::jsi::DecoratedHostFunction, std::__ndk1::allocator<facebook::jsi::DecoratedHostFunction>, facebook::jsi::Value (facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)>::operator()(facebook::jsi::Runtime&, facebook::jsi::Value const&, facebook::jsi::Value const*&&, unsigned long&&)+68)
2020-05-12 07:56:05.413 5312-5312/? A/DEBUG:     #08 pc 0000000000030238  /data/app/de.wrz.haustraum-EYwCMySKegD9LZqUkC8B5w==/lib/arm64/libhermes.so
2020-05-12 07:56:05.413 5312-5312/? A/DEBUG:     #09 pc 000000000004ca10  /data/app/de.wrz.haustraum-EYwCMySKegD9LZqUkC8B5w==/lib/arm64/libhermes.so
2020-05-12 07:56:05.413 5312-5312/? A/DEBUG:     #10 pc 000000000004faf0  /data/app/de.wrz.haustraum-EYwCMySKegD9LZqUkC8B5w==/lib/arm64/libhermes.so
2020-05-12 07:56:05.413 5312-5312/? A/DEBUG:     #11 pc 0000000000051ca4  /data/app/de.wrz.haustraum-EYwCMySKegD9LZqUkC8B5w==/lib/arm64/libhermes.so
2020-05-12 07:56:05.413 5312-5312/? A/DEBUG:     #12 pc 000000000003d578  /data/app/de.wrz.haustraum-EYwCMySKegD9LZqUkC8B5w==/lib/arm64/libhermes.so
2020-05-12 07:56:05.413 5312-5312/? A/DEBUG:     #13 pc 000000000004ca6c  /data/app/de.wrz.haustraum-EYwCMySKegD9LZqUkC8B5w==/lib/arm64/libhermes.so
2020-05-12 07:56:05.413 5312-5312/? A/DEBUG:     #14 pc 000000000004faf0  /data/app/de.wrz.haustraum-EYwCMySKegD9LZqUkC8B5w==/lib/arm64/libhermes.so
2020-05-12 07:56:05.413 5312-5312/? A/DEBUG:     #15 pc 0000000000051ca4  /data/app/de.wrz.haustraum-EYwCMySKegD9LZqUkC8B5w==/lib/arm64/libhermes.so
2020-05-12 07:56:05.413 5312-5312/? A/DEBUG:     #16 pc 000000000003c3fc  /data/app/de.wrz.haustraum-EYwCMySKegD9LZqUkC8B5w==/lib/arm64/libhermes.so
2020-05-12 07:56:05.413 5312-5312/? A/DEBUG:     #17 pc 00000000000d0dcc  /data/app/de.wrz.haustraum-EYwCMySKegD9LZqUkC8B5w==/lib/arm64/libhermes.so
2020-05-12 07:56:05.414 5312-5312/? A/DEBUG:     #18 pc 000000000004ca10  /data/app/de.wrz.haustraum-EYwCMySKegD9LZqUkC8B5w==/lib/arm64/libhermes.so
2020-05-12 07:56:05.414 5312-5312/? A/DEBUG:     #19 pc 000000000004faf0  /data/app/de.wrz.haustraum-EYwCMySKegD9LZqUkC8B5w==/lib/arm64/libhermes.so
2020-05-12 07:56:05.414 5312-5312/? A/DEBUG:     #20 pc 0000000000051ca4  /data/app/de.wrz.haustraum-EYwCMySKegD9LZqUkC8B5w==/lib/arm64/libhermes.so
2020-05-12 07:56:05.414 5312-5312/? A/DEBUG:     #21 pc 000000000003d578  /data/app/de.wrz.haustraum-EYwCMySKegD9LZqUkC8B5w==/lib/arm64/libhermes.so
2020-05-12 07:56:05.414 5312-5312/? A/DEBUG:     #22 pc 0000000000029530  /data/app/de.wrz.haustraum-EYwCMySKegD9LZqUkC8B5w==/lib/arm64/libhermes.so (facebook::hermes::HermesRuntimeImpl::call(facebook::jsi::Function const&, facebook::jsi::Value const&, facebook::jsi::Value const*, unsigned long)+568)
2020-05-12 07:56:05.414 5312-5312/? A/DEBUG:     #23 pc 0000000000028ec4  /data/app/de.wrz.haustraum-EYwCMySKegD9LZqUkC8B5w==/lib/arm64/libhermes-executor-debug.so (_ZNK8facebook3jsi8Function4callIJRKNSt6__ndk112basic_stringIcNS3_11char_traitsIcEENS3_9allocatorIcEEEESB_NS0_5ValueEEEESC_RNS0_7RuntimeEDpOT_+240)
2020-05-12 07:56:05.414 5312-5312/? A/DEBUG:     #24 pc 0000000000028d20  /data/app/de.wrz.haustraum-EYwCMySKegD9LZqUkC8B5w==/lib/arm64/libhermes-executor-debug.so
2020-05-12 07:56:05.414 5312-5312/? A/DEBUG:     #25 pc 0000000000023e70  /data/app/de.wrz.haustraum-EYwCMySKegD9LZqUkC8B5w==/lib/arm64/libhermes-executor-debug.so (_ZNSt6__ndk128__invoke_void_return_wrapperIvE6__callIJRPFvRKNS_8functionIFvvEEENS3_IFNS_12basic_stringIcNS_11char_traitsIcEENS_9allocatorIcEEEEvEEEES7_SF_EEEvDpOT_+116)
2020-05-12 07:56:05.414 5312-5312/? A/DEBUG:     #26 pc 0000000000026700  /data/app/de.wrz.haustraum-EYwCMySKegD9LZqUkC8B5w==/lib/arm64/libhermes-executor-debug.so (facebook::react::JSIExecutor::callFunction(std::__ndk1::basic_string<char, std::__ndk1::char_traits<char>, std::__ndk1::allocator<char>> const&, std::__ndk1::basic_string<char, std::__ndk1::char_traits<char>, std::__ndk1::allocator<char>> const&, folly::dynamic const&)+1156)
2020-05-12 07:56:05.414 5312-5312/? A/DEBUG:     #27 pc 00000000000a2e64  /data/app/de.wrz.haustraum-EYwCMySKegD9LZqUkC8B5w==/lib/arm64/libreactnativejni.so
2020-05-12 07:56:05.414 5312-5312/? A/DEBUG:     #28 pc 00000000000a445c  /data/app/de.wrz.haustraum-EYwCMySKegD9LZqUkC8B5w==/lib/arm64/libreactnativejni.so
2020-05-12 07:56:05.414 5312-5312/? A/DEBUG:     #29 pc 00000000000698c0  /data/app/de.wrz.haustraum-EYwCMySKegD9LZqUkC8B5w==/lib/arm64/libreactnativejni.so
2020-05-12 07:56:05.414 5312-5312/? A/DEBUG:     #30 pc 000000000005a72c  /data/app/de.wrz.haustraum-EYwCMySKegD9LZqUkC8B5w==/lib/arm64/libreactnativejni.so (_ZN8facebook3jni6detail13MethodWrapperIMNS_5react15JNativeRunnableEFvvEXadL_ZNS4_3runEvEES4_vJEE8dispatchENS0_9alias_refIPNS1_8JTypeForINS0_11HybridClassIS4_NS3_8RunnableEE8JavaPartESB_vE11_javaobjectEEE+32)
2020-05-12 07:56:05.414 5312-5312/? A/DEBUG:     #31 pc 000000000005a6a8  /data/app/de.wrz.haustraum-EYwCMySKegD9LZqUkC8B5w==/lib/arm64/libreactnativejni.so (_ZN8facebook3jni6detail15FunctionWrapperIPFvNS0_9alias_refIPNS1_8JTypeForINS0_11HybridClassINS_5react15JNativeRunnableENS6_8RunnableEE8JavaPartES8_vE11_javaobjectEEEEXadL_ZNS1_13MethodWrapperIMS7_FvvEXadL_ZNS7_3runEvEES7_vJEE8dispatchESE_EESD_vJEE4callEP7_JNIEnvP8_jobject+52)
2020-05-12 07:56:05.414 5312-5312/? A/DEBUG:     #32 pc 0000000000561fe0  /system/lib64/libart.so (art_quick_generic_jni_trampoline+144)
2020-05-12 07:56:05.414 5312-5312/? A/DEBUG:     #33 pc 0000000000028140  /dev/ashmem/dalvik-jit-code-cache_5196_5196 (deleted) (android.os.Handler.handleCallback+64)
2020-05-12 07:56:05.414 5312-5312/? A/DEBUG:     #34 pc 00000000000314dc  /dev/ashmem/dalvik-jit-code-cache_5196_5196 (deleted) (android.os.Handler.dispatchMessage+60)
2020-05-12 07:56:05.414 5312-5312/? A/DEBUG:     #35 pc 000000000005bf64  /dev/ashmem/dalvik-jit-code-cache_5196_5196 (deleted) (com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage+52)
2020-05-12 07:56:05.414 5312-5312/? A/DEBUG:     #36 pc 00000000000017f0  /dev/ashmem/dalvik-jit-code-cache_5196_5196 (deleted) (android.os.Looper.loop+1200)
2020-05-12 07:56:05.414 5312-5312/? A/DEBUG:     #37 pc 000000000055924c  /system/lib64/libart.so (art_quick_invoke_static_stub+604)
2020-05-12 07:56:05.414 5312-5312/? A/DEBUG:     #38 pc 00000000000d00e8  /system/lib64/libart.so (art::ArtMethod::Invoke(art::Thread*, unsigned int*, unsigned int, art::JValue*, char const*)+232)
2020-05-12 07:56:05.414 5312-5312/? A/DEBUG:     #39 pc 0000000000280868  /system/lib64/libart.so (art::interpreter::ArtInterpreterToCompiledCodeBridge(art::Thread*, art::ArtMethod*, art::ShadowFrame*, unsigned short, art::JValue*)+344)
2020-05-12 07:56:05.414 5312-5312/? A/DEBUG:     #40 pc 000000000027a870  /system/lib64/libart.so (bool art::interpreter::DoCall<false, false>(art::ArtMethod*, art::Thread*, art::ShadowFrame&, art::Instruction const*, unsigned short, art::JValue*)+968)
2020-05-12 07:56:05.414 5312-5312/? A/DEBUG:     #41 pc 0000000000529488  /system/lib64/libart.so (MterpInvokeStatic+204)
2020-05-12 07:56:05.414 5312-5312/? A/DEBUG:     #42 pc 000000000054b794  /system/lib64/libart.so (ExecuteMterpImpl+14612)
2020-05-12 07:56:05.414 5312-5312/? A/DEBUG:     #43 pc 00000000002fa72a  /dev/ashmem/dalvik-classes2.dex extracted in memory from /data/app/de.wrz.haustraum-EYwCMySKegD9LZqUkC8B5w==/base.apk!classes2.dex_5196_5196 (deleted) (com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run+74)
2020-05-12 07:56:05.414 5312-5312/? A/DEBUG:     #44 pc 0000000000254574  /system/lib64/libart.so (_ZN3art11interpreterL7ExecuteEPNS_6ThreadERKNS_20CodeItemDataAccessorERNS_11ShadowFrameENS_6JValueEb.llvm.3665920253+488)
2020-05-12 07:56:05.414 5312-5312/? A/DEBUG:     #45 pc 000000000025a068  /system/lib64/libart.so (art::interpreter::ArtInterpreterToInterpreterBridge(art::Thread*, art::CodeItemDataAccessor const&, art::ShadowFrame*, art::JValue*)+216)
2020-05-12 07:56:05.415 5312-5312/? A/DEBUG:     #46 pc 000000000027a854  /system/lib64/libart.so (bool art::interpreter::DoCall<false, false>(art::ArtMethod*, art::Thread*, art::ShadowFrame&, art::Instruction const*, unsigned short, art::JValue*)+940)
2020-05-12 07:56:05.415 5312-5312/? A/DEBUG:     #47 pc 0000000000528f00  /system/lib64/libart.so (MterpInvokeInterface+1392)
2020-05-12 07:56:05.415 5312-5312/? A/DEBUG:     #48 pc 000000000054b814  /system/lib64/libart.so (ExecuteMterpImpl+14740)
2020-05-12 07:56:05.415 5312-5312/? A/DEBUG:     #49 pc 00000000000caa52  /system/framework/boot.vdex (java.lang.Thread.run+12)
2020-05-12 07:56:05.415 5312-5312/? A/DEBUG:     #50 pc 0000000000254574  /system/lib64/libart.so (_ZN3art11interpreterL7ExecuteEPNS_6ThreadERKNS_20CodeItemDataAccessorERNS_11ShadowFrameENS_6JValueEb.llvm.3665920253+488)
2020-05-12 07:56:05.415 5312-5312/? A/DEBUG:     #51 pc 0000000000518818  /system/lib64/libart.so (artQuickToInterpreterBridge+1020)
2020-05-12 07:56:05.415 5312-5312/? A/DEBUG:     #52 pc 00000000005620fc  /system/lib64/libart.so (art_quick_to_interpreter_bridge+92)
2020-05-12 07:56:05.415 5312-5312/? A/DEBUG:     #53 pc 0000000000558f88  /system/lib64/libart.so (art_quick_invoke_stub+584)
2020-05-12 07:56:05.415 5312-5312/? A/DEBUG:     #54 pc 00000000000d00c8  /system/lib64/libart.so (art::ArtMethod::Invoke(art::Thread*, unsigned int*, unsigned int, art::JValue*, char const*)+200)
2020-05-12 07:56:05.415 5312-5312/? A/DEBUG:     #55 pc 000000000045e8f8  /system/lib64/libart.so (art::(anonymous namespace)::InvokeWithArgArray(art::ScopedObjectAccessAlreadyRunnable const&, art::ArtMethod*, art::(anonymous namespace)::ArgArray*, art::JValue*, char const*)+104)
2020-05-12 07:56:05.415 5312-5312/? A/DEBUG:     #56 pc 000000000045f9b4  /system/lib64/libart.so (art::InvokeVirtualOrInterfaceWithJValues(art::ScopedObjectAccessAlreadyRunnable const&, _jobject*, _jmethodID*, jvalue*)+424)
2020-05-12 07:56:05.415 5312-5312/? A/DEBUG:     #57 pc 000000000048add4  /system/lib64/libart.so (art::Thread::CreateCallback(void*)+1120)
2020-05-12 07:56:05.415 5312-5312/? A/DEBUG:     #58 pc 0000000000091bd0  /system/lib64/libc.so (__pthread_start(void*)+36)
2020-05-12 07:56:05.415 5312-5312/? A/DEBUG:     #59 pc 0000000000024240  /system/lib64/libc.so (__start_thread+68)
2020-05-12 07:56:06.110 1018-1018/? E//system/bin/tombstoned: Tombstone written to: /data/tombstones/tombstone_07
2020-05-12 07:56:06.206 1382-1533/? E/InputDispatcher: channel '463184d de.wrz.haustraum/de.wrz.haustraum.MainActivity (server)' ~ Channel is unrecoverably broken and will be disposed!
2020-05-12 07:56:06.226 1382-1419/? E/WindowManager: RemoteException occurs on reporting focusChanged, w=Window{463184d u0 de.wrz.haustraum/de.wrz.haustraum.MainActivity EXITING}
    android.os.DeadObjectException
        at android.os.BinderProxy.transactNative(Native Method)
        at android.os.BinderProxy.transact(Binder.java:1145)
        at android.view.IWindow$Stub$Proxy.windowFocusChanged(IWindow.java:500)
        at com.android.server.wm.WindowState.reportFocusChangedSerialized(WindowState.java:3981)
        at com.android.server.wm.WindowManagerService$H.handleMessage(WindowManagerService.java:5515)
        at android.os.Handler.dispatchMessage(Handler.java:106)
        at android.os.Looper.loop(Looper.java:214)
        at android.os.HandlerThread.run(HandlerThread.java:65)
        at com.android.server.ServiceThread.run(ServiceThread.java:44)

Running Version 1.0.0 with React-Native 0.61.5 crashes aswell:

[Info] 05-12 11:49:24.486 17722 17806 E ReactNativeJS: Invariant Violation: [605,"RCTView",1,{"pointerEvents":"box-none","onLayout":true,"flex":1,"paddingTop":"<<NaN>>","paddingBottom":"<<NaN>>","paddingLeft":"<<NaN>>","paddingRight":"<<NaN>>"}] is not usable as a native method argument
05-12 11:49:24.486 17722 17806 E ReactNativeJS: 
05-12 11:49:24.486 17722 17806 E ReactNativeJS: This error is located at:
05-12 11:49:24.486 17722 17806 E ReactNativeJS:     in NavigationContainer
05-12 11:49:24.486 17722 17806 E ReactNativeJS:     in NavigationContainer (at App.js:118)
05-12 11:49:24.486 17722 17806 E ReactNativeJS:     in RCTView (at App.js:116)
05-12 11:49:24.486 17722 17806 E ReactNativeJS:     in RNCSafeAreaView (at SafeAreaContext.tsx:50)
05-12 11:49:24.486 17722 17806 E ReactNativeJS:     in SafeAreaProvider (at App.js:115)
05-12 11:49:24.486 17722 17806 E ReactNativeJS:     in PersistGate (at App.js:114)
05-12 11:49:24.486 17722 17806 E ReactNativeJS:     in Provider (at App.js:113)
05-12 11:49:24.486 17722 17806 E ReactNativeJS:     in App (at renderApplication.js:40)
05-12 11:49:24.486 17722 17806 E ReactNativeJS:     in RCTView (at AppContainer.js:101)
05-12 11:49:24.486 17722 17806 E ReactNativeJS:     in RCTView (at AppContainer.js:119)
05-12 11:49:24.486 17722 17806 E ReactNativeJS:     in AppContainer (at renderApplication.js:39)

insets.top changed during render on Android with <Statusbar translucent={true} />

const insets = useSafeArea()

return (
  <Layout>
    <Statusbar translucent={true} />
    <Content />
  </Layout>
)

insets.top will change during render(from 0 to the right value), which makes my element position jump

Incorrect insets.bottom value on some initial renders on iPhone X

I have an Expo app with a SafeAreaContext declared at the top-level and using the useSafeArea hook in a nested component.

About half the time on an iPhone X, insets.bottom will return 0 instead of 34 on the first render.

Console logging insets shows initial and subsequent render:

Object {
  "bottom": 0,
  "left": 0,
  "right": 0,
  "top": 44,
}
Object {
  "bottom": 34,
  "left": 0,
  "right": 0,
  "top": 44,
}

Current setup:

"expo": "^36.0.0",
"react": "16.9.0",
"react-native-safe-area-context": "0.7.2",

Note: this is also happening in v0.6.0 which is the version obtained from running expo install react-native-safe-area-context

Usage in combination with React Navigation

React Navigation already applies the insets for a header and bottom tabs. The react native SafeAreaView doesn't apply double insets in this case.
This lib however does. So you can't use it together with React Navigation screens.

Blue = safe area
Red = content

Or am i missing something?

This library works only with react-native 0.60+?

I'm trying to use this library with my react-native project 0.59.9.

But when i initialize the SafeAreaProvider, throws an error:

React.usecontext is not a function

[Feature Request] Safe area height and width

Since dimensions has does not give correct height of the safe area for android devices with notches. It would be nice this library also give the height and width of the safe area.

it might benefit some modal like views with animations when not using react native modal.

How to set different background color for bottom and top safe area?

I have tried

<View style={{flex:1}}>
   <SafeAreaView style={{flex: 0, backgroundColor: 'white'}}/>
   <SafeAreaView style={{flex: 1, backgroundColor: 'grey'}}>
       ...
   </SafeAreaView>
</View>

doesn't work. How would I set different colors for bottom and top?

0.7.2 sometimes crashes on boot on Android

I don't know more yet, but we get a crash with the following stacktrace... sometimes. Has happened at least on two different devices (OnePlus 3T and Nexus 5X). Seems to happen when the application is first started, then closed by swiping it on recent apps view and then starting the application again results a crash.

java.lang.NullPointerException: Attempt to invoke virtual method 'int android.view.WindowInsets.getSystemWindowInsetTop()' on a null object reference
	at com.th3rdwave.safeareacontext.SafeAreaUtils.getSafeAreaInsets(SafeAreaUtils.java:47)
	at com.th3rdwave.safeareacontext.SafeAreaViewManager.getExportedViewConstants(SafeAreaViewManager.java:69)
	at com.facebook.react.uimanager.UIManagerModuleConstantsHelper.createConstantsForViewManager(UIManagerModuleConstantsHelper.java:134)
	at com.facebook.react.uimanager.UIManagerModuleConstantsHelper.createConstants(UIManagerModuleConstantsHelper.java:93)
	at com.facebook.react.uimanager.UIManagerModule.createConstants(UIManagerModule.java:275)
	at com.facebook.react.uimanager.UIManagerModule.<init>(UIManagerModule.java:182)
	at com.facebook.react.uimanager.UIManagerModule.<init>(UIManagerModule.java:143)
	at com.facebook.react.CoreModulesPackage.createUIManager(CoreModulesPackage.java:184)
	at com.facebook.react.CoreModulesPackage.getModule(CoreModulesPackage.java:152)
	at com.facebook.react.TurboReactPackage$ModuleHolderProvider.get(TurboReactPackage.java:122)
	at com.facebook.react.TurboReactPackage$ModuleHolderProvider.get(TurboReactPackage.java:110)
	at com.facebook.react.bridge.ModuleHolder.create(ModuleHolder.java:188)
	at com.facebook.react.bridge.ModuleHolder.getModule(ModuleHolder.java:153)
	at com.facebook.react.bridge.NativeModuleRegistry.getModule(NativeModuleRegistry.java:148)
	at com.facebook.react.bridge.CatalystInstanceImpl.getNativeModule(CatalystInstanceImpl.java:479)
	at com.facebook.react.bridge.CatalystInstanceImpl.getNativeModule(CatalystInstanceImpl.java:466)
	at com.facebook.react.uimanager.UIManagerHelper.getUIManager(UIManagerHelper.java:31)
	at com.facebook.react.ReactInstanceManager.attachRootViewToInstance(ReactInstanceManager.java:1054)
	at com.facebook.react.ReactInstanceManager.setupReactContext(ReactInstanceManager.java:1012)
	at com.facebook.react.ReactInstanceManager.access$1400(ReactInstanceManager.java:125)
	at com.facebook.react.ReactInstanceManager$5$2.run(ReactInstanceManager.java:972)
	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:26)
	at android.os.Looper.loop(Looper.java:193)
	at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:225)
	at java.lang.Thread.run(Thread.java:764)

I'll update if/when I get more details.

ReactNativeFiberHostComponent

ReactNativeFiberHostComponent: Calling getNode() on the ref of an Animated component is no longer necessary. You can now directly use the ref instead. This method will be removed in a future release.

Does autolinking work?

When I install react-native-safe-area-context I need to do react-native link before it works.
Does autolinking already work or do they still need to implement this?

Running App in Release Mode I got this error No safe area value available. Make sure you are rendering `<SafeAreaProvider>`

Current error in release mode

Here is my root app render method

In development mode works well

React native 0.59

I could not found correction version for react native 0.59.10. can anyone help me?

SafeAreaProvider doesn't render content on Android if the view remounts

When the view containing the SafeAreaProvider remounts, the content isn't rendered. Repro: https://snack.expo.io/@satya164/safe-area-bug

It works on iOS and Web. Because of this issue, it's not possible to use React Navigation 5 on Snack right now :(

Bug with Android Notches, here Pixel 3 XL?

Probably I'm missing something, but I have a glitch with the notch on Pixel 3 XL (API 29) with an out of the box configuration.

Any ideas?

/**
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {View, Text} from 'react-native';
import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';

type Props = {};

export default class App extends Component<Props> {
  render() {
    return (
      <SafeAreaProvider>
        <SafeAreaView style={{flex: 1}}>
          <View style={{flex: 1}}>
            <Text>
              Look, I'm safe! Not under a status bar or notch or home indicator
              or anything! Very cool
            </Text>
          </View>
        </SafeAreaView>
      </SafeAreaProvider>
    );
  }
}

Gives me

Stack

info Fetching system and libraries information...
System:
    OS: macOS 10.15.2
    CPU: (8) x64 Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz
    Memory: 495.50 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.1.0 - ~/.nvm/versions/node/v13.1.0/bin/node
    Yarn: 1.21.1 - ~/.nvm/versions/node/v13.1.0/bin/yarn
    npm: 6.13.6 - ~/.nvm/versions/node/v13.1.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 28, 29
      Build Tools: 28.0.3, 29.0.1, 29.0.2
      System Images: android-19 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom, android-29 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.6010548
    Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.5 => 0.61.5 
  npmGlobalPackages:
    react-native-cli: 2.0.1
    react-native-rename: 2.4.1
    react-native-version: 3.2.0

"react-native-safe-area-context": "^0.6.2",
"react-native-safe-area-view": "^1.0.0",

Instructions on how to enable notch support on Android (display cutout)

The readme mentions it supports Android, but I wasn't able to make it work yet.
Could you add some instructions there maybe?

I've tried creating this android/app/src/main/res/values-28/styles.xml file:

<resources>
    <style name="ActivityTheme">
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
        <item name="android:windowTranslucentStatus">true</item>
        <item name="android:windowTranslucentNavigation">true</item>
    </style>
</resources>

But still not able to make the app draw behind the notch on Landscape mode:

On landscape it adds these black bars at the left/right. The StatusBar at the top is handled correctly.
I tried the example project but it has the same behavior.

No issue, just a big thank you for sharing this repo!

Thanks! You saved me a headache or two.

Support "immersive" mode

I'm using react-native-safe-area-context in combination with react-native-android-immersive-mode but the bottom inset value seems to still include the navigation bar height even though it's not there (see official Android docs on "immersive" mode).

Are there plans to support that?

Bottom navigation bar height

Following my previous PR at react-native-device-info, I tried to create a method called getBottomNavigationBarHeight() in this library that returns the bottom navigation bar height.

However, I am not familiar with React Hooks and I couldn't get it to work. I wanted to ask if that method would make sense in this library and if there is a way to integrate it with the current API.

Pre AndroidX version

I am checking history of this repo and I believe there is no version, not even 0.1.0 (I think) that support pre-AndroidX. We haven't yet migrated to AndroidX (or RN 0.60) but looking to use this library. Interestingly I expect 0.3.3 that is pre RN 0.60 version to be without AndroidX but it is not!

Ability to get inset values outside of a react component

I'm looking for a way to use the inset values in styles outside of a component, i.e. without having to use the provided wrapper components, similar to Dimensions.get('window') for example. I want this feature because my app doesn't change orientation and I only want to add inset margins/paddings every here and there in my styles. I'm also using MobX which makes it really hard to use components based on render functions because they break the functionality of mobx-react.

Is there a way to do this?

I would use https://github.com/Gaspard-Bruno/react-native-static-safe-area-insets which provides this functionality, but I'm using expo so linking is a no-go.

TypeScript compilation failing

Hello!

When I run TS compilation for my project I'm keep getting following error:

node_modules/react-native-safe-area-context/lib/typescript/src/index.d.ts:3:10 - error TS2440: Import declaration conflicts with local declaration of 'EdgeInsets'.

3 import { EdgeInsets } from './SafeArea.types';

I would like to ask you if there is something wrong with my tsconfig as I'm new to TypeScript and I don't know much about it.

Thank you so much!

Incorrect insets.bottom value on the devices with Android 5.x.x and hardware buttons

The package returns incorrect insets.bottom value on the devices with Android 5.x.x and hardware buttons. E.g. Samsung S4.

Code example:

import { useSafeArea } from 'react-native-safe-area-context';

...

const Component = () => {
  const insets = useSafeArea();
  console.log(insets.bottom); // prints 48 - it should be 0

  ...
}

how to properly mock this package?

Without mocking this package, react-navigation won't render any route in jest tests

How to use once

I want to only set the bottom offset for iphone x and friends. I do not want my bottom tabs to avoid keyboards and such (which is what currently happens on android).

So, can I position my tabs properly (padding) and then not have it be updated when the keyboard opens?

Violation: requireNativeComponent: "RNCSafeAreaView" was not found in the UIManager.

I believe I linked the lib correctly but it still doesn't find RNCSafeAreaView. Using RN 0.59.x.

[error][tid:com.facebook.react.JavaScript] Invariant Violation: requireNativeComponent: "RNCSafeAreaView" was not found in the UIManager.
    in RNCSafeAreaView (at src/index.tsx:19)

SafeAreaProvider, useSafeArea, and SafeAreaConsumer not Working

I am using Expo so that might be a problem but I am getting these methods straight from the Expo documentation so idk what im doing wrong. :/

https://docs.expo.io/versions/v35.0.0/sdk/safe-area-context/

Test suite failed to run

Test suite failed to run

    TypeError: Cannot read property 'Constants' of undefined

      at Object.RNCSafeAreaViewConfig (node_modules/react-native-safe-area-context/lib/commonjs/InitialWi
ndowSafeAreaInsets.ts:9:17)
      at Object.<anonymous> (node_modules/react-native-safe-area-context/lib/commonjs/index.tsx:6:1)

Test Suites: 1 failed, 5 passed, 6 total

I am currently suffering from the above jest test after upgrading to react-navigation v5.
Here is the pr of the repo.

Here is the error in circleci.

Autolinking not finding podspec in monorepo

When I pod install using RN 0.61.1 the podspec for this module doesn't get picked up for some reason. I have a number of other native node modules which work fine, but for some reason its not seeing this one.

If I add the pod manually to my Podfile it works fine.

Anybody else seeing this?

Does not respect hidden StatusBar

I just installed this package in order to fix notch problems on my app. However, I immediately stumbled upon a problem: The inset values don't make sense to me. I'm getting top: 20 on an iPhone 7, but the iPhone 7 doesn't have any notches or unsafe areas. At the same time, a Sony Xperia phone that I'm testing with, also without any notches, has top: 0. See below:

What are the values based upon? Is there a way for me to be able to foresee these differences so that I can work around them? I would've expected that this library provided the size of the actual unsafe areas, and not to add seemingly arbitrary additional values.

Update
Ok, so I'm guessing the 20 additional pixels stem from the status bar. But why is this automatically added, and how come it's only added on iOS? The status bar is hidden in my app on both Android and iOS, so I can't really just subtract those 20px in a very convenient way.. I'm doing it this way now, but feels like a hack: paddingTop: Platform.OS === 'ios' ? insets.top - 20 : insets.top

Upgrade from 0.6.4 to 0.7.0 break my app

react-native-safe-area-context            0.6.4  →         0.7.0

After trying this upgrade, I am having test issue with jest:

    TypeError: Cannot read property 'Constants' of undefined

      at Object.<anonymous> (node_modules/react-native-safe-area-context/lib/commonjs/InitialWindowSafeAreaInsets.ts:9:17)
      at Object.<anonymous> (node_modules/react-native-safe-area-context/lib/commonjs/index.tsx:6:1)

I expect them to pass as in with 0.6.4.

Thanks!

NullpointerException when Android first open app.

Only on Android, It raise Nullpointer Exception when launch an app,
Especially, a single ~ twice times just after resintall or upgrade.

Fatal Exception: java.lang.NullPointerException: Attempt to invoke virtual method 'int android.view.WindowInsets.getSystemWindowInsetTop()' on a null object reference
       at com.th3rdwave.safeareacontext.SafeAreaUtils.getSafeAreaInsets(SafeAreaUtils.java:48)
       at com.th3rdwave.safeareacontext.SafeAreaViewManager.getExportedViewConstants(SafeAreaViewManager.java:69)
       at com.facebook.react.uimanager.UIManagerModuleConstantsHelper.createConstantsForViewManager(UIManagerModuleConstantsHelper.java:134)
       at com.facebook.react.uimanager.UIManagerModuleConstantsHelper.createConstants(UIManagerModuleConstantsHelper.java:93)
       at com.facebook.react.uimanager.UIManagerModule.createConstants(UIManagerModule.java:275)
       at com.facebook.react.uimanager.UIManagerModule.<init>(UIManagerModule.java:182)
       at com.facebook.react.uimanager.UIManagerModule.<init>(UIManagerModule.java:143)
       at com.facebook.react.CoreModulesPackage.createUIManager(CoreModulesPackage.java:184)
       at com.facebook.react.CoreModulesPackage.getModule(CoreModulesPackage.java:152)
       at com.facebook.react.TurboReactPackage$ModuleHolderProvider.get(TurboReactPackage.java:122)
       at com.facebook.react.TurboReactPackage$ModuleHolderProvider.get(TurboReactPackage.java:110)
       at com.facebook.react.bridge.ModuleHolder.create(ModuleHolder.java:188)
       at com.facebook.react.bridge.ModuleHolder.getModule(ModuleHolder.java:153)
       at com.facebook.react.bridge.NativeModuleRegistry.getModule(NativeModuleRegistry.java:148)
       at com.facebook.react.bridge.CatalystInstanceImpl.getNativeModule(CatalystInstanceImpl.java:479)
       at com.facebook.react.bridge.CatalystInstanceImpl.getNativeModule(CatalystInstanceImpl.java:466)
       at com.facebook.react.uimanager.UIManagerHelper.getUIManager(UIManagerHelper.java:31)
       at com.facebook.react.ReactInstanceManager.attachRootViewToInstance(ReactInstanceManager.java:1054)
       at com.facebook.react.ReactInstanceManager.setupReactContext(ReactInstanceManager.java:1012)
       at com.facebook.react.ReactInstanceManager.access$1400(ReactInstanceManager.java:125)
       at com.facebook.react.ReactInstanceManager$5$2.run(ReactInstanceManager.java:972)
       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:26)
       at android.os.Looper.loop(Looper.java:237)
       at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:225)
       at java.lang.Thread.run(Thread.java:919)

2 changes triggers re-renders on initial mount

Current behaviour

Initial mounting of the SafeAreaProvider triggers 2 updates to the insets.

For instance, on an iPhone 11 Pro, we get these three updates on the initial mounting of the provider:

Render 1:

{left: 0, top: 44, right: 0, bottom: 0}

Render 2:

{left: 0, top: 0, right: 0, bottom: 0}

Render 3:

{left: 0, top: 44, right: 0, bottom: 34}

Expected behaviour

Expected behaviour would be one render with the final value of render 3.

Code to reproduce

import React from 'react'
import { SafeAreaProvider, SafeAreaConsumer } from 'react-native-safe-area-context'

const App = () => (
  <SafeAreaProvider>
    <SafeAreaConsumer>
      {insets => {
        console.log(insets) // Gets called 3 times
        return null
      }}
    </SafeAreaConsumer>
  </SafeAreaProvider>
)

export default App

Unit test with @testing-library/react-native doesn't work

Hello

I'm trying to implement this unit test but it doesn't work because SafeAreComponent seems doesn't contain my component.

This is my simple code

const { getByText, getByTestId, debug } = render(
			<SafeAreaProvider>
				<View>
					<Text>Hello!</Text>
				</View>
			</SafeAreaProvider>
);
debug();

My debug method display follow code and as you can see my component is not there

<View
      pointerEvents="box-none"
      style={
        Object {
          "flex": 1,
        }
      }
    >
      <View
        collapsable={true}
        pointerEvents="box-none"
        style={
          Object {
            "flex": 1,
          }
        }
      >
        <RNCSafeAreaView
          style={
            Object {
              "flex": 1,
            }
          }
        />
      </View>
    </View>

Do you know how can I solve it?

Thank you!

Suggestion - Update Readme with more information

Hi,

I'm interested in using this package, but I'm a little wary of implementing it since the readme is kind of light on details.

For instance, does this work with all android and ios devices with notches?
What does this package actually do? (description of how it works)
Will this be actively maintained?
How does this handle devices without notches?

If you could add a bit more to the readme I think that would help people to decide on using this. It's coming recommended from @mikehardy via react-native-device-info as a replacement for their hasNotch method, so maybe adding that could also help?

[Feature request] Debug view for viewing device insets

Would be awesome if this library could export a RN view that uses absolute positioning to visually show the device insets from useSafeArea().

Apps that use this library could choose to render this view in their developer scenarios to their discretion so they can visually make sure their views are interacting with the safe area in the way they would expect.

If the library maintainers think this would be a good idea, I'd be happy to open a PR for this.

[iOS] Build fails with error duplicate symbols for architecture x86_64

ExpoKit iOS build error: duplicated symbols for architecture x86_64

🐛 Bug Report

https://github.com/pedro-lb/expokit-duplicated-symbols

Environment

pedrobini@Pedros-MacBook-Pro ios % expo diagnostics 

  Expo CLI 3.11.7 environment info:
    System:
      OS: macOS 10.15.2
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 12.12.0 - /usr/local/bin/node
      Yarn: 1.19.1 - /usr/local/bin/yarn
      npm: 6.11.3 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    IDEs:
      Android Studio: 3.5 AI-191.8026.42.35.5900203
      Xcode: 11.3.1/11C504 - /usr/bin/xcodebuild
    npmGlobalPackages:
      expo-cli: 3.11.7

Target: iOS

Steps to Reproduce

Clone our repo that reproduces the problem:

git clone https://github.com/pedro-lb/expokit-duplicated-symbols

Follow setup guide:

Run yarn install.
Go into ios directory and run pod install: cd ios && pod install.
Start the expo server with yarn start --clear.
Open the project in XCode, click Build (or hit ⌘ + B).

You should hit the error: duplicate symbols for architecture x86_64.

Expected Behavior

The app builds successfully and works.

Actual Behavior

Build error when trying to build for iOS:

ld: 90 duplicate symbols for architecture x86_64
clang: error: linker command failed with exit code 1 (use -v to see invocation)

You can find the full build error here.

Reproducible Demo

https://github.com/pedro-lb/expokit-duplicated-symbols

Solutions already attempted:

We've tried a few fixes as listed below.

❌ Upgrading to XCode 10's new build system:

Yeah, we're late to the party and still using the old build system. Although when trying to use the new one, the same error still happens and it doesn't build.

ld: 90 duplicate symbols for architecture x86_64
clang: error: linker command failed with exit code 1 (use -v to see invocation)

❌ Manually removing conflics in `Podfile`:

We've tried to manually remove conflicting links on a post-install hook in our Podfile. The script looks as below.

The links were removed but that solution does not work. Same error happens (duplicate symbols for architecture x86_64).

post_install do |installer|
  installer.pods_project.targets.each do |target|
    if %w(RNScreens RNCMaskedView react-native-safe-area-context).include?(target.name)
      target.remove_from_project
    end
  end
end

❌ Disabling `autolink` for conflicting dependencies on `react-native.config.js`:

By disabling React Native's autolink for the conflicting dependencies in react-native.config.js file, the project still does not build, and a new error appears.

module.exports = {
  dependencies: {
    ...,
    '@react-native-community/masked-view': {
      platforms: {
        ios: null,
      },
    },
    'react-native-safe-area-context': {
      platforms: {
        ios: null,
      },
    },
    'react-native-screens': {
      platforms: {
        ios: null,
      },
    },
  },
};

A new error happens when trying to build:

ld: library not found for -lRNCMaskedView
clang: error: linker command failed with exit code 1 (use -v to see invocation)

❌ Removing conflicting dependencies from `package.json`:

By removing the conflicting dependencies below from package.json and re-installing our modules and pods (by running the commands below).

yarn remove @react-native-community/masked-view react-native-screens react-native-safe-area-context

rm -rf node_modules yarn.lock

yarn install

cd ios

rm -rf Podfile.lock Pods

pod install

> build on XCode

On this repository, the project builds and works correctly! But I guess this happens since we don't really use these dependencies here (they were just installed via yarn add). On our project another error happens during build, since we actually import and use these dependencies:

ld: library not found for -lRNCMaskedView
clang: error: linker command failed with exit code 1 (use -v to see invocation)

❌ Tinkering with XCode build settings:

We've tried to change a few XCode build settings as mentioned in a few Stack Overflow posts, but none of them worked.

❗ Removing -ObjC flag Other Linker Flags in XCode Build Settings: It builds! But doesn't work as stated in its topic below.
😵 Setting No Common Blocks to NO under Build Settings.
😵 Setting Enable Testability to NO under Build Settings.
😵 Running in production and debug modes.
😵 Removing Link Binary with Libraries under Build Phases.
😵 Removing duplicated (there were none) items in Compile Sources under Build Phases.
😵 Removing duplicated (there were none) libraries in Libraries folder in XCode.

❓ Removing `-ObjC` flag in `Other Linker Flags` under XCode's `Build Settings`:

By removing -ObjC flag from Other Linker Flags (located in Build Settings) on XCode, the project builds!

...but it immediately force-closes after opening 😞. The error below pops up.

*** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[RCTRootView setReactTag:]: unrecognized selector sent to instance 0x7f84f6e10f40'
terminating with uncaught exception of type NSException
abort() called
CoreSimulator 681.17.2 - Device: iPhone 11 (0974E59B-9AA8-4E0B-915D-A083AB917955) - Runtime: iOS 13.3 (17C45) - DeviceType: iPhone 11

When looking at the exception that caused the app to crash with Mac OS console:

2020-01-17 14:35:13.414 [info][tid:main][RCTBridge.m:145] Class EXDisabledRedBox was not exported. Did you forget to use RCT_EXPORT_MODULE()?

Apparently, -ObjC is necessary to correctly build all the dependencies.

❌ Add React dependencies to `Podfile`:

When seeing the error above, while still without -ObjC flag in Other Linker Flags under XCode's Build Settings, we've tried adding the missing pods as described above (Did you forget to use RCT_EXPORT_MODULE()?) in our Podfile:

  pod 'React', :path => '../node_modules/react-native/'
  pod 'React-Core', :path => '../node_modules/react-native/React'
  pod 'React-DevSupport', :path => '../node_modules/react-native/React'
  pod 'React-fishhook', :path => '../node_modules/react-native/Libraries/fishhook'
  pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
  pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
  pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
  pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
  pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
  pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
  pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
  pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
  pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
  pod 'React-RCTWebSocket', :path => '../node_modules/react-native/Libraries/WebSocket'

and we've also tried with:

pod 'React',
    :path => "../node_modules/react-native",
    :inhibit_warnings => true,
    :subspecs => [
      "Core",
      "ART",
      "RCTActionSheet",
      "RCTAnimation",
      "RCTCameraRoll",
      "RCTGeolocation",
      "RCTImage",
      "RCTNetwork",
      "RCTText",
      "RCTVibration",
      "RCTWebSocket",
      "DevSupport",
      "CxxBridge"
    ]

After running rm -rf Podfile.lock Pods && pod install, we've tried to build, but the same error happens.

2020-01-17 14:35:13.414 [info][tid:main][RCTBridge.m:145] Class EXDisabledRedBox was not exported. Did you forget to use RCT_EXPORT_MODULE()?

IOS devices without notches get stucked

Hey folks, first of all thanks for this library, it's amazing!

This week I moved on from react-native-safe-area-view to react-native-safe-area-context and I noticed my app wasn't running in some devices without notches.
Unfortunately I had n log and I have no idea what's happening (it's not a crash itself, my app just get stucked on splash screen).

Earlier this afternoon I started to debug and found that's related to this lib.
I just removed <SafeAreaProvider></SafeAreaProvider> and it started to work again (obviously I couldn't get the insets from the context anymore lol)

Any thoughts? Apparently SafeAreaProvider isn't rendering children somehow.

I'd be glad to help.

Thanks!

Unexpected .iml file in npm package

The npm package has an unexpected file android/react-native-safe-area-context.iml which may cause

Could not set process working directory to '/node_modules/react-native-safe-area-context/example/android': could not setcwd() (errno 2: No such file or directory)

in Android Studio.

Solution

add *.iml to .npmignore

useSafeAreaInsets has no exported member

Hi, I tried using this in my TypeScript project, but I get the error:
Module '"<PROJECT_PATH>/node_modules/react-native-safe-area-context/lib/typescript/src"' has no exported member 'useSafeAreaInsets'.ts(2305)

For anyone with similar problem, it worked to use useSafeArea instead.

Support FLAG_LAYOUT_NO_LIMITS

I'm trying to achieve a full transparent NavigationBar background. It seems a way to do it is using getWindow().addFlags(WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS);.

But when I add this code react-native-safe-area-context seems to have no effect anymore. Is this expected? Or is it possible to support it? Any other way to have full transparency without using FLAG_LAYOUT_NO_LIMITS?

Default behaviour

FLAG_TRANSLUCENT_NAVIGATION

FLAG_LAYOUT_NO_LIMITS

Code

Android compile error

Gradle through error when gradle build

node_modules\react-native-safe-area-context\android\src\main\java\com\th3rdwave\safeareacontext\InsetsChangeEvent.java:28: error: incompatible types: ReadableMap cannot be converted to WritableMap
event.putMap("insets", SafeAreaUtils.edgeInsetsToJsMap(mInsets));
^
Note: Some messages have been simplified; recompile with -Xdiags:verbose to get full output
1 error

FAILURE: Build failed with an exception.

Export initial mount window insets

If we exported the insets of the window when the app launched, we could avoid delaying the rendering of the subtree, which could improve initial mount performance

import {SafeAreaProvider, initialMountWindowInsets} from 'react-native-safe-area-context';

<SafeAreaProvider initialSafeAreaInsets={initialMountWindowInsets}>
  {content}
</SafeAreaProvider>

We might even be able to make this the default. But I'm not sure that's safe (and I'm not sure the current behaviour of inheriting the parent's insets is safe either) because if you present a modal in page sheet mode, the insets will be different from the root

We'd need to check the value of the insets when they get updated from the onInsetsChange event to avoid reconciling the subtree twice

Is this a change you'd accept a PR for?

Top inset wrong when using hidden StatusBar in IOS

When using <StatusBar hidden /> in IOS, top inset is 20 instead of 0. It corrects itself after device is rotated to landscape and back.

https://snack.expo.io/SkroOuDAS

Tested phones:

iPhone 7 IOS 13.3 (has bug)
iPhone X IOS 13.3 (does not have bug)
various Android devices (does not have bug)

0.5.0 broken - SafeAreaView undefined

The latest published release on NPM (0.5.0) seems to be broken. SafeAreaView is undefined:

import { SafeAreaView } from 'react-native-safe-area-context';

I have wrapped everything in a SafeAreaProvider. 0.4.1 Works fine for me.

Combined use with react-native-navigation

I use react-native-navigation and when using this lib (especially when wrapping my page components in a SafeAreaProvider), my topbar title components renders blank.

If I remove SafeAreaProvider , the topbars render fine again but I caannot use this lib...

Anyone using react-native-navigation with this lib?