Skip to content

Commit 0091bbb

Browse files
authored
[0.76][Backport] Fix Text running flattenStyle multiple times #14041 (#14043)
* Fix Text running flattenStyle multiple times (#14041) * integrate rn #45340 and #45345 * Change files * remove dead windows code * Change files
1 parent 80dbd37 commit 0091bbb

File tree

2 files changed

+30
-58
lines changed

2 files changed

+30
-58
lines changed
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "prerelease",
3+
"comment": "backport Fix Text running flattenStyle multiple times #14041",
4+
"packageName": "react-native-windows",
5+
"email": "tatianakapos@microsoft.com",
6+
"dependentChangeType": "patch"
7+
}

vnext/src-win/Libraries/Text/Text.windows.js

Lines changed: 23 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
* @format
99
*/
1010

11+
import type {TextStyleProp} from '../StyleSheet/StyleSheet';
12+
import type {____TextStyle_Internal as TextStyleInternal} from '../StyleSheet/StyleSheetTypes';
1113
import type {PressEvent} from '../Types/CoreEventTypes';
1214
import type {NativeTextProps} from './TextNativeComponent';
1315
import type {PressRetentionOffset, TextProps} from './TextProps';
@@ -23,7 +25,7 @@ import * as React from 'react';
2325
import {useContext, useMemo, useState} from 'react';
2426

2527
const View = require('../Components/View/View'); // [Windows]
26-
import {type TextStyleProp, type ViewStyleProp} from '../StyleSheet/StyleSheet'; // [Windows]
28+
import {type ViewStyleProp} from '../StyleSheet/StyleSheet'; // [Windows]
2729

2830
type TextForwardRef = React.ElementRef<
2931
typeof NativeText | typeof NativeVirtualText,
@@ -144,25 +146,32 @@ const Text: React.AbstractComponent<TextProps, TextForwardRef> =
144146

145147
let _selectable = selectable;
146148

147-
const processedStyle = flattenStyle(_style);
149+
let processedStyle = flattenStyle<TextStyleProp>(_style);
148150
if (processedStyle != null) {
151+
let overrides: ?{...TextStyleInternal} = null;
149152
if (typeof processedStyle.fontWeight === 'number') {
150-
// $FlowFixMe[cannot-write]
151-
processedStyle.fontWeight = processedStyle.fontWeight.toString();
153+
overrides = overrides || ({}: {...TextStyleInternal});
154+
overrides.fontWeight =
155+
// $FlowFixMe[incompatible-cast]
156+
(processedStyle.fontWeight.toString(): TextStyleInternal['fontWeight']);
152157
}
153158

154159
if (processedStyle.userSelect != null) {
155160
_selectable = userSelectToSelectableMap[processedStyle.userSelect];
156-
// $FlowFixMe[cannot-write]
157-
delete processedStyle.userSelect;
161+
overrides = overrides || ({}: {...TextStyleInternal});
162+
overrides.userSelect = undefined;
158163
}
159164

160165
if (processedStyle.verticalAlign != null) {
161-
// $FlowFixMe[cannot-write]
162-
processedStyle.textAlignVertical =
166+
overrides = overrides || ({}: {...TextStyleInternal});
167+
overrides.textAlignVertical =
163168
verticalAlignToTextAlignVerticalMap[processedStyle.verticalAlign];
164-
// $FlowFixMe[cannot-write]
165-
delete processedStyle.verticalAlign;
169+
overrides.verticalAlign = undefined;
170+
}
171+
172+
if (overrides != null) {
173+
// $FlowFixMe[incompatible-type]
174+
_style = [_style, overrides];
166175
}
167176
}
168177

@@ -185,7 +194,7 @@ const Text: React.AbstractComponent<TextProps, TextForwardRef> =
185194
numberOfLines: _numberOfLines,
186195
selectable: _selectable,
187196
selectionColor: _selectionColor,
188-
style: processedStyle,
197+
style: _style,
189198
disabled: disabled,
190199
children,
191200
}}
@@ -222,7 +231,7 @@ const Text: React.AbstractComponent<TextProps, TextForwardRef> =
222231
ref={forwardedRef}
223232
selectable={_selectable}
224233
selectionColor={_selectionColor}
225-
style={processedStyle}
234+
style={_style}
226235
disabled={disabled}>
227236
{children}
228237
</NativeVirtualText>
@@ -269,7 +278,7 @@ const Text: React.AbstractComponent<TextProps, TextForwardRef> =
269278
numberOfLines: _numberOfLines,
270279
selectable: _selectable,
271280
selectionColor: _selectionColor,
272-
style: processedStyle,
281+
style: _style,
273282
children,
274283
}}
275284
textPressabilityProps={{
@@ -307,7 +316,7 @@ const Text: React.AbstractComponent<TextProps, TextForwardRef> =
307316
ref={forwardedRef}
308317
selectable={_selectable}
309318
selectionColor={_selectionColor}
310-
style={processedStyle}>
319+
style={_style}>
311320
{children}
312321
</NativeText>
313322
);
@@ -328,50 +337,6 @@ const Text: React.AbstractComponent<TextProps, TextForwardRef> =
328337
styleProps.borderStartWidth != null ||
329338
styleProps.borderTopWidth != null)
330339
) {
331-
let textStyleProps = Array.isArray(styleProps)
332-
? // $FlowFixMe[underconstrained-implicit-instantiation]
333-
flattenStyle(styleProps)
334-
: styleProps;
335-
let {
336-
// $FlowFixMe[prop-missing]
337-
margin,
338-
// $FlowFixMe[prop-missing]
339-
marginBottom,
340-
// $FlowFixMe[prop-missing]
341-
marginEnd,
342-
// $FlowFixMe[prop-missing]
343-
marginHorizontal,
344-
// $FlowFixMe[prop-missing]
345-
marginLeft,
346-
// $FlowFixMe[prop-missing]
347-
marginRight,
348-
// $FlowFixMe[prop-missing]
349-
marginStart,
350-
// $FlowFixMe[prop-missing]
351-
marginTop,
352-
// $FlowFixMe[prop-missing]
353-
marginVertical,
354-
// $FlowFixMe[prop-missing]
355-
padding,
356-
// $FlowFixMe[prop-missing]
357-
paddingBottom,
358-
// $FlowFixMe[prop-missing]
359-
paddingEnd,
360-
// $FlowFixMe[prop-missing]
361-
paddingHorizontal,
362-
// $FlowFixMe[prop-missing]
363-
paddingLeft,
364-
// $FlowFixMe[prop-missing]
365-
paddingRight,
366-
// $FlowFixMe[prop-missing]
367-
paddingStart,
368-
// $FlowFixMe[prop-missing]
369-
paddingTop,
370-
// $FlowFixMe[prop-missing]
371-
paddingVertical,
372-
// $FlowFixMe[not-an-object]
373-
...rest
374-
} = textStyleProps != null ? textStyleProps : {};
375340
return (
376341
<View style={styleProps}>
377342
<TextAncestor.Provider value={true}>

0 commit comments

Comments
 (0)