th3rdwave / react-native-safe-area-context Goto Github PK
View Code? Open in Web Editor NEWA flexible way to handle safe area insets in JS. Also works on Android and Web!
License: MIT License
A flexible way to handle safe area insets in JS. Also works on Android and Web!
License: MIT License
Without mocking this package, react-navigation won't render any route in jest tests
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.
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.
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.
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?
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.
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!
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/
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
I could not found correction version for react native 0.59.10. can anyone help me?
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)
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)
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"
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!
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?
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"
}
}
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:
{left: 0, top: 44, right: 0, bottom: 0}
{left: 0, top: 0, right: 0, bottom: 0}
{left: 0, top: 44, right: 0, bottom: 34}
Expected behaviour would be one render with the final value of render 3.
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
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.
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?
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
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
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:
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?
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.
add *.iml
to .npmignore
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!
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.
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)
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>
);
}
}
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",
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.
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?
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
?
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/
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
...
}
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.
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
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.
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?
Thanks! You saved me a headache or two.
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?
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.
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.
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!
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!
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 :(
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?
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.
https://github.com/pedro-lb/expokit-duplicated-symbols
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
Clone our repo that reproduces the problem:
git clone https://github.com/pedro-lb/expokit-duplicated-symbols
Follow setup guide:
yarn install
.ios
directory and run pod install
: cd ios && pod install
.yarn start --clear
.Build
(or hit β + B
).You should hit the error: duplicate symbols for architecture x86_64
.
The app builds successfully and works.
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.
https://github.com/pedro-lb/expokit-duplicated-symbols
We've tried a few fixes as listed below.
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)
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
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)
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)
We've tried to change a few XCode build settings as mentioned in a few Stack Overflow posts, but none of them worked.
-ObjC
flag Other Linker Flags
in XCode Build Settings
: It builds! But doesn't work as stated in its topic below.No Common Blocks
to NO
under Build Settings
.Enable Testability
to NO
under Build Settings
.Link Binary with Libraries
under Build Phases
.Compile Sources
under Build Phases
.Libraries
folder in XCode.-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.
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()?
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.