diff --git a/patches/react-native/details.md b/patches/react-native/details.md index 608cd99c1809..cc1ac26d835f 100644 --- a/patches/react-native/details.md +++ b/patches/react-native/details.md @@ -170,21 +170,14 @@ - E/App issue: šŸ›‘ - PR Introducing Patch: https://github.com/Expensify/App/pull/59738 -### [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) +### [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) - 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+026+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+025+fix-textinput-oncontentsizechange-dispatched-only-once-ios.patch](react-native+0.79.2+025+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+025+fix-display-contents-not-updating-nodes.patch b/patches/react-native/react-native+0.79.2+024+fix-display-contents-not-updating-nodes.patch similarity index 100% rename from patches/react-native/react-native+0.79.2+025+fix-display-contents-not-updating-nodes.patch rename to patches/react-native/react-native+0.79.2+024+fix-display-contents-not-updating-nodes.patch 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 deleted file mode 100644 index 0048c7b4a3cd..000000000000 --- a/patches/react-native/react-native+0.79.2+024+restore-old-line-height-algorithm.patch +++ /dev/null @@ -1,77 +0,0 @@ -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+026+fix-textinput-oncontentsizechange-dispatched-only-once-ios.patch b/patches/react-native/react-native+0.79.2+025+fix-textinput-oncontentsizechange-dispatched-only-once-ios.patch similarity index 100% rename from patches/react-native/react-native+0.79.2+026+fix-textinput-oncontentsizechange-dispatched-only-once-ios.patch rename to patches/react-native/react-native+0.79.2+025+fix-textinput-oncontentsizechange-dispatched-only-once-ios.patch diff --git a/src/components/AmountForm.tsx b/src/components/AmountForm.tsx index 860af5a3d719..0fa3ac3f5ecf 100644 --- a/src/components/AmountForm.tsx +++ b/src/components/AmountForm.tsx @@ -303,6 +303,7 @@ function AmountForm( isCurrencyPressable={isCurrencyPressable} style={[styles.iouAmountTextInput]} containerStyle={[styles.iouAmountTextInputContainer]} + touchableInputWrapperStyle={[styles.heightUndefined]} // eslint-disable-next-line react/jsx-props-no-spreading {...rest} /> diff --git a/src/pages/iou/MoneyRequestAmountForm.tsx b/src/pages/iou/MoneyRequestAmountForm.tsx index 69ce003284cc..b2589d6c672e 100644 --- a/src/pages/iou/MoneyRequestAmountForm.tsx +++ b/src/pages/iou/MoneyRequestAmountForm.tsx @@ -280,6 +280,7 @@ function MoneyRequestAmountForm( moneyRequestAmountInputRef={moneyRequestAmountInput} inputStyle={[styles.iouAmountTextInput]} containerStyle={[styles.iouAmountTextInputContainer]} + touchableInputWrapperStyle={[styles.heightUndefined]} testID="moneyRequestAmountInput" /> {!!formError && ( diff --git a/src/styles/index.ts b/src/styles/index.ts index c7b2b33aa24a..40c7a62b2ec4 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -401,6 +401,10 @@ const styles = (theme: ThemeColors) => lineHeight: undefined, }, + heightUndefined: { + height: undefined, + }, + lineHeightLarge: { lineHeight: variables.lineHeightLarge, },