Restore SafeAreaView in sidebar

Author: hramos

docs/safeareaview.md

@@ -3,14 +3,16 @@ id: safeareaview
 title: SafeAreaView
 ---
 
-Render content within safe area boundaries of an device.
+The purpose of `SafeAreaView` is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices.
 
-iOS: Renders nested content and automatically applies paddings reflect the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor views. Moreover, and most importantly, Safe Area's paddings reflect physical limitation of the screen, such as rounded corners or camera notches (aka sensor housing area on iPhone X).
+`SafeAreaView` renders nested content and automatically applies paddings reflect the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor views. Moreover, and most importantly, Safe Area's paddings reflect the physical limitation of the screen, such as rounded corners or camera notches (i.e. the sensor housing area on iPhone X).
 
-Android: Not applicable.
+### Usage Example
+
+Simply wrap your top level view with a `SafeAreaView` with a `flex: 1` style applied to it. You may also want to use a background color that matches your application's design.
 
 ```javascript
-<SafeAreaView style={{flex: 1}}>
+<SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
   <View style={{flex: 1}}>
     <Text>Hello World!</Text>
   </View>

website/versioned_docs/version-0.50/safeareaview.md

@@ -4,14 +4,16 @@ title: SafeAreaView
 original_id: safeareaview
 ---
 
-Render content within safe area boundaries of an device.
+The purpose of `SafeAreaView` is to render content within the safe area boundaries of a device. It is currently only applicable to iOS devices.
 
-iOS: Renders nested content and automatically applies paddings reflect the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor views. Moreover, and most importantly, Safe Area's paddings reflect physical limitation of the screen, such as rounded corners or camera notches (aka sensor housing area on iPhone X).
+`SafeAreaView` renders nested content and automatically applies paddings reflect the portion of the view that is not covered by navigation bars, tab bars, toolbars, and other ancestor views. Moreover, and most importantly, Safe Area's paddings reflect the physical limitation of the screen, such as rounded corners or camera notches (i.e. the sensor housing area on iPhone X).
 
-Android: Not applicable.
+### Usage Example
+
+Simply wrap your top level view with a `SafeAreaView` with a `flex: 1` style applied to it. You may also want to use a background color that matches your application's design.
 
 ```javascript
-<SafeAreaView style={{flex: 1}}>
+<SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
   <View style={{flex: 1}}>
     <Text>Hello World!</Text>
   </View>

website/versioned_sidebars/version-0.52-sidebars.json

@@ -74,6 +74,7 @@
       "version-0.52-progressbarandroid",
       "version-0.52-progressviewios",
       "version-0.52-refreshcontrol",
+      "version-0.52-safeareaview",
       "version-0.52-scrollview",
       "version-0.52-sectionlist",
       "version-0.52-segmentedcontrolios",

website/versioned_sidebars/version-0.53-sidebars.json

@@ -74,6 +74,7 @@
       "version-0.53-progressbarandroid",
       "version-0.53-progressviewios",
       "version-0.53-refreshcontrol",
+      "version-0.53-safeareaview",
       "version-0.53-scrollview",
       "version-0.53-sectionlist",
       "version-0.53-segmentedcontrolios",

website/versioned_sidebars/version-0.54-sidebars.json

@@ -74,6 +74,7 @@
       "version-0.54-progressbarandroid",
       "version-0.54-progressviewios",
       "version-0.54-refreshcontrol",
+      "version-0.54-safeareaview",
       "version-0.54-scrollview",
       "version-0.54-sectionlist",
       "version-0.54-segmentedcontrolios",