Add Avoid The Notch With SafeAreaView as the first react_native til

react_native/avoid-the-notch-with-safeareaview.md

@@ -0,0 +1,28 @@
+# Avoid The Notch With SafeAreaView
+
+iOS devices, especially the iPhone X, have areas of the screen that are cut
+off in ways that present quite a challenge to developers. One of the easiest
+ways to deal with rounded corners and the notch when developing for iOS is
+to avoid them all together.
+
+> The purpose of `SafeAreaView` is to render content within the safe area
+> boundaries of a device.
+
+```javascript
+import { SafeAreaView, View, Text } from 'react-native';
+
+const App = () => {
+  return (
+    <SafeAreaView style={{ flex: 1, backgroundColor: "#e6e6e6" }}>
+      <View>
+        <Text>Safely rendered in the visible area of the device!</Text>
+      </View>
+    </SafeAreaView>
+  );
+}
+```
+
+The _unsafe_ area can be styled however you like and everything inside
+`<SafeAreaView>` will be pushed into the visible area of the screen.
+
+[source](https://facebook.github.io/react-native/docs/safeareaview.html)