Skip to content

Commit 58170c6

Browse files
authored
Merge pull request Expensify#67151 from software-mansion-labs/war-in/revert-66869
[CP Staging] Revert "Delete restore-old-line-height-algorithm React Native patch"
2 parents f128a47 + 55d854d commit 58170c6

5 files changed

Lines changed: 87 additions & 2 deletions

patches/react-native/details.md

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -170,14 +170,21 @@
170170
- E/App issue: 🛑
171171
- PR Introducing Patch: https://github.com/Expensify/App/pull/59738
172172

173-
### [react-native+0.79.2+024+fix-display-contents-not-updating-nodes.patch](react-native+0.79.2+024+fix-display-contents-not-updating-nodes.patch)
173+
### [react-native+0.79.2+024+restore-old-line-height-algorithm.patch](react-native+0.79.2+024+restore-old-line-height-algorithm.patch)
174+
175+
- Reason: This patch fixes line height calculation issues in Android text rendering by replacing the web-based CSS implementation with a priority-based approach that properly handles cases where font metrics exceed the specified line height, ensuring better text display consistency and preventing text clipping
176+
- Upstream PR/issue: 🛑
177+
- E/App issue: 🛑
178+
- PR Introducing Patch: https://github.com/Expensify/App/pull/60421
179+
180+
### [react-native+0.79.2+025+fix-display-contents-not-updating-nodes.patch](react-native+0.79.2+025+fix-display-contents-not-updating-nodes.patch)
174181

