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

Comparing version 0.5.0 to 0.5.1

lib/withSafeArea.js

@@ -5,3 +5,4 @@ // @flow
 import { StyleSheet } from 'react-native'
-import SafeArea, { type SafeAreaInsets } from 'react-native-safe-area'
+import SafeArea from './SafeArea'
+import { type SafeAreaInsets } from './TypeDefinition'
 
@@ -96,3 +97,3 @@ type Direction =
 
-    componentWillMount(): void {
+    UNSAFE_componentWillMount(): void {
       SafeArea.getSafeAreaInsetsForRootView()
@@ -128,4 +129,4 @@ .then(result => this.onSafeAreaInsetsDidChange(result))
       if (applyTo === 'contentInset') {
-        const contentInset = this.props.contentInset || {}
-        const contentOffset = this.props.contentOffset || {}
+        const contentInset = this.props.contentInset
+        const contentOffset = this.props.contentOffset
         const injected = {
@@ -139,3 +140,8 @@ automaticallyAdjustContentInsets: false,
           if (applysToTop) {
-            injected.contentInset.top = (contentInset.top || 0) + top
+            injected.contentInset.top = (
+              contentInset && contentInset.top
+                ? contentInset.top
+                : 0
+            ) + top
+
             if (this.wrappedRef && this.wrappedRef.getScrollResponder) {
@@ -147,16 +153,41 @@ const scrollView = this.wrappedRef.getScrollResponder()
             }
-            injected.contentOffset.y = (contentOffset.y || 0) - top
+
+            injected.contentOffset.y = (
+              contentOffset && contentOffset.y
+                ? contentOffset.y
+                : 0
+            ) - top
           }
+
           if (applysToBottom) {
-            injected.contentInset.bottom = (contentInset.bottom || 0) + bottom
+            injected.contentInset.bottom = (
+              contentInset && contentInset.bottom
+                ? contentInset.bottom
+                : 0
+            ) + bottom
           }
         }
+
         if (applysToLeft || applysToRight) {
           if (applysToLeft) {
-            injected.contentInset.left = (contentInset.left || 0) + left
+            injected.contentInset.left = (
+              contentInset && contentInset.left
+                ? contentInset.left
+                : 0
+            ) + left
           }
+
           if (applysToRight) {
-            injected.contentInset.right = (contentInset.right || 0) + right
+            injected.contentInset.right = (
+              contentInset && contentInset.right
+                ? contentInset.right
+                : 0
+            ) + right
           }
-          injected.contentOffset.x = (contentOffset.x || 0) - left
+
+          injected.contentOffset.x = (
+            contentOffset && contentOffset.x
+              ? contentOffset.x
+              : 0
+          ) - left
         }
@@ -168,3 +199,3 @@
       const style = StyleSheet.flatten([this.props.style]) || {}
-      const injected = { style: { ...style } }
+      const injected = { style: { ...{}, ...style } }
 
@@ -174,15 +205,15 @@ if (applyTo === 'margin') {
           const marginTop = style.marginTop || style.marginVertical || style.margin || 0
-          injected.style.marginTop = marginTop + top
+          injected.style.marginTop = parseInt(marginTop, 10) + top
         }
         if (applysToBottom) {
           const marginBottom = style.marginBottom || style.marginVertical || style.margin || 0
-          injected.style.marginBottom = marginBottom + bottom
+          injected.style.marginBottom = parseInt(marginBottom, 10) + bottom
         }
         if (applysToLeft) {
           const marginLeft = style.marginLeft || style.marginHorizontal || style.margin || 0
-          injected.style.marginLeft = marginLeft + left
+          injected.style.marginLeft = parseInt(marginLeft, 10) + left
         }
         if (applysToRight) {
           const marginRight = style.marginRight || style.marginHorizontal || style.margin || 0
-          injected.style.marginRight = marginRight + right
+          injected.style.marginRight = parseInt(marginRight, 10) + right
         }
@@ -192,28 +223,28 @@ } else if (applyTo === 'padding') {
           const paddingTop = style.paddingTop || style.paddingVertical || style.padding || 0
-          injected.style.paddingTop = paddingTop + top
+          injected.style.paddingTop = parseInt(paddingTop, 10) + top
         }
         if (applysToBottom) {
           const paddingBottom = style.paddingBottom || style.paddingVertical || style.padding || 0
-          injected.style.paddingBottom = paddingBottom + bottom
+          injected.style.paddingBottom = parseInt(paddingBottom, 10) + bottom
         }
         if (applysToLeft) {
           const paddingLeft = style.paddingLeft || style.paddingHorizontal || style.padding || 0
-          injected.style.paddingLeft = paddingLeft + left
+          injected.style.paddingLeft = parseInt(paddingLeft, 10) + left
         }
         if (applysToRight) {
           const paddingRight = style.paddingRight || style.paddingHorizontal || style.padding || 0
-          injected.style.paddingRight = paddingRight + right
+          injected.style.paddingRight = parseInt(paddingRight, 10) + right
         }
       } else if (applyTo === 'absolutePosition') {
-        if (applysToTop) {
-          injected.style.top = style.top + top
+        if (applysToTop && style.top !== undefined) {
+          injected.style.top = parseInt(style.top, 10) + top
         }
-        if (applysToBottom) {
-          injected.style.bottom = style.bottom + bottom
+        if (applysToBottom && style.bottom !== undefined) {
+          injected.style.bottom = parseInt(style.bottom, 10) + bottom
         }
-        if (applysToLeft) {
-          injected.style.left = style.left + left
+        if (applysToLeft && style.left !== undefined) {
+          injected.style.left = parseInt(style.left, 10) + left
         }
-        if (applysToRight) {
-          injected.style.right = style.right + right
+        if (applysToRight && style.right !== undefined) {
+          injected.style.right = parseInt(style.right, 10) + right
         }
@@ -220,0 +251,0 @@ }

package.json

 {
   "name": "react-native-safe-area",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "React Native module to get Safe Area Insets for iOS 11 or later",
   "main": "lib/index",
+  "types": "index.d.ts",
   "scripts": {
@@ -34,6 +35,9 @@ "lint": "eslint lib",
     "eslint-plugin-react": "^7.3.0",
-    "flow-bin": "^0.63.1",
-    "react": "^16.3.1",
-    "react-native": "^0.56.0"
+    "flow-bin": "^0.86.0",
+    "react": "^16.8.3",
+    "react-native": "^0.58.6"
+  },
+  "dependencies": {
+    "@types/react": "^16.8.8"
   }
 }

README.md

@@ -24,5 +24,31 @@ # react-native-safe-area
 ```diff
-+ pod 'react-native-safe-area', path: '../node_modules/react-native-safe-area'
+target 'YourProjectTarget' do
+
++   pod 'react-native-safe-area', path: '../node_modules/react-native-safe-area'
+
+end
 ```
 
+If you received error `jest-haste-map: Haste module naming collision: Duplicate module name: react-native`, add lines below to your Podfile and reinstall pods.
+
+```diff
+target 'YourProjectTarget' do
+
++   rn_path = '../node_modules/react-native'
++   pod 'yoga', path: "#{rn_path}/ReactCommon/yoga/yoga.podspec"
++   pod 'React', path: rn_path
+
+  pod 'react-native-safe-area', path: '../node_modules/react-native-safe-area'
+
+end
+
++ post_install do |installer|
++   installer.pods_project.targets.each do |target|
++     if target.name == "React"
++       target.remove_from_project
++     end
++   end
++ end
+```
+
 #### react-native link
@@ -29,0 +55,0 @@

New alerts

AI-detected possible typosquat

Supply chain risk

AI has identified this package as a potential typosquat of a more popular package. This suggests that the package may be intentionally mimicking another package's name, description, or other metadata.

Found 1 instance in 1 package

Improved metrics

Lines of code

362

23.97%

Number of lines in readme file

194

15.48%

Worsened metrics

Total package byte prevSize

38322

-37.6%

Dependency count

1

Infinity%

Number of package files

18

-10%

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• + Added

  @types/react@^16.8.8

• + Added

  @types/prop-types@15.7.14
  (transitive)

• + Added

  @types/react@16.14.65
  (transitive)

• + Added

  @types/scheduler@0.16.8
  (transitive)

• + Added

  csstype@3.1.3
  (transitive)