-
Notifications
You must be signed in to change notification settings - Fork 24.4k
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
Adds _lineHeight = NAN; to RCTTextAttributes #18340
Conversation
Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need the corporate CLA signed. If you have received this in error or have any questions, please contact us at [email protected]. Thanks! |
Generated by 🚫 dangerJS |
Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@shergin is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.
@aparedes ❤️ |
Summary: <!-- Thank you for sending the PR! We appreciate you spending the time to work on these changes. Help us understand your motivation by explaining why you decided to make this change. You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html Happy contributing! --> On iOS, when the parent Text contains the `lineHeight` style prop, and the children are also Text components they don't inherit the lineHeight prop. This is for **iOS** only. Create a react-native project with React Native 0.54.0 or 0.54.1 and change the app to: ```js import React, { Component } from 'react'; import { StyleSheet, Text, View } from 'react-native'; type Props = {}; export default class App extends Component<Props> { render() { return ( <View style={styles.container}> <Text style={{ fontWeight: 'bold', lineHeight: 40 }}> <Text style={{ color: 'orange' }}>I am bold and orange, </Text> <Text style={{ color: 'red' }}>I am bold and red, </Text> <Text style={{ color: 'blue' }}>I am bold and blue, </Text> <Text style={{ color: 'purple' }}>I am bold and purple, </Text> <Text style={{ color: 'yellow' }}>I am bold and yellow, </Text> <Text style={{ color: 'pink' }}>I am bold and pink</Text> </Text> </View> ); } } const styles = StyleSheet.create({ container: { backgroundColor: 'black', flex: 1, justifyContent: 'center', padding: 50, }, }); ``` It displays: ![iphone - 2018-03-12 at 21 51 53](https://user-images.githubusercontent.com/480605/37308941-b56f082e-263f-11e8-9c23-892f77077169.png) But should look like: ![iphone - 2018-03-12 at 21 48 15](https://user-images.githubusercontent.com/480605/37308784-4efaddf2-263f-11e8-992b-ee0b6bb9a97b.png) New <Text> iOS facebook@2716f53 <!-- Help reviewers and the release process by writing your own release notes **INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.** CATEGORY [----------] TYPE [ CLI ] [-------------] LOCATION [ DOCS ] [ BREAKING ] [-------------] [ GENERAL ] [ BUGFIX ] [-{Component}-] [ INTERNAL ] [ ENHANCEMENT ] [ {File} ] [ IOS ] [ FEATURE ] [ {Directory} ] |-----------| [ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} | [----------] [-------------] [-------------] |-----------| [CATEGORY] [TYPE] [LOCATION] - MESSAGE EXAMPLES: [IOS] [BREAKING] [FlatList] - Change a thing that breaks other things [ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput [CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with [DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word [GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position [INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see --> [IOS] [MINOR] [Text] - Inherit lineheight Closes facebook#18340 Differential Revision: D7276655 Pulled By: shergin fbshipit-source-id: 0fe26536bb74da77be8405911fc699a622bc0b2f
Summary: <!-- Thank you for sending the PR! We appreciate you spending the time to work on these changes. Help us understand your motivation by explaining why you decided to make this change. You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html Happy contributing! --> On iOS, when the parent Text contains the `lineHeight` style prop, and the children are also Text components they don't inherit the lineHeight prop. This is for **iOS** only. Create a react-native project with React Native 0.54.0 or 0.54.1 and change the app to: ```js import React, { Component } from 'react'; import { StyleSheet, Text, View } from 'react-native'; type Props = {}; export default class App extends Component<Props> { render() { return ( <View style={styles.container}> <Text style={{ fontWeight: 'bold', lineHeight: 40 }}> <Text style={{ color: 'orange' }}>I am bold and orange, </Text> <Text style={{ color: 'red' }}>I am bold and red, </Text> <Text style={{ color: 'blue' }}>I am bold and blue, </Text> <Text style={{ color: 'purple' }}>I am bold and purple, </Text> <Text style={{ color: 'yellow' }}>I am bold and yellow, </Text> <Text style={{ color: 'pink' }}>I am bold and pink</Text> </Text> </View> ); } } const styles = StyleSheet.create({ container: { backgroundColor: 'black', flex: 1, justifyContent: 'center', padding: 50, }, }); ``` It displays: ![iphone - 2018-03-12 at 21 51 53](https://user-images.githubusercontent.com/480605/37308941-b56f082e-263f-11e8-9c23-892f77077169.png) But should look like: ![iphone - 2018-03-12 at 21 48 15](https://user-images.githubusercontent.com/480605/37308784-4efaddf2-263f-11e8-992b-ee0b6bb9a97b.png) New <Text> iOS facebook@2716f53 <!-- Help reviewers and the release process by writing your own release notes **INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.** CATEGORY [----------] TYPE [ CLI ] [-------------] LOCATION [ DOCS ] [ BREAKING ] [-------------] [ GENERAL ] [ BUGFIX ] [-{Component}-] [ INTERNAL ] [ ENHANCEMENT ] [ {File} ] [ IOS ] [ FEATURE ] [ {Directory} ] |-----------| [ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} | [----------] [-------------] [-------------] |-----------| [CATEGORY] [TYPE] [LOCATION] - MESSAGE EXAMPLES: [IOS] [BREAKING] [FlatList] - Change a thing that breaks other things [ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput [CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with [DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word [GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position [INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see --> [IOS] [MINOR] [Text] - Inherit lineheight Closes facebook#18340 Differential Revision: D7276655 Pulled By: shergin fbshipit-source-id: 0fe26536bb74da77be8405911fc699a622bc0b2f
Summary: <!-- Thank you for sending the PR! We appreciate you spending the time to work on these changes. Help us understand your motivation by explaining why you decided to make this change. You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html Happy contributing! --> On iOS, when the parent Text contains the `lineHeight` style prop, and the children are also Text components they don't inherit the lineHeight prop. This is for **iOS** only. Create a react-native project with React Native 0.54.0 or 0.54.1 and change the app to: ```js import React, { Component } from 'react'; import { StyleSheet, Text, View } from 'react-native'; type Props = {}; export default class App extends Component<Props> { render() { return ( <View style={styles.container}> <Text style={{ fontWeight: 'bold', lineHeight: 40 }}> <Text style={{ color: 'orange' }}>I am bold and orange, </Text> <Text style={{ color: 'red' }}>I am bold and red, </Text> <Text style={{ color: 'blue' }}>I am bold and blue, </Text> <Text style={{ color: 'purple' }}>I am bold and purple, </Text> <Text style={{ color: 'yellow' }}>I am bold and yellow, </Text> <Text style={{ color: 'pink' }}>I am bold and pink</Text> </Text> </View> ); } } const styles = StyleSheet.create({ container: { backgroundColor: 'black', flex: 1, justifyContent: 'center', padding: 50, }, }); ``` It displays: ![iphone - 2018-03-12 at 21 51 53](https://user-images.githubusercontent.com/480605/37308941-b56f082e-263f-11e8-9c23-892f77077169.png) But should look like: ![iphone - 2018-03-12 at 21 48 15](https://user-images.githubusercontent.com/480605/37308784-4efaddf2-263f-11e8-992b-ee0b6bb9a97b.png) New <Text> iOS facebook@2716f53 <!-- Help reviewers and the release process by writing your own release notes **INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.** CATEGORY [----------] TYPE [ CLI ] [-------------] LOCATION [ DOCS ] [ BREAKING ] [-------------] [ GENERAL ] [ BUGFIX ] [-{Component}-] [ INTERNAL ] [ ENHANCEMENT ] [ {File} ] [ IOS ] [ FEATURE ] [ {Directory} ] |-----------| [ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} | [----------] [-------------] [-------------] |-----------| [CATEGORY] [TYPE] [LOCATION] - MESSAGE EXAMPLES: [IOS] [BREAKING] [FlatList] - Change a thing that breaks other things [ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput [CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with [DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word [GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position [INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see --> [IOS] [MINOR] [Text] - Inherit lineheight Closes facebook#18340 Differential Revision: D7276655 Pulled By: shergin fbshipit-source-id: 0fe26536bb74da77be8405911fc699a622bc0b2f
Summary: <!-- Thank you for sending the PR! We appreciate you spending the time to work on these changes. Help us understand your motivation by explaining why you decided to make this change. You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html Happy contributing! --> On iOS, when the parent Text contains the `lineHeight` style prop, and the children are also Text components they don't inherit the lineHeight prop. This is for **iOS** only. Create a react-native project with React Native 0.54.0 or 0.54.1 and change the app to: ```js import React, { Component } from 'react'; import { StyleSheet, Text, View } from 'react-native'; type Props = {}; export default class App extends Component<Props> { render() { return ( <View style={styles.container}> <Text style={{ fontWeight: 'bold', lineHeight: 40 }}> <Text style={{ color: 'orange' }}>I am bold and orange, </Text> <Text style={{ color: 'red' }}>I am bold and red, </Text> <Text style={{ color: 'blue' }}>I am bold and blue, </Text> <Text style={{ color: 'purple' }}>I am bold and purple, </Text> <Text style={{ color: 'yellow' }}>I am bold and yellow, </Text> <Text style={{ color: 'pink' }}>I am bold and pink</Text> </Text> </View> ); } } const styles = StyleSheet.create({ container: { backgroundColor: 'black', flex: 1, justifyContent: 'center', padding: 50, }, }); ``` It displays: ![iphone - 2018-03-12 at 21 51 53](https://user-images.githubusercontent.com/480605/37308941-b56f082e-263f-11e8-9c23-892f77077169.png) But should look like: ![iphone - 2018-03-12 at 21 48 15](https://user-images.githubusercontent.com/480605/37308784-4efaddf2-263f-11e8-992b-ee0b6bb9a97b.png) New <Text> iOS facebook@2716f53 <!-- Help reviewers and the release process by writing your own release notes **INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.** CATEGORY [----------] TYPE [ CLI ] [-------------] LOCATION [ DOCS ] [ BREAKING ] [-------------] [ GENERAL ] [ BUGFIX ] [-{Component}-] [ INTERNAL ] [ ENHANCEMENT ] [ {File} ] [ IOS ] [ FEATURE ] [ {Directory} ] |-----------| [ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} | [----------] [-------------] [-------------] |-----------| [CATEGORY] [TYPE] [LOCATION] - MESSAGE EXAMPLES: [IOS] [BREAKING] [FlatList] - Change a thing that breaks other things [ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput [CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with [DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word [GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position [INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see --> [IOS] [MINOR] [Text] - Inherit lineheight Closes facebook#18340 Differential Revision: D7276655 Pulled By: shergin fbshipit-source-id: 0fe26536bb74da77be8405911fc699a622bc0b2f
Summary: <!-- Thank you for sending the PR! We appreciate you spending the time to work on these changes. Help us understand your motivation by explaining why you decided to make this change. You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html Happy contributing! --> On iOS, when the parent Text contains the `lineHeight` style prop, and the children are also Text components they don't inherit the lineHeight prop. This is for **iOS** only. Create a react-native project with React Native 0.54.0 or 0.54.1 and change the app to: ```js import React, { Component } from 'react'; import { StyleSheet, Text, View } from 'react-native'; type Props = {}; export default class App extends Component<Props> { render() { return ( <View style={styles.container}> <Text style={{ fontWeight: 'bold', lineHeight: 40 }}> <Text style={{ color: 'orange' }}>I am bold and orange, </Text> <Text style={{ color: 'red' }}>I am bold and red, </Text> <Text style={{ color: 'blue' }}>I am bold and blue, </Text> <Text style={{ color: 'purple' }}>I am bold and purple, </Text> <Text style={{ color: 'yellow' }}>I am bold and yellow, </Text> <Text style={{ color: 'pink' }}>I am bold and pink</Text> </Text> </View> ); } } const styles = StyleSheet.create({ container: { backgroundColor: 'black', flex: 1, justifyContent: 'center', padding: 50, }, }); ``` It displays: ![iphone - 2018-03-12 at 21 51 53](https://user-images.githubusercontent.com/480605/37308941-b56f082e-263f-11e8-9c23-892f77077169.png) But should look like: ![iphone - 2018-03-12 at 21 48 15](https://user-images.githubusercontent.com/480605/37308784-4efaddf2-263f-11e8-992b-ee0b6bb9a97b.png) New <Text> iOS facebook@2716f53 <!-- Help reviewers and the release process by writing your own release notes **INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.** CATEGORY [----------] TYPE [ CLI ] [-------------] LOCATION [ DOCS ] [ BREAKING ] [-------------] [ GENERAL ] [ BUGFIX ] [-{Component}-] [ INTERNAL ] [ ENHANCEMENT ] [ {File} ] [ IOS ] [ FEATURE ] [ {Directory} ] |-----------| [ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} | [----------] [-------------] [-------------] |-----------| [CATEGORY] [TYPE] [LOCATION] - MESSAGE EXAMPLES: [IOS] [BREAKING] [FlatList] - Change a thing that breaks other things [ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput [CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with [DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word [GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position [INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see --> [IOS] [MINOR] [Text] - Inherit lineheight Closes facebook#18340 Differential Revision: D7276655 Pulled By: shergin fbshipit-source-id: 0fe26536bb74da77be8405911fc699a622bc0b2f
Summary: <!-- Thank you for sending the PR! We appreciate you spending the time to work on these changes. Help us understand your motivation by explaining why you decided to make this change. You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html Happy contributing! --> On iOS, when the parent Text contains the `lineHeight` style prop, and the children are also Text components they don't inherit the lineHeight prop. This is for **iOS** only. Create a react-native project with React Native 0.54.0 or 0.54.1 and change the app to: ```js import React, { Component } from 'react'; import { StyleSheet, Text, View } from 'react-native'; type Props = {}; export default class App extends Component<Props> { render() { return ( <View style={styles.container}> <Text style={{ fontWeight: 'bold', lineHeight: 40 }}> <Text style={{ color: 'orange' }}>I am bold and orange, </Text> <Text style={{ color: 'red' }}>I am bold and red, </Text> <Text style={{ color: 'blue' }}>I am bold and blue, </Text> <Text style={{ color: 'purple' }}>I am bold and purple, </Text> <Text style={{ color: 'yellow' }}>I am bold and yellow, </Text> <Text style={{ color: 'pink' }}>I am bold and pink</Text> </Text> </View> ); } } const styles = StyleSheet.create({ container: { backgroundColor: 'black', flex: 1, justifyContent: 'center', padding: 50, }, }); ``` It displays: ![iphone - 2018-03-12 at 21 51 53](https://user-images.githubusercontent.com/480605/37308941-b56f082e-263f-11e8-9c23-892f77077169.png) But should look like: ![iphone - 2018-03-12 at 21 48 15](https://user-images.githubusercontent.com/480605/37308784-4efaddf2-263f-11e8-992b-ee0b6bb9a97b.png) New <Text> iOS facebook@2716f53 <!-- Help reviewers and the release process by writing your own release notes **INTERNAL and MINOR tagged notes will not be included in the next version's final release notes.** CATEGORY [----------] TYPE [ CLI ] [-------------] LOCATION [ DOCS ] [ BREAKING ] [-------------] [ GENERAL ] [ BUGFIX ] [-{Component}-] [ INTERNAL ] [ ENHANCEMENT ] [ {File} ] [ IOS ] [ FEATURE ] [ {Directory} ] |-----------| [ ANDROID ] [ MINOR ] [ {Framework} ] - | {Message} | [----------] [-------------] [-------------] |-----------| [CATEGORY] [TYPE] [LOCATION] - MESSAGE EXAMPLES: [IOS] [BREAKING] [FlatList] - Change a thing that breaks other things [ANDROID] [BUGFIX] [TextInput] - Did a thing to TextInput [CLI] [FEATURE] [local-cli/info/info.js] - CLI easier to do things with [DOCS] [BUGFIX] [GettingStarted.md] - Accidentally a thing/word [GENERAL] [ENHANCEMENT] [Yoga] - Added new yoga thing/position [INTERNAL] [FEATURE] [./scripts] - Added thing to script that nobody will see --> [IOS] [MINOR] [Text] - Inherit lineheight Closes facebook#18340 Differential Revision: D7276655 Pulled By: shergin fbshipit-source-id: 0fe26536bb74da77be8405911fc699a622bc0b2f
Motivation
On iOS, when the parent Text contains the
lineHeight
style prop, and the children are also Text components they don't inherit the lineHeight prop.Test Plan
This is for iOS only.
Create a react-native project with React Native 0.54.0 or 0.54.1 and change the app to:
It displays:
But should look like:
Related PRs
New <Text> iOS 2716f53
Release Notes
[IOS] [MINOR] [Text] - Inherit lineheight