Skip to content
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.

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

Polish new app screen component styling #24783

Closed
wants to merge 9 commits into from

Conversation

Projects
None yet
4 participants
@eliperkins
Copy link
Contributor

commented May 9, 2019

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!

Changelog

[General] [Changed] - Polished up new app screen component styling

Test Plan

Device Before After
iPhone Xʀ Simulator Screen Shot - iPhone Xʀ - 2019-05-09 at 14 54 20 Simulator Screen Shot - iPhone Xʀ - 2019-05-09 at 14 58 23
iPhone 5s Simulator Screen Shot - iPhone 5s - 2019-05-09 at 15 01 02 Simulator Screen Shot - iPhone 5s - 2019-05-09 at 15 00 52
iPad Pro (11-inch) Simulator Screen Shot - iPad Pro (11-inch) - 2019-05-09 at 15 34 26 Simulator Screen Shot - iPad Pro (11-inch) - 2019-05-09 at 15 34 14

eliperkins added some commits May 9, 2019

Remove SafeAreaViews in favor of using ScrollView's inset behavior
contentInsetAdjustmentBehavior will allow UIKit to adjust the contents of the
ScrollView without needing to manually account for safe area insets ourselves.
Fix usage of sectionDescription style on description texts
We were overapplying this style in one place, and not applying on Android in another
Simplify new app header styles
This removes many extraneous and complex styles to simplify this component
Split vertical padding into two separate values
This better matches the style given in the designs by @orta.
Use 96px padding on top
This is truer to the original design
width: 540,
overflow: 'visible',
resizeMode: 'cover',
/*

This comment has been minimized.

Copy link
@eliperkins

eliperkins May 9, 2019

Author Contributor

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.

@cpojer

cpojer approved these changes May 9, 2019

Copy link
Contributor

left a comment

I reviewed each individual commit and really appreciate how clear the individual steps are that you took and how easy it made it to validate your code. Your test plan is also awesome. This is pretty much the perfect Pull Request. Thank you.

@facebook-github-bot
Copy link

left a comment

@cpojer is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

accessibilityRole={'image'}
source={require('./logo.png')}
style={styles.background}
imageStyle={styles.logo}>
<Text style={styles.text}>Welcome to React Native</Text>

This comment has been minimized.

Copy link
@cpojer

cpojer May 9, 2019

Contributor

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?

This comment has been minimized.

Copy link
@eliperkins

eliperkins May 9, 2019

Author Contributor

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

@react-native-bot

This comment has been minimized.

Copy link
Collaborator

commented May 9, 2019

This pull request was successfully merged by @eliperkins in 233fddb.

When will my fix make it into a release? | Upcoming Releases

facebook-github-bot added a commit that referenced this pull request May 9, 2019

Change new app screen greeting (#24785)
Summary:
We're all friends here, right? 💗

Related to conversation in #24783: #24783 (comment)

We're just [making React run on phones](https://www.youtube.com/watch?v=xKu4kmVivFs&start=17&end=21), right?

[General] [Changed] - Updated new app greeting screen title 💗
Pull Request resolved: #24785

Differential Revision: D15286468

Pulled By: cpojer

fbshipit-source-id: eb73d1c870331f03766b237e9ccb3fa952463be0

@eliperkins eliperkins deleted the eliperkins:polish-new-app-screen branch May 9, 2019

facebook-github-bot added a commit that referenced this pull request May 17, 2019

Improves the copy for the new app screen (#24918)
Summary:
1. Consistency with full stops  (you can see screenshots in #24783 )
2. Improvements to the wording, describing what you're going to see

## Changelog

[Internal] [Fixed] - Improves the copy for the new app screen
Pull Request resolved: #24918

Differential Revision: D15391421

Pulled By: cpojer

fbshipit-source-id: 2ec6d2d5bd4845c5f4c699838ae865ab4217e49e
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.