175182
- Reason: This patch updates Yoga to correctly update the subtrees of `display: contents` nodes so that they are in sync with their React Native counterparts.
176183
- Upstream PR/issue: https://github.com/facebook/react-native/pull/52530
177184
- E/App issue: https://github.com/Expensify/App/issues/65268
178185
- PR introducing patch: [#65925](https://github.com/Expensify/App/pull/65925)
179186

180-
### [react-native+0.79.2+025+fix-textinput-oncontentsizechange-dispatched-only-once-ios.patch](react-native+0.79.2+025+fix-textinput-oncontentsizechange-dispatched-only-once-ios.patch)
187+
### [react-native+0.79.2+026+fix-textinput-oncontentsizechange-dispatched-only-once-ios.patch](react-native+0.79.2+026+fix-textinput-oncontentsizechange-dispatched-only-once-ios.patch)
181188

182189
- Reason: This patch updates RCTTextInputComponentView.mm to fix an issue where the TextInput onContentSizeChange event is dispatched only once on iOS instead of being triggered for subsequent content size changes.
183190
- Upstream PR/issue: https://github.com/facebook/react-native/pull/50782
Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
diff --git a/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/internal/span/CustomLineHeightSpan.kt b/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/internal/span/CustomLineHeightSpan.kt
2+
index c73d42f..11b70e1 100644
3+
--- a/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/internal/span/CustomLineHeightSpan.kt
4+
+++ b/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/views/text/internal/span/CustomLineHeightSpan.kt
5+
@@ -11,6 +11,7 @@ import android.graphics.Paint.FontMetricsInt
6+
import android.text.style.LineHeightSpan
7+
import kotlin.math.ceil
8+
import kotlin.math.floor
9+
+import kotlin.math.min
10+
11+
/**
12+
* Implements a [LineHeightSpan] which follows web-like behavior for line height, unlike
13+
@@ -28,29 +29,42 @@ public class CustomLineHeightSpan(height: Float) : LineHeightSpan, ReactSpan {
14+
v: Int,
15+
fm: FontMetricsInt,
16+
) {
17+
- // https://www.w3.org/TR/css-inline-3/#inline-height
18+
- // When its computed line-height is not normal, its layout bounds are derived solely from
19+
- // metrics of its first available font (ignoring glyphs from other fonts), and leading is used
20+
- // to adjust the effective A and D to add up to the used line-height. Calculate the leading L as
21+
- // L = line-height - (A + D). Half the leading (its half-leading) is added above A of the first
22+
- // available font, and the other half below D of the first available font, giving an effective
23+
- // ascent above the baseline of A′ = A + L/2, and an effective descent of D′ = D + L/2. However,
24+
- // if line-fit-edge is not leading and this is not the root inline box, if the half-leading is
25+
- // positive, treat it as zero. The layout bounds exactly encloses this effective A′ and D′.
26+
+ // This is more complicated that I wanted it to be. You can find a good explanation of what the
27+
+ // FontMetrics mean here: http://stackoverflow.com/questions/27631736.
28+
+ // The general solution is that if there's not enough height to show the full line height, we
29+
+ // will prioritize in this order: descent, ascent, bottom, top
30+
31+
- val leading = lineHeight - ((-fm.ascent) + fm.descent)
32+
- fm.ascent -= ceil(leading / 2.0f).toInt()
33+
- fm.descent += floor(leading / 2.0f).toInt()
34+
+ if (fm.descent > lineHeight) {
35+
+ // Show as much descent as possible
36+
+ fm.descent = min(lineHeight.toDouble(), fm.descent.toDouble()).toInt()
37+
+ fm.bottom = fm.descent
38+
+ fm.ascent = 0
39+
+ fm.top = fm.ascent
40+
+ } else if (-fm.ascent + fm.descent > lineHeight) {
41+
+ // Show all descent, and as much ascent as possible
42+
+ fm.bottom = fm.descent
43+
+ fm.ascent = -lineHeight + fm.descent
44+
+ fm.top = fm.ascent
45+
+ } else if (-fm.ascent + fm.bottom > lineHeight) {
46+
+ // Show all ascent, descent, as much bottom as possible
47+
+ fm.top = fm.ascent
48+
+ fm.bottom = fm.ascent + lineHeight
49+
+ } else if (-fm.top + fm.bottom > lineHeight) {
50+
+ // Show all ascent, descent, bottom, as much top as possible
51+
+ fm.top = fm.bottom - lineHeight
52+
+ } else {
53+
+ // Show proportionally additional ascent / top & descent / bottom
54+
+ val additional = lineHeight - (-fm.top + fm.bottom)
55+
56+
- // The top of the first line, and the bottom of the last line, may influence bounds of the
57+
- // paragraph, so we match them to the text ascent/descent. It is otherwise desirable to allow
58+
- // line boxes to overlap (to allow too large glyphs to be drawn outside them), so we do not
59+
- // adjust the top/bottom of interior line-boxes.
60+
- if (start == 0) {
61+
- fm.top = fm.ascent
62+
- }
63+
- if (end == text.length) {
64+
- fm.bottom = fm.descent
65+
- }
66+
+ // Round up for the negative values and down for the positive values (arbitrary choice)
67+
+ // So that bottom - top equals additional even if it's an odd number.
68+
+ val top = (fm.top - ceil(additional / 2.0f)).toInt()
69+
+ val bottom = (fm.bottom + floor(additional / 2.0f)).toInt()
70+
+
71+
+ fm.top = top
72+
+ fm.ascent = top
73+
+ fm.descent = bottom
74+
+ fm.bottom = bottom
75+
+ }
76+
}
77+
}

patches/react-native/react-native+0.79.2+024+fix-display-contents-not-updating-nodes.patch renamed to patches/react-native/react-native+0.79.2+025+fix-display-contents-not-updating-nodes.patch

File renamed without changes.

patches/react-native/react-native+0.79.2+025+fix-textinput-oncontentsizechange-dispatched-only-once-ios.patch renamed to patches/react-native/react-native+0.79.2+026+fix-textinput-oncontentsizechange-dispatched-only-once-ios.patch

File renamed without changes.

src/styles/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3209,6 +3209,7 @@ const styles = (theme: ThemeColors) =>
32093209
...headlineFont,
32103210
fontSize: variables.iouAmountTextSize,
32113211
color: theme.heading,
3212+
lineHeight: variables.inputHeight,
32123213
},
32133214

32143215
iouAmountTextInput: addOutlineWidth(

0 commit comments

Comments
 (0)