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

Comparing version 0.1.3 to 0.2.0

.eslintrc.json

@@ -8,3 +8,4 @@ {
     "eslint:recommended",
-    "plugin:react/recommended"
+    "plugin:react/recommended",
+    "plugin:flowtype/recommended"
   ],
@@ -20,3 +21,4 @@ "parser": "babel-eslint",
   "plugins": [
-    "react"
+    "react",
+    "flowtype"
   ],
@@ -39,4 +41,5 @@ "rules": {
       "never"
-    ]
+    ],
+    "no-unused-vars": ["warn", { "args": "none" }]
   }
 }

index.android.js

@@ -0,9 +1,23 @@
+/**
+ * @flow
+ */
 'use strict'
 
+import type EmitterSubscription from 'EmitterSubscription'
+
+export type SafeAreaInsets = { top: number, left: number, bottom: number, right: number };
+
 class SafeArea {
-  getSafeAreaInsetsForRootView() {
+  getSafeAreaInsetsForRootView(): Promise<{ safeAreaInsets: SafeAreaInsets }> {
     return Promise.resolve({ safeAreaInsets: { top: 0, left: 0, bottom: 0, right: 0 } })
   }
+
+  addEventListener(eventType: string, listener: Function, context: ?Object): ?EmitterSubscription {
+    return null
+  }
+
+  removeEventListener(eventType: string, listener: Function): void {
+  }
 }
 
-module.exports = new SafeArea()
+export default new SafeArea()

index.ios.js

@@ -0,7 +1,28 @@
+/**
+ * @flow
+ */
 'use strict'
 
-import { NativeModules } from 'react-native'
+import { NativeModules, NativeEventEmitter } from 'react-native'
+import type EmitterSubscription from 'EmitterSubscription'
 
-const SafeArea = NativeModules.RNSafeArea
+export type SafeAreaInsets = { top: number, left: number, bottom: number, right: number };
 
-module.exports = SafeArea
+const nativeModule = NativeModules.RNSafeArea
+const nativeEventEmitter = new NativeEventEmitter(nativeModule)
+
+class SafeArea {
+  getSafeAreaInsetsForRootView(): Promise<{ safeAreaInsets: SafeAreaInsets }> {
+    return nativeModule.getSafeAreaInsetsForRootView()
+  }
+
+  addEventListener(eventType: string, listener: Function, context: ?Object): ?EmitterSubscription {
+    return nativeEventEmitter.addListener(eventType, listener, context)
+  }
+
+  removeEventListener(eventType: string, listener: Function): void {
+    nativeEventEmitter.removeListener(eventType, listener)
+  }
+}
+
+export default new SafeArea()

package.json

 {
   "name": "react-native-safe-area",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "React Native module to get Safe Area Insets for iOS 11 or later",
@@ -8,2 +8,3 @@ "main": "index",
     "lint": "eslint .",
+    "flow": "flow --show-all-errors",
     "test": "npm run lint"
@@ -27,6 +28,10 @@ },
     "babel-eslint": "^8.0.0",
+    "babel-preset-flow": "^6.23.0",
     "babel-preset-react-native": "^3.0.2",
     "eslint": "^4.6.1",
-    "eslint-plugin-react": "^7.3.0"
+    "eslint-plugin-flowtype": "^2.38.0",
+    "eslint-plugin-react": "^7.3.0",
+    "flow-bin": "^0.53.1",
+    "react-native": "^0.48.4"
   }
 }

README.md

 # react-native-safe-area
-React Native module to get Safe Area Insets for iOS 11 or later.
 
-# Installation
+React Native module to retrieve safe area insets for iOS 11 or later.
 
+## Installation
+
 ```shell
 npm install --save react-native-safe-area
-react-native link
+react-native link react-native-safe-area
 ```
 
-# How to use
+## Usage
 
 ```jsx
 import SafeArea from 'react-native-safe-area'
+```
 
+If you want to use `SafeAreaInsets` type, you can import it like below:
+
+```jsx
+import SafeArea, { type SafeAreaInsets } from 'react-native-safe-area'
+```
+
+### Retrieve safe area insets for root view
+
+```jsx
 SafeArea.getSafeAreaInsetsForRootView()
   .then((result) => {
-    console.log(result) // { safeAreaInsets: { bottom: 0, top: 0, left: 0, right: 0 } }
+    console.log(result)
+    // { safeAreaInsets: { top: 44, left: 0, bottom: 34, right: 0 } }
   })
 ```
+
+### Handle safe area insets changed event
+
+```jsx
+class App extends Component<{}> {
+  // To keep the context of 'this'
+  onSafeAreaInsetsForRootViewChange = this.onSafeAreaInsetsForRootViewChange.bind(this)
+
+  componentDidMount() {
+    // Add event listener
+    SafeArea.addEventListener('safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsForRootViewChange)
+  }
+
+  componentWillUnmount() {
+    // Remove event listener
+    SafeArea.removeEventListener('safeAreaInsetsForRootViewDidChange', this.onSafeAreaInsetsForRootViewChange)
+  }
+
+  onSafeAreaInsetsForRootViewChange(result) {
+    // Called every time that safe area insets changed
+    console.log(result)
+    // { safeAreaInsets: { top: 0, left: 44, bottom: 21, right: 44 } }
+  }
+}
+```

No alert changes

Improved metrics

Lines of code

80

60%

Number of lines in readme file

58

176.19%

Worsened metrics

Total package byte prevSize

20081

-44.55%

Dev dependency count

8

100%

No dependency changes