Skip to content
Permalink
Browse files

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
  • Loading branch information...
eliperkins authored and facebook-github-bot committed May 9, 2019
1 parent 4e37d37 commit 233fddbe012098dce3719ba066d3dc653e05e6c9
Showing with 56 additions and 68 deletions.
  1. +20 −21 Libraries/NewAppScreen/components/Header.js
  2. +36 −47 Libraries/NewAppScreen/index.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,
@@ -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',

0 comments on commit 233fddb

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