diff --git a/packages/react-native/Libraries/Text/Text.js b/packages/react-native/Libraries/Text/Text.js index 516699b0e56511..72e23054fa3afc 100644 --- a/packages/react-native/Libraries/Text/Text.js +++ b/packages/react-native/Libraries/Text/Text.js @@ -8,6 +8,7 @@ * @format */ +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'; @@ -132,25 +133,32 @@ const Text: React.AbstractComponent = let _selectable = selectable; - const processedStyle = flattenStyle(_style); + let processedStyle: ?TextStyleInternal = 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] + processedStyle = [processedStyle, overrides]; } } diff --git a/packages/react-native/Libraries/Text/__tests__/Text-test.js b/packages/react-native/Libraries/Text/__tests__/Text-test.js index 6e3f1923eed0e5..b2455ff54ad84c 100644 --- a/packages/react-native/Libraries/Text/__tests__/Text-test.js +++ b/packages/react-native/Libraries/Text/__tests__/Text-test.js @@ -10,16 +10,20 @@ 'use strict'; +import flattenStyle from '../../StyleSheet/flattenStyle'; +import React from 'react'; + const render = require('../../../jest/renderer'); const Text = require('../Text'); -const React = require('react'); jest.unmock('../Text'); jest.unmock('../TextNativeComponent'); -function omitRef(json) { +function omitRefAndFlattenStyle(instance) { + const json = instance.toJSON(); // Omit `ref` for forward-compatibility with `enableRefAsProp`. delete json.props.ref; + json.props.style = flattenStyle(json.props.style); return json; } @@ -27,7 +31,7 @@ describe('Text', () => { it('default render', async () => { const instance = await render.create(); - expect(omitRef(instance.toJSON())).toMatchInlineSnapshot(` + expect(omitRefAndFlattenStyle(instance)).toMatchInlineSnapshot(` { const instance = await render.create(); - expect(omitRef(instance.toJSON())).toMatchInlineSnapshot(` + expect(omitRefAndFlattenStyle(instance)).toMatchInlineSnapshot(` { const instance = await render.create(); - expect(omitRef(instance.toJSON())).toMatchInlineSnapshot(` + expect(omitRefAndFlattenStyle(instance)).toMatchInlineSnapshot(` { const instance = await render.create(); - expect(omitRef(instance.toJSON())).toMatchInlineSnapshot(` + expect(omitRefAndFlattenStyle(instance)).toMatchInlineSnapshot(` { "flex": 1, "marginInlineStart": 10, "textAlignVertical": "center", + "userSelect": undefined, + "verticalAlign": undefined, } } />