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

Comparing version 0.2.3 to 0.3.0

.eslintrc.json

@@ -40,4 +40,5 @@ {
     ],
-    "no-unused-vars": ["warn", { "args": "none" }]
+    "no-unused-vars": ["warn", { "args": "none" }],
+    "react/prop-types": "off"
   }
 }

package.json

 {
   "name": "react-native-safe-area",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "React Native module to get Safe Area Insets for iOS 11 or later",
-  "main": "index",
+  "main": "lib/index",
   "scripts": {
-    "lint": "eslint .",
+    "lint": "eslint lib",
     "flow": "flow --show-all-errors",
@@ -9,0 +9,0 @@ "test": "npm run lint"

README.md

 # react-native-safe-area
 
-React Native module to retrieve safe area insets for iOS 11 or later.
+React Native module to handle safe area insets natively for iOS 11 or later.
 
+![rnsf](https://user-images.githubusercontent.com/143255/40108466-e64b18d8-5935-11e8-992d-7fa7a636d129.gif)
+
 ## Installation
@@ -35,3 +37,62 @@
 
+### Work with views
+
+Use `withSafeArea` to apply safe area insets to views automatically.
+
 ```jsx
+import { withSafeArea } from 'react-native-safe-area'
+```
+
+#### withSafeArea(component[, applyTo][, direction])
+
+A higher-order component which applies safe area insets automatically to the wrapped component.
+
+- *component* - Wrapped component.
+- *applyTo* - (Optional) Specify property to apply safe area insets.
+    - `margin` - (Default) `style.margin`.
+    - `padding` - `style.padding`.
+    - `contentInset` - `contentInset` and `contentOffset` for scroll views.
+- *direction* - (Optional) Specify direction to apply safe area insets.
+    - `horizontal` - Apply to left and right.
+    - `vertical` - Apply to top and bottom.
+    - `both` - (Default) `horizontal` + `vertical`.
+
+##### Simple view example
+
+```jsx
+const SafeAreaView = withSafeArea(View, 'margin', 'both')
+
+class App extends Component<{}> {
+  render() {
+    return (
+      <SafeAreaView>
+        <View />
+      </SafeAreaView>
+    )
+  }
+}
+```
+
+##### ScrollView example
+
+```jsx
+const SafeAreaScrollView = withSafeArea(ScrollView, 'contentInset', 'vertical')
+
+class App extends Component<{}> {
+  render() {
+    return (
+      <SafeAreaScrollView>
+        <View />
+      </SafeAreaScrollView>
+    )
+  }
+}
+```
+
+You can also apply safe area insets to FlatList and SectionList.
+
+### Handle safe area manually
+
+
+```jsx
 import SafeArea from 'react-native-safe-area'
@@ -46,3 +107,3 @@ ```
 
-### Retrieve safe area insets for root view
+#### Retrieve safe area insets for root view
 
@@ -57,3 +118,3 @@ ```jsx
 
-### Handle safe area insets changed event
+#### Handle safe area insets changed event
 
@@ -60,0 +121,0 @@ ```jsx

No alert changes

Improved metrics

Total package byte prevSize

56157

54.18%

Number of package files

20

11.11%

Lines of code

177

92.39%

Number of lines in readme file

144

73.49%

No dependency changes