Skip to content

Commit

Permalink
Add SafeAreaView to not have content behind StatusBar in iOS (#24868
Browse files Browse the repository at this point in the history
)

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 a9e8a71
Showing 1 changed file with 43 additions and 33 deletions.
76 changes: 43 additions & 33 deletions template/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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>
);
};
Expand Down

0 comments on commit a9e8a71

Please sign in to comment.