react-native-safe-area - npm Package Compare versions

Comparing version 0.3.1 to 0.4.0

lib/withSafeArea.js

@@ -13,4 +13,4 @@ // @flow
 export function withSafeArea(
-  Component: React.ComponentType<any>,
-  applyTo: 'margin' | 'padding' | 'contentInset' = 'margin',
+  WrappedComponent: React.ComponentType<any>,
+  applyTo: 'margin' | 'padding' | 'absolutePosition' | 'contentInset' = 'margin',
   direction: 'horizontal' | 'vertical' | 'both' = 'both'
@@ -22,2 +22,3 @@ ): React.ComponentType<any> {
     state = { safeAreaInsets: { top: 0, bottom: 0, left: 0, right: 0 } }
+    wrappedRef: any = null
     onSafeAreaInsetsDidChange = this.onSafeAreaInsetsDidChange.bind(this)
@@ -45,3 +46,3 @@
 
-    get injectedProps(): Props {
+    get _injectedProps(): Props {
       const { top, bottom, left, right } = this.state.safeAreaInsets
@@ -103,2 +104,19 @@
         }
+      } else if (applyTo === 'absolutePosition') {
+        if (isHorizontal) {
+          if (style.left !== undefined) {
+            injected.style.left = style.left + left
+          }
+          if (style.right !== undefined) {
+            injected.style.right = style.right + right
+          }
+        }
+        if (isVertical) {
+          if (style.top !== undefined) {
+            injected.style.top = style.top + top
+          }
+          if (style.bottom !== undefined) {
+            injected.style.bottom = style.bottom + bottom
+          }
+        }
       }
@@ -115,5 +133,11 @@
     render(): React.Node {
-      return <Component {...this.props} {...this.injectedProps} />
+      return (
+        <WrappedComponent
+          ref={(ref) => { this.wrappedRef = ref }}
+          {...this.props}
+          {...this._injectedProps}
+        />
+      )
     }
   }
 }

package.json

 {
   "name": "react-native-safe-area",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "React Native module to get Safe Area Insets for iOS 11 or later",
@@ -5,0 +5,0 @@ "main": "lib/index",

README.md

@@ -49,11 +49,12 @@ # react-native-safe-area
 
-- *component* - Wrapped component.
-- *applyTo* - (Optional) Specify property to apply safe area insets.
-    - `margin` - (Default) `style.margin`.
+- `component` : *Component* - Wrapped component.
+- `applyTo` : *string* - (Optional) Specify property to apply safe area insets.
+    - `margin` - `style.margin`. (Default)
     - `padding` - `style.padding`.
+    - `absolutePosition` - `style.top`, `style.bottom`, `style.left` and `style.right`.
     - `contentInset` - `contentInset` and `contentOffset` for scroll views.
-- *direction* - (Optional) Specify direction to apply safe area insets.
+- `direction` : *string* - (Optional) Specify direction to apply safe area insets.
     - `horizontal` - Apply to left and right.
     - `vertical` - Apply to top and bottom.
-    - `both` - (Default) `horizontal` + `vertical`.
+    - `both` - `horizontal` + `vertical`. (Default)
 
@@ -94,5 +95,16 @@ ##### Simple view example
 
+#### Enhanced component's APIs
+
+##### get `wrappedRef` : *ref*
+
+Returns wrapped component's ref.
+
+##### get `currentSafeAreaInsets` : *SafeAreaInsets*
+
+Returns current safe area insets.
+
+---
+
 ### Handle safe area manually
 
-
 ```jsx
@@ -99,0 +111,0 @@ import SafeArea from 'react-native-safe-area'

No alert changes

Improved metrics

Total package byte prevSize

57241

1.84%

Lines of code

202

13.48%

Number of lines in readme file

156

8.33%

No dependency changes