From a9e8a71e531510baf126780cecdcbc64c934f4dd Mon Sep 17 00:00:00 2001
From: Lucas Bento <lucas.bsilva@outlook.com>
Date: Wed, 15 May 2019 08:25:21 -0700
Subject: [PATCH] Add `SafeAreaView` to not have content behind `StatusBar` in
 iOS (#24868)

Summary:
This PR fixes the content being shown behind the `StatusBar` in the new app template, was only happening in iOS.

## Changelog

[General] [Changed] - Fix content being shown behind `StatusBar` in the new app template.
Pull Request resolved: https://github.com/facebook/react-native/pull/24868

Differential Revision: D15353748

Pulled By: cpojer

fbshipit-source-id: 4c84a65d9f8e85e5558d447533e381126c971e38
---
 template/App.js | 76 ++++++++++++++++++++++++++++---------------------
 1 file changed, 43 insertions(+), 33 deletions(-)

diff --git a/template/App.js b/template/App.js
index ebf0a678c96..dd19a99df0e 100644
--- a/template/App.js
+++ b/template/App.js
@@ -7,7 +7,14 @@
  */
 
 import React, {Fragment} from 'react';
-import {StyleSheet, ScrollView, View, Text, StatusBar} from 'react-native';
+import {
+  SafeAreaView,
+  StyleSheet,
+  ScrollView,
+  View,
+  Text,
+  StatusBar,
+} from 'react-native';
 
 import {
   Header,
@@ -21,39 +28,42 @@ const App = () => {
   return (
     <Fragment>
       <StatusBar barStyle="dark-content" />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={styles.scrollView}>
-        <Header />
-        <View style={styles.body}>
-          <View style={styles.sectionContainer}>
-            <Text style={styles.sectionTitle}>Step One</Text>
-            <Text style={styles.sectionDescription}>
-              Edit <Text style={styles.highlight}>App.js</Text> to change this
-              screen and then come back to see your edits.
-            </Text>
+      <SafeAreaView>
+        <ScrollView
+          contentInsetAdjustmentBehavior="automatic"
+          style={styles.scrollView}>
+          <Header />
+          <View style={styles.body}>
+            <View style={styles.sectionContainer}>
+              <Text style={styles.sectionTitle}>Step One</Text>
+              <Text style={styles.sectionDescription}>
+                Edit <Text style={styles.highlight}>App.js</Text> to change this
+                screen and then come back to see your edits.
+              </Text>
+            </View>
+            <View style={styles.sectionContainer}>
+              <Text style={styles.sectionTitle}>See Your Changes</Text>
+              <Text style={styles.sectionDescription}>
+                <ReloadInstructions />
+              </Text>
+            </View>
+            <View style={styles.sectionContainer}>
+              <Text style={styles.sectionTitle}>Debug</Text>
+              <Text style={styles.sectionDescription}>
+                <DebugInstructions />
+              </Text>
+            </View>
+            <View style={styles.sectionContainer}>
+              <Text style={styles.sectionTitle}>Learn More</Text>
+              <Text style={styles.sectionDescription}>
+                Read the docs on what to do once seen how to work in React
+                Native.
+              </Text>
+            </View>
+            <LearnMoreLinks />
           </View>
-          <View style={styles.sectionContainer}>
-            <Text style={styles.sectionTitle}>See Your Changes</Text>
-            <Text style={styles.sectionDescription}>
-              <ReloadInstructions />
-            </Text>
-          </View>
-          <View style={styles.sectionContainer}>
-            <Text style={styles.sectionTitle}>Debug</Text>
-            <Text style={styles.sectionDescription}>
-              <DebugInstructions />
-            </Text>
-          </View>
-          <View style={styles.sectionContainer}>
-            <Text style={styles.sectionTitle}>Learn More</Text>
-            <Text style={styles.sectionDescription}>
-              Read the docs on what to do once seen how to work in React Native.
-            </Text>
-          </View>
-          <LearnMoreLinks />
-        </View>
-      </ScrollView>
+        </ScrollView>
+      </SafeAreaView>
     </Fragment>
   );
 };