Add a SafeAreaView component (#15)

* Add a SafeAreaView component

* Update README.md

README.md

@@ -120,6 +120,20 @@ class ClassComponent extends React.Component {
 }
 ```
 
+Usage with `SafeAreaView`:
+
+```js
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+function SomeComponent() {
+  return (
+    <SafeAreaView>
+      <View />
+    </SafeAreaView>
+  );
+}
+```
+
 ## Resources
 
-- Great article about how this libary can be used: https://dev.to/brunolemos/adding-notch-support-to-your-react-native-android-app-3ci3
+- Great article about how this library can be used: https://dev.to/brunolemos/adding-notch-support-to-your-react-native-android-app-3ci3

src/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, ViewProps } from 'react-native';
 import { EdgeInsets, InsetChangedEvent } from './SafeArea.types';
 import NativeSafeAreaView from './NativeSafeAreaView';
 
@@ -53,4 +53,26 @@ export function useSafeArea(): EdgeInsets {
   return safeArea;
 }
 
+export function SafeAreaView({
+  style,
+  ...rest
+}: ViewProps & { children: React.ReactNode }) {
+  const insets = useSafeArea();
+
+  return (
+    <View
+      style={[
+        {
+          paddingTop: insets.top,
+          paddingRight: insets.right,
+          paddingBottom: insets.bottom,
+          paddingLeft: insets.left,
+        },
+        style,
+      ]}
+      {...rest}
+    />
+  );
+}
+
 export type EdgeInsets = EdgeInsets;