diff --git a/README.md b/README.md index 0867dbc..20ae259 100644 --- a/README.md +++ b/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) diff --git a/react_native/avoid-the-notch-with-safeareaview.md b/react_native/avoid-the-notch-with-safeareaview.md new file mode 100644 index 0000000..6eb7306 --- /dev/null +++ b/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 ( + + + Safely rendered in the visible area of the device! + + + ); +} +``` + +The _unsafe_ area can be styled however you like and everything inside +`` will be pushed into the visible area of the screen. + +[source](https://facebook.github.io/react-native/docs/safeareaview.html)