Add Avoid The Notch With SafeAreaView as the first react_native til

README.md

@@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/).
 For a steady stream of TILs from a variety of rocketeers, checkout
 [til.hashrocket.com](https://til.hashrocket.com/).
 
-_673 TILs and counting..._
+_674 TILs and counting..._
 
 ---
 
@@ -33,6 +33,7 @@ _673 TILs and counting..._
 * [PostgreSQL](#postgresql)
 * [Rails](#rails)
 * [React](#react)
+* [React Native](#react-native)
 * [ReasonML](#reasonml)
 * [Ruby](#ruby)
 * [tmux](#tmux)
@@ -485,6 +486,10 @@ _673 TILs and counting..._
 - [Visually Select A React Element For Inspection](react/visually-select-a-react-element-for-inspection.md)
 - [Who Is Your Favorite Child?](react/who-is-your-favorite-child.md)
 
+### React Native
+
+- [Avoid The Notch With SafeAreaView](react_native/avoid-the-notch-with-safeareaview.md)
+
 ### ReasonML
 
 - [Defining Variants With Constructor Arguments](reason/defining-variants-with-constructor-arguments.md)

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)