diff --git a/patches/react-native/details.md b/patches/react-native/details.md index cc1ac26d835f..608cd99c1809 100644 --- a/patches/react-native/details.md +++ b/patches/react-native/details.md @@ -170,14 +170,21 @@ - E/App issue: šŸ›‘ - PR Introducing Patch: https://github.com/Expensify/App/pull/59738 -### [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) +### [react-native+0.79.2+024+restore-old-line-height-algorithm.patch](react-native+0.79.2+024+restore-old-line-height-algorithm.patch) + +- 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 +- Upstream PR/issue: šŸ›‘ +- E/App issue: šŸ›‘ +- PR Introducing Patch: https://github.com/Expensify/App/pull/60421 + +### [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) - 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. - Upstream PR/issue: https://github.com/facebook/react-native/pull/52530 - E/App issue: https://github.com/Expensify/App/issues/65268 - PR introducing patch: [#65925](https://github.com/Expensify/App/pull/65925) -### [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) +### [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) - 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. - Upstream PR/issue: https://github.com/facebook/react-native/pull/50782 diff --git a/patches/react-native/react-native+0.79.2+024+restore-old-line-height-algorithm.patch b/patches/react-native/react-native+0.79.2+024+restore-old-line-height-algorithm.patch new file mode 100644 index 000000000000..0048c7b4a3cd --- /dev/null +++ b/patches/react-native/react-native+0.79.2+024+restore-old-line-height-algorithm.patch @@ -0,0 +1,77 @@ +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 +index c73d42f..11b70e1 100644 +--- 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 +@@ -11,6 +11,7 @@ import android.graphics.Paint.FontMetricsInt + import android.text.style.LineHeightSpan + import kotlin.math.ceil + import kotlin.math.floor ++import kotlin.math.min + + /** + * Implements a [LineHeightSpan] which follows web-like behavior for line height, unlike +@@ -28,29 +29,42 @@ public class CustomLineHeightSpan(height: Float) : LineHeightSpan, ReactSpan { + v: Int, + fm: FontMetricsInt, + ) { +- // https://www.w3.org/TR/css-inline-3/#inline-height +- // When its computed line-height is not normal, its layout bounds are derived solely from +- // metrics of its first available font (ignoring glyphs from other fonts), and leading is used +- // to adjust the effective A and D to add up to the used line-height. Calculate the leading L as +- // L = line-height - (A + D). Half the leading (its half-leading) is added above A of the first +- // available font, and the other half below D of the first available font, giving an effective +- // ascent above the baseline of A′ = A + L/2, and an effective descent of D′ = D + L/2. However, +- // if line-fit-edge is not leading and this is not the root inline box, if the half-leading is +- // positive, treat it as zero. The layout bounds exactly encloses this effective A′ and D′. ++ // This is more complicated that I wanted it to be. You can find a good explanation of what the ++ // FontMetrics mean here: http://stackoverflow.com/questions/27631736. ++ // The general solution is that if there's not enough height to show the full line height, we ++ // will prioritize in this order: descent, ascent, bottom, top + +- val leading = lineHeight - ((-fm.ascent) + fm.descent) +- fm.ascent -= ceil(leading / 2.0f).toInt() +- fm.descent += floor(leading / 2.0f).toInt() ++ if (fm.descent > lineHeight) { ++ // Show as much descent as possible ++ fm.descent = min(lineHeight.toDouble(), fm.descent.toDouble()).toInt() ++ fm.bottom = fm.descent ++ fm.ascent = 0 ++ fm.top = fm.ascent ++ } else if (-fm.ascent + fm.descent > lineHeight) { ++ // Show all descent, and as much ascent as possible ++ fm.bottom = fm.descent ++ fm.ascent = -lineHeight + fm.descent ++ fm.top = fm.ascent ++ } else if (-fm.ascent + fm.bottom > lineHeight) { ++ // Show all ascent, descent, as much bottom as possible ++ fm.top = fm.ascent ++ fm.bottom = fm.ascent + lineHeight ++ } else if (-fm.top + fm.bottom > lineHeight) { ++ // Show all ascent, descent, bottom, as much top as possible ++ fm.top = fm.bottom - lineHeight ++ } else { ++ // Show proportionally additional ascent / top & descent / bottom ++ val additional = lineHeight - (-fm.top + fm.bottom) + +- // The top of the first line, and the bottom of the last line, may influence bounds of the +- // paragraph, so we match them to the text ascent/descent. It is otherwise desirable to allow +- // line boxes to overlap (to allow too large glyphs to be drawn outside them), so we do not +- // adjust the top/bottom of interior line-boxes. +- if (start == 0) { +- fm.top = fm.ascent +- } +- if (end == text.length) { +- fm.bottom = fm.descent +- } ++ // Round up for the negative values and down for the positive values (arbitrary choice) ++ // So that bottom - top equals additional even if it's an odd number. ++ val top = (fm.top - ceil(additional / 2.0f)).toInt() ++ val bottom = (fm.bottom + floor(additional / 2.0f)).toInt() ++ ++ fm.top = top ++ fm.ascent = top ++ fm.descent = bottom ++ fm.bottom = bottom ++ } + } + } diff --git a/patches/react-native/react-native+0.79.2+024+fix-display-contents-not-updating-nodes.patch b/patches/react-native/react-native+0.79.2+025+fix-display-contents-not-updating-nodes.patch similarity index 100% rename from patches/react-native/react-native+0.79.2+024+fix-display-contents-not-updating-nodes.patch rename to patches/react-native/react-native+0.79.2+025+fix-display-contents-not-updating-nodes.patch diff --git a/patches/react-native/react-native+0.79.2+025+fix-textinput-oncontentsizechange-dispatched-only-once-ios.patch b/patches/react-native/react-native+0.79.2+026+fix-textinput-oncontentsizechange-dispatched-only-once-ios.patch similarity index 100% rename from patches/react-native/react-native+0.79.2+025+fix-textinput-oncontentsizechange-dispatched-only-once-ios.patch rename to patches/react-native/react-native+0.79.2+026+fix-textinput-oncontentsizechange-dispatched-only-once-ios.patch diff --git a/src/styles/index.ts b/src/styles/index.ts index e2a46a5bc40b..d4cb7375a057 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -3209,6 +3209,7 @@ const styles = (theme: ThemeColors) => ...headlineFont, fontSize: variables.iouAmountTextSize, color: theme.heading, + lineHeight: variables.inputHeight, }, iouAmountTextInput: addOutlineWidth(