Skip to content
Permalink
Browse files

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
  • Loading branch information...
lucasbento authored and facebook-github-bot committed May 15, 2019
1 parent 654868d commit a9e8a71e531510baf126780cecdcbc64c934f4dd
Showing with 43 additions and 33 deletions.
  1. +43 −33 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>
);
};

0 comments on commit a9e8a71

Please sign in to comment.
You can’t perform that action at this time.