Skip to content

Polish new app screen component styling #24783

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
eliperkins wants to merge 9 commits into from
Closed

Polish new app screen component styling #24783

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a0291a4
Remove SafeAreaViews in favor of using ScrollView's inset behavior
eliperkins May 9, 2019
d52dbe0
Fix usage of sectionDescription style on description texts
eliperkins May 9, 2019
fbf4bf5
Simplify new app header styles
eliperkins May 9, 2019
9b47135
Remove extra view in favor of styling ImageBackground
eliperkins May 9, 2019
594b299
Fix background styling on new app screen
eliperkins May 9, 2019
6060f26
Use negative margins to offset logo in NewAppScreen header image
eliperkins May 9, 2019
9a4bb86
Split vertical padding into two separate values
eliperkins May 9, 2019
abecbfa
Clarify comment about background image
eliperkins May 9, 2019
4f29e9f
Use 96px padding on top
eliperkins May 9, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 20 additions & 21 deletions Libraries/NewAppScreen/components/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Copy link
Copy Markdown
Contributor

@cpojer cpojer May 9, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm landing it as is but here is a thought: what if this said "Welcome to React" instead? Do you dare to make that change in a PR?

Copy link
Copy Markdown
Contributor Author

@eliperkins eliperkins May 9, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're a bold one, @cpojer: #24785

</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',
/*
Copy link
Copy Markdown
Contributor Author

@eliperkins eliperkins May 9, 2019

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had a rough time trying to make the full React logo be nice and offset like in the designs.

Another thought I had here is to use a 9-patch-like rectangular image for the background, where the React logo is already cropped, and then fix it to the bottom left corner of this component, to ensure a consistent background image across platforms.

* 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,
Expand Down
83 changes: 36 additions & 47 deletions Libraries/NewAppScreen/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ import {
Text,
Platform,
StatusBar,
SafeAreaView,
} from 'react-native';

import Header from './components/Header';
Expand Down Expand Up @@ -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.
Expand All @@ -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',
Expand Down