greenfrvr / react-native-window-guard Goto Github PK
View Code? Open in Web Editor NEWSafeAreaView alternative for React Native which provides relevant window insets for both iOS and Android.
License: MIT License
SafeAreaView alternative for React Native which provides relevant window insets for both iOS and Android.
License: MIT License
For the better development experience, it would be nice to have a Flow / prop-types or .d.ts generated and published to DefinitlyTyped
There is warning on iOS.
"Module WindowInsetsModule requires main queue setup since it overrides constantsToExport but doesn't implement requiresMainQueueSetup. In a future release React Native will default to initializing all native modules on a background thread unless explicitly opted-out of."
WindowGuard
should reflect different display cutout modes.
React 0.60.x brings about automatic linking, and this package still requires the manual use of the react-native link
command during setup. Currently, react-native
prints a warning upon use of link
.
I wish I had experience with Gradle and Cocoapods configuration so I could help out with this.
Installed and linked with RN 0.60.3
Throws the following error upon use:
TypeError: null is not an object (evaluating 'RNWindowGuard.requestWindowInsets')
This error is located at:
in WindowGuard (at safeAreaView.component.js:26)
in SafeAreaView (at topNavigationBar.component.js:33)
in TopNavigationBarComponent (at themeConsumer.component.js:97)
in Unknown (at themeConsumer.component.js:102)
in Wrapper (at themeConsumer.component.js:106)
in TopNavigationBarComponent (at options.js:20)
in RCTView (at View.js:35)
in View (at StackViewLayout.tsx:361)
in RCTView (at View.js:35)
in View (at createAnimatedComponent.js:151)
in AnimatedComponent (at StackViewLayout.tsx:379)
in PanGestureHandler (at StackViewLayout.tsx:372)
in StackViewLayout (at withOrientation.js:30)
in withOrientation (at StackView.tsx:103)
in RCTView (at View.js:35)
in View (at Transitioner.tsx:267)
in Transitioner (at StackView.tsx:40)
in StackView (at createNavigator.js:61)
in Navigator (at createKeyboardAwareNavigator.js:12)
in KeyboardAwareNavigator (at SceneView.js:9)
in SceneView (at createTabNavigator.js:39)
in RNSScreen (at createAnimatedComponent.js:151)
in AnimatedComponent (at screens.native.js:78)
in Screen (at ResourceSavingScene.js:21)
in ResourceSavingScene (at createBottomTabNavigator.js:121)
in RNSScreenContainer (at screens.native.js:103)
in ScreenContainer (at createBottomTabNavigator.js:111)
in RCTView (at View.js:35)
in View (at createBottomTabNavigator.js:110)
in TabNavigationView (at createTabNavigator.js:197)
in NavigationView (at createNavigator.js:61)
in Navigator (at SceneView.js:9)
in SceneView (at StackViewLayout.tsx:888)
in RCTView (at View.js:35)
in View (at StackViewLayout.tsx:887)
in RCTView (at View.js:35)
in View (at StackViewLayout.tsx:886)
in RCTView (at View.js:35)
in View (at createAnimatedComponent.js:151)
in AnimatedComponent (at StackViewCard.tsx:93)
in RNSScreen (at createAnimatedComponent.js:151)
in AnimatedComponent (at screens.native.js:78)
in Screen (at StackViewCard.tsx:80)
in Card (at createPointerEventsContainer.tsx:95)
in Container (at StackViewLayout.tsx:971)
in RNSScreenContainer (at screens.native.js:103)
in ScreenContainer (at StackViewLayout.tsx:383)
in RCTView (at View.js:35)
in View (at createAnimatedComponent.js:151)
in AnimatedComponent (at StackViewLayout.tsx:379)
in PanGestureHandler (at StackViewLayout.tsx:372)
in StackViewLayout (at withOrientation.js:30)
in withOrientation (at StackView.tsx:103)
in RCTView (at View.js:35)
in View (at Transitioner.tsx:267)
in Transitioner (at StackView.tsx:40)
in StackView (at createNavigator.js:61)
in Navigator (at createKeyboardAwareNavigator.js:12)
in KeyboardAwareNavigator (at createAppContainer.js:429)
in NavigationContainer (at app.component.js:37)
in RCTView (at View.js:35)
in View (at modalPanel.component.js:51)
in ModalPanel (at applicationProvider.component.js:69)
in ThemeProvider (at styleProvider.component.js:13)
in MappingProvider (at styleProvider.component.js:12)
in StyleProvider (at applicationProvider.component.js:68)
in ApplicationProvider (at app.component.js:33)
in App (at renderApplication.js:40)
in RCTView (at View.js:35)
in View (at AppContainer.js:98)
in RCTView (at View.js:35)
in View (at AppContainer.js:115)
in AppContainer (at renderApplication.js:39)
adjustInsets
index.js:100:18
WindowGuard
index.js:78:4
WindowGuard
[native code]:0
<unknown>
createClassProxy.js:98:23
instantiate
createClassProxy.js:96:6
renderRoot
[native code]:0
runRootCallback
[native code]:0
callFunctionReturnFlushedQueue
[native code]:0
Safe area insets API returns zero insets for devices without notch but with iOS version 11.
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.