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

eliperkins
Copy link
Contributor

@eliperkins eliperkins 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 9 commits May 9, 2019
contentInsetAdjustmentBehavior will allow UIKit to adjust the contents of the
ScrollView without needing to manually account for safe area insets ourselves.
We were overapplying this style in one place, and not applying on Android in another
This removes many extraneous and complex styles to simplify this component
This better matches the style given in the designs by @orta.
This is truer to the original design
@facebook-github-bot facebook-github-bot added the CLA Signed label May 9, 2019
width: 540,
overflow: 'visible',
resizeMode: 'cover',
/*
Copy link
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.

cpojer
cpojer approved these changes May 9, 2019
Copy link
Contributor

@cpojer cpojer 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.

Copy link
Contributor

@facebook-github-bot facebook-github-bot 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>
Copy link
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
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

@react-native-bot
Copy link
Collaborator

@react-native-bot react-native-bot 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

@react-native-bot react-native-bot added the Merged label May 9, 2019
facebook-github-bot pushed a commit that referenced this issue May 9, 2019
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 polish-new-app-screen branch May 9, 2019
facebook-github-bot pushed a commit that referenced this issue May 17, 2019
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
M-i-k-e-l pushed a commit to M-i-k-e-l/react-native that referenced this issue Mar 10, 2020
Summary:
1. Consistency with full stops  (you can see screenshots in facebook#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: facebook#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
Labels
CLA Signed Merged
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants