Polish new app screen component styling (#24783)

Summary: Related to #24760 and #24737 This simplifies some styling within the components used for the New App Screen to help advocate for best practices when styling with CSS-like styles in React Native, as well as using React Native's own unique components. There's a bit more detail in each commit. Let me know if you'd like me to pull that info out into the PR description here! [General] [Changed] - Polished up new app screen component styling Pull Request resolved: #24783 Differential Revision: D15284851 Pulled By: cpojer fbshipit-source-id: 954db00d39fc0082bbd4dc96afa7d38dfb7f67d5
facebook · May 9, 2019 · 233fddb · 233fddb
1 parent 4e37d37
commit 233fddb
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 68 deletions.
diff --git a/Libraries/NewAppScreen/components/Header.js b/Libraries/NewAppScreen/components/Header.js
@@ -11,39 +11,38 @@
 'use strict';
 
 import React from 'react';
-import {View, Text, StyleSheet, ImageBackground} from 'react-native';
+import {Text, StyleSheet, ImageBackground} from 'react-native';
 import Colors from './Colors';
 
 const Header = () => (
-  <View style={styles.container}>
-    <ImageBackground
-      accessibilityRole={'image'}
-      source={require('./logo.png')}
-      style={styles.backgroundLogo}
-    />
-
+  <ImageBackground
+    accessibilityRole={'image'}
+    source={require('./logo.png')}
+    style={styles.background}
+    imageStyle={styles.logo}>
     <Text style={styles.text}>Welcome to React Native</Text>
-  </View>
+  </ImageBackground>
 );
 
 const styles = StyleSheet.create({
-  container: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingTop: 100,
+  background: {
     paddingBottom: 40,
+    paddingTop: 96,
     paddingHorizontal: 32,
     backgroundColor: Colors.lighter,
   },
-  backgroundLogo: {
-    position: 'absolute',
-    top: -20,
-    left: -200,
+  logo: {
     opacity: 0.2,
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: 540,
-    width: 540,
+    overflow: 'visible',
+    resizeMode: 'cover',
+    /*
+     * These negative margins allow the image to be offset similarly across screen sizes and component sizes.
+     *
+     * The source logo.png image is 512x512px, so as such, these margins attempt to be relative to the
+     * source image's size.
+     */
+    marginLeft: -128,
+    marginBottom: -192,
   },
   text: {
     fontSize: 40,

diff --git a/Libraries/NewAppScreen/index.js b/Libraries/NewAppScreen/index.js
@@ -18,7 +18,6 @@ import {
   Text,
   Platform,
   StatusBar,
-  SafeAreaView,
 } from 'react-native';
 
 import Header from './components/Header';
@@ -51,7 +50,7 @@ const DebugInstructions = () => {
       Native debug menu.
     </Text>
   ) : (
-    <Text>
+    <Text style={styles.sectionDescription}>
       Press <Text style={styles.highlight}>menu button</Text> or
       <Text style={styles.highlight}>Shake</Text> your device to open the React
       Native debug menu.
@@ -62,64 +61,54 @@ const DebugInstructions = () => {
 const App = () => {
   return (
     <Fragment>
-      <SafeAreaView style={styles.topSafeArea} />
-
-      <SafeAreaView style={styles.bottomSafeArea}>
-        <StatusBar barStyle="dark-content" />
-        <ScrollView>
-          <Header />
-          <View style={styles.body}>
-            <Section>
-              <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>
-            </Section>
+      <StatusBar barStyle="dark-content" />
+      <ScrollView
+        contentInsetAdjustmentBehavior="automatic"
+        style={styles.scrollView}>
+        <Header />
+        <View style={styles.body}>
+          <Section>
+            <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>
+          </Section>
 
-            <Section>
-              <Text style={styles.sectionTitle}>See Your Changes</Text>
-              <Text style={styles.sectionDescription}>
-                <ReloadInstructions />
-              </Text>
-            </Section>
+          <Section>
+            <Text style={styles.sectionTitle}>See Your Changes</Text>
+            <ReloadInstructions />
+          </Section>
 
-            <Section>
-              <Text style={styles.sectionTitle}>Debug</Text>
-              <DebugInstructions />
-            </Section>
+          <Section>
+            <Text style={styles.sectionTitle}>Debug</Text>
+            <DebugInstructions />
+          </Section>
 
-            <Section>
-              <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>
-            </Section>
-            <LearnMoreLinks />
-          </View>
-        </ScrollView>
-      </SafeAreaView>
+          <Section>
+            <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>
+          </Section>
+          <LearnMoreLinks />
+        </View>
+      </ScrollView>
     </Fragment>
   );
 };
 
 const styles = StyleSheet.create({
-  sectionContainer: {
-    marginTop: 32,
-    paddingHorizontal: 24,
-  },
-  topSafeArea: {
-    flex: 0,
+  scrollView: {
     backgroundColor: Colors.lighter,
   },
-  bottomSafeArea: {
-    flex: 1,
-    backgroundColor: Colors.white,
-  },
   body: {
     backgroundColor: Colors.white,
   },
+  sectionContainer: {
+    marginTop: 32,
+    paddingHorizontal: 24,
+  },
   sectionTitle: {
     fontSize: 24,
     fontWeight: '600',