From 9ddfe44e6994c0908e243f1d9f87c503734a193d Mon Sep 17 00:00:00 2001 From: Tatiana Kapos Date: Wed, 30 Oct 2024 09:06:37 -0700 Subject: [PATCH 1/2] Fix Text running flattenStyle multiple times (#14041) * integrate rn #45340 and #45345 * Change files * remove dead windows code --- ...-76c400e4-4a62-4fcd-95c9-25a19cf51138.json | 7 ++ vnext/src-win/Libraries/Text/Text.windows.js | 81 ++++++------------- 2 files changed, 30 insertions(+), 58 deletions(-) create mode 100644 change/react-native-windows-76c400e4-4a62-4fcd-95c9-25a19cf51138.json diff --git a/change/react-native-windows-76c400e4-4a62-4fcd-95c9-25a19cf51138.json b/change/react-native-windows-76c400e4-4a62-4fcd-95c9-25a19cf51138.json new file mode 100644 index 00000000000..60e7281d3c9 --- /dev/null +++ b/change/react-native-windows-76c400e4-4a62-4fcd-95c9-25a19cf51138.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Fix flatten style running multiple times\"", + "packageName": "react-native-windows", + "email": "tatianakapos@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/vnext/src-win/Libraries/Text/Text.windows.js b/vnext/src-win/Libraries/Text/Text.windows.js index fad015fd5fd..7f14786f405 100644 --- a/vnext/src-win/Libraries/Text/Text.windows.js +++ b/vnext/src-win/Libraries/Text/Text.windows.js @@ -8,6 +8,8 @@ * @format */ +import type {TextStyleProp} from '../StyleSheet/StyleSheet'; +import type {____TextStyle_Internal as TextStyleInternal} from '../StyleSheet/StyleSheetTypes'; import type {PressEvent} from '../Types/CoreEventTypes'; import type {NativeTextProps} from './TextNativeComponent'; import type {PressRetentionOffset, TextProps} from './TextProps'; @@ -23,7 +25,7 @@ import * as React from 'react'; import {useContext, useMemo, useState} from 'react'; const View = require('../Components/View/View'); // [Windows] -import {type TextStyleProp, type ViewStyleProp} from '../StyleSheet/StyleSheet'; // [Windows] +import {type ViewStyleProp} from '../StyleSheet/StyleSheet'; // [Windows] type TextForwardRef = React.ElementRef< typeof NativeText | typeof NativeVirtualText, @@ -144,25 +146,32 @@ const Text: React.AbstractComponent = let _selectable = selectable; - const processedStyle = flattenStyle(_style); + let processedStyle = flattenStyle(_style); if (processedStyle != null) { + let overrides: ?{...TextStyleInternal} = null; if (typeof processedStyle.fontWeight === 'number') { - // $FlowFixMe[cannot-write] - processedStyle.fontWeight = processedStyle.fontWeight.toString(); + overrides = overrides || ({}: {...TextStyleInternal}); + overrides.fontWeight = + // $FlowFixMe[incompatible-cast] + (processedStyle.fontWeight.toString(): TextStyleInternal['fontWeight']); } if (processedStyle.userSelect != null) { _selectable = userSelectToSelectableMap[processedStyle.userSelect]; - // $FlowFixMe[cannot-write] - delete processedStyle.userSelect; + overrides = overrides || ({}: {...TextStyleInternal}); + overrides.userSelect = undefined; } if (processedStyle.verticalAlign != null) { - // $FlowFixMe[cannot-write] - processedStyle.textAlignVertical = + overrides = overrides || ({}: {...TextStyleInternal}); + overrides.textAlignVertical = verticalAlignToTextAlignVerticalMap[processedStyle.verticalAlign]; - // $FlowFixMe[cannot-write] - delete processedStyle.verticalAlign; + overrides.verticalAlign = undefined; + } + + if (overrides != null) { + // $FlowFixMe[incompatible-type] + _style = [_style, overrides]; } } @@ -185,7 +194,7 @@ const Text: React.AbstractComponent = numberOfLines: _numberOfLines, selectable: _selectable, selectionColor: _selectionColor, - style: processedStyle, + style: _style, disabled: disabled, children, }} @@ -222,7 +231,7 @@ const Text: React.AbstractComponent = ref={forwardedRef} selectable={_selectable} selectionColor={_selectionColor} - style={processedStyle} + style={_style} disabled={disabled}> {children} @@ -269,7 +278,7 @@ const Text: React.AbstractComponent = numberOfLines: _numberOfLines, selectable: _selectable, selectionColor: _selectionColor, - style: processedStyle, + style: _style, children, }} textPressabilityProps={{ @@ -307,7 +316,7 @@ const Text: React.AbstractComponent = ref={forwardedRef} selectable={_selectable} selectionColor={_selectionColor} - style={processedStyle}> + style={_style}> {children} ); @@ -328,50 +337,6 @@ const Text: React.AbstractComponent = styleProps.borderStartWidth != null || styleProps.borderTopWidth != null) ) { - let textStyleProps = Array.isArray(styleProps) - ? // $FlowFixMe[underconstrained-implicit-instantiation] - flattenStyle(styleProps) - : styleProps; - let { - // $FlowFixMe[prop-missing] - margin, - // $FlowFixMe[prop-missing] - marginBottom, - // $FlowFixMe[prop-missing] - marginEnd, - // $FlowFixMe[prop-missing] - marginHorizontal, - // $FlowFixMe[prop-missing] - marginLeft, - // $FlowFixMe[prop-missing] - marginRight, - // $FlowFixMe[prop-missing] - marginStart, - // $FlowFixMe[prop-missing] - marginTop, - // $FlowFixMe[prop-missing] - marginVertical, - // $FlowFixMe[prop-missing] - padding, - // $FlowFixMe[prop-missing] - paddingBottom, - // $FlowFixMe[prop-missing] - paddingEnd, - // $FlowFixMe[prop-missing] - paddingHorizontal, - // $FlowFixMe[prop-missing] - paddingLeft, - // $FlowFixMe[prop-missing] - paddingRight, - // $FlowFixMe[prop-missing] - paddingStart, - // $FlowFixMe[prop-missing] - paddingTop, - // $FlowFixMe[prop-missing] - paddingVertical, - // $FlowFixMe[not-an-object] - ...rest - } = textStyleProps != null ? textStyleProps : {}; return ( From cd217dcdfa6bf8fd03d5868a43e55ea2943a0221 Mon Sep 17 00:00:00 2001 From: Tatiana Kapos Date: Wed, 30 Oct 2024 09:18:46 -0700 Subject: [PATCH 2/2] Change files --- ...ct-native-windows-1fcd0c1f-ea81-47bf-a71e-8e0ebc4a0268.json} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename change/{react-native-windows-76c400e4-4a62-4fcd-95c9-25a19cf51138.json => react-native-windows-1fcd0c1f-ea81-47bf-a71e-8e0ebc4a0268.json} (65%) diff --git a/change/react-native-windows-76c400e4-4a62-4fcd-95c9-25a19cf51138.json b/change/react-native-windows-1fcd0c1f-ea81-47bf-a71e-8e0ebc4a0268.json similarity index 65% rename from change/react-native-windows-76c400e4-4a62-4fcd-95c9-25a19cf51138.json rename to change/react-native-windows-1fcd0c1f-ea81-47bf-a71e-8e0ebc4a0268.json index 60e7281d3c9..1b6279db2db 100644 --- a/change/react-native-windows-76c400e4-4a62-4fcd-95c9-25a19cf51138.json +++ b/change/react-native-windows-1fcd0c1f-ea81-47bf-a71e-8e0ebc4a0268.json @@ -1,6 +1,6 @@ { "type": "prerelease", - "comment": "Fix flatten style running multiple times\"", + "comment": "backport Fix Text running flattenStyle multiple times #14041", "packageName": "react-native-windows", "email": "tatianakapos@microsoft.com", "dependentChangeType": "patch"