Facebook/react-native
1
0
Fork 0
mirror of https://github.com/facebook/react-native.git synced 2025-11-01 09:14:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add SafeAreaView to not have content behind StatusBar in iOS (#24868)

Browse Source 
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
This commit is contained in:
Lucas Bento
2019-05-15 08:31:49 -07:00
committed by Facebook Github Bot
parent 654868da33
commit a9e8a71e53
1 changed files with 43 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
template/App.js
+43 -33
View File
@@ -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>
);
};