Safe Area

The devices you develop your project for, logically have different screen sizes. We obviously want to render our app well in every different Android phone and iPhone. There is such a diversity of phone designs out there, from 102% coverage screened smooth as butter specimens to chunky old notches and buttons infested fossils. We could scroll through the core components list and see if there's something useable there. And lo and behold, there's a SafeAreaView component that seems to do exactly what we want... but only for iOS...

Well, turns out there's a package available that solves our problems, react-native-safe-area-context. Using it works as follows. First install the package:

npm install react-native-safe-area-context

Then wrap the provider around your components and use SafeAreaView (imported from the package) in your components! We can try it out for now by moving all our Hello World! code to a new component, which we'll call Home. We can then import this component in App.