Skip to content

Avoid setting a lineHeight lower of the fontSize lineHeight with Text and TextInput - #44614

Closed
fabOnReact wants to merge 3 commits into
react:mainfrom
fabOnReact:add-check-line-height
Closed

Avoid setting a lineHeight lower of the fontSize lineHeight with Text and TextInput#44614
fabOnReact wants to merge 3 commits into
react:mainfrom
fabOnReact:add-check-line-height

Conversation

@fabOnReact

@fabOnReactfabOnReact commented May 20, 2024

Copy link
Copy Markdown
Contributor

Summary:

Avoids setting a lineHeight lower of the fontSize lineHeight with Text and TextInput.
The check was previously introduced on the Paper Renderer with PR #37465.

fixesExpensify/App#14445fixes#29507
related #38359 and Expensify/react-native-live-markdown#350

Changelog:

[IOS] [FIXED] - Avoid setting a lineHeight lower of the fontSize lineHeight with Text and TextInput

Test Plan:

CLICK TO OPEN SOURCE CODE

/** * Copyright (c) Meta Platforms, Inc. and affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * * @format * @flow */importtype{RNTesterModuleInfo}from'./types/RNTesterTypes';import*asReactfrom'react';import{StyleSheet,Text,TextInput,View}from'react-native';// RNTester App currently uses in memory storage for storing navigation stateconstRNTesterApp=({
testList,}: {testList?: {components?: Array<RNTesterModuleInfo>,apis?: Array<RNTesterModuleInfo>,},}): React.Node=>{return(<Viewstyle={styles.container}><Text>This is some Text</Text><Textstyle={styles.text}><Text>jjjj</Text>{'\n'}<Text>💀</Text></Text><Text>This is some TextInput</Text><TextInputmultilinestyle={styles.input}/></View>);};exportdefaultRNTesterApp;conststyles=StyleSheet.create({container: {marginTop: 250,},text: {lineHeight: 14,borderWidth: 1,},input: {lineHeight: 14,borderWidth: 1,},});

BeforeAfter

Expensify

BeforeAfter

@facebook-github-botfacebook-github-bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label May 20, 2024
@fabOnReactfabOnReact changed the title Add check line heightAvoid setting a lineHeight lower than the fontSize lineHeight on Text and TextInputMay 20, 2024
@fabOnReactfabOnReact changed the title Avoid setting a lineHeight lower than the fontSize lineHeight on Text and TextInputAvoid setting a lineHeight lower of the fontSize lineHeight with Text and TextInputMay 20, 2024
@analysis-bot

Copy link
Copy Markdown
PlatformEngineArchSize (bytes)Diff
androidhermesarm64-v8a19,542,749-4
androidhermesarmeabi-v7an/a--
androidhermesx86n/a--
androidhermesx86_64n/a--
androidjscarm64-v8a22,912,802-15
androidjscarmeabi-v7an/a--
androidjscx86n/a--
androidjscx86_64n/a--

Base commit: 93c079b
Branch: main

@fabOnReact

fabOnReact commented May 21, 2024

Copy link
Copy Markdown
ContributorAuthor

RN-Tester - lineHeight examples

There is a difference in the RNTester test results.

  • I believe this PR introduces the correct behavior
  • The changes were previously merged and approved with PR #37465
  • PR 37465 was reverted for the slight difference in the text baseline, but no issues were reported with the changes in the lineHeight of the text/textinput.
BeforeAfter
BeforeAfter

@facebook-github-bot

Copy link
Copy Markdown
Contributor

@sammy-SC has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator.

@react-native-bot

Copy link
Copy Markdown
Collaborator

This PR is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

@react-native-botreact-native-bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Dec 2, 2024
@react-native-bot

Copy link
Copy Markdown
Collaborator

This PR was closed because it has been stalled for 7 days with no activity.

Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA SignedThis label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed.Shared with MetaApplied via automation to indicate that an Issue or Pull Request has been shared with the team.StaleThere has been a lack of activity on this issue and it may be closed soon.

Projects

None yet

4 participants

@fabOnReact@analysis-bot@facebook-github-bot@react-native-bot