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: #24868 Differential Revision: D15353748 Pulled By: cpojer fbshipit-source-id: 4c84a65d9f8e85e5558d447533e381126c971e38
facebook · May 15, 2019 · a9e8a71 · a9e8a71
1 parent 654868d
commit a9e8a71
Showing 1 changed file with 43 additions and 33 deletions.
diff --git 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>
-          </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>
+      <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>
-          <LearnMoreLinks />
-        </View>
-      </ScrollView>
+        </ScrollView>
+      </SafeAreaView>
     </Fragment>
   );
 };