From 423d4fd7dcce5fbfe3799923abb6d7daf8557cb0 Mon Sep 17 00:00:00 2001 From: Jakub Piasecki Date: Wed, 9 Apr 2025 02:16:09 -0700 Subject: [PATCH] Remove Animated nodes from StyleSheet types (#50452) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/50452 Changelog: [Internal] Reviewed By: huntie Differential Revision: D72308559 fbshipit-source-id: 0d8a505da6c80a9014667183a19585dd89f1db43 --- .../Components/Touchable/TouchableOpacity.js | 2 +- .../Libraries/StyleSheet/StyleSheetTypes.js | 58 ++++++++--------- .../Libraries/StyleSheet/flattenStyle.js | 8 ++- .../__snapshots__/public-api-test.js.snap | 65 ++++++++++--------- 4 files changed, 69 insertions(+), 64 deletions(-) diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js b/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js index 2909a54c508..c965c5ad02f 100644 --- a/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js +++ b/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js @@ -71,7 +71,7 @@ type TouchableOpacityBaseProps = $ReadOnly<{ * Defaults to 0.2 */ activeOpacity?: ?number, - style?: ?ViewStyleProp, + style?: ?Animated.WithAnimatedValue, hostRef?: ?React.RefSetter>, }>; diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js index 46d80d38ce3..e6cf0751027 100644 --- a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js +++ b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js @@ -10,7 +10,7 @@ 'use strict'; -import type {AnimatedBaseProps} from '../Animated/createAnimatedComponent'; +import type {WithAnimatedValue} from '../Animated/createAnimatedComponent'; import type AnimatedNode from '../Animated/nodes/AnimatedNode'; import type {ImageResizeMode} from './../Image/ImageResizeMode'; import type { @@ -38,8 +38,7 @@ export type EdgeInsetsValue = { bottom: number, }; -export type DimensionValue = number | string | 'auto' | AnimatedNode | null; -export type AnimatableNumericValue = number | AnimatedNode; +export type DimensionValue = number | string | 'auto' | null; export type CursorValue = 'auto' | 'pointer'; @@ -694,7 +693,7 @@ export type ____ShadowStyle_InternalCore = $ReadOnly<{ * Sets the drop shadow opacity (multiplied by the color's alpha component) * @platform ios */ - shadowOpacity?: AnimatableNumericValue, + shadowOpacity?: number, /** * Sets the drop shadow blur radius * @platform ios @@ -777,32 +776,32 @@ export type ____ViewStyle_InternalBase = $ReadOnly<{ borderBlockColor?: ____ColorValue_Internal, borderBlockEndColor?: ____ColorValue_Internal, borderBlockStartColor?: ____ColorValue_Internal, - borderRadius?: AnimatableNumericValue | string, - borderBottomEndRadius?: AnimatableNumericValue | string, - borderBottomLeftRadius?: AnimatableNumericValue | string, - borderBottomRightRadius?: AnimatableNumericValue | string, - borderBottomStartRadius?: AnimatableNumericValue | string, - borderEndEndRadius?: AnimatableNumericValue | string, - borderEndStartRadius?: AnimatableNumericValue | string, - borderStartEndRadius?: AnimatableNumericValue | string, - borderStartStartRadius?: AnimatableNumericValue | string, - borderTopEndRadius?: AnimatableNumericValue | string, - borderTopLeftRadius?: AnimatableNumericValue | string, - borderTopRightRadius?: AnimatableNumericValue | string, - borderTopStartRadius?: AnimatableNumericValue | string, + borderRadius?: number | string, + borderBottomEndRadius?: number | string, + borderBottomLeftRadius?: number | string, + borderBottomRightRadius?: number | string, + borderBottomStartRadius?: number | string, + borderEndEndRadius?: number | string, + borderEndStartRadius?: number | string, + borderStartEndRadius?: number | string, + borderStartStartRadius?: number | string, + borderTopEndRadius?: number | string, + borderTopLeftRadius?: number | string, + borderTopRightRadius?: number | string, + borderTopStartRadius?: number | string, borderStyle?: 'solid' | 'dotted' | 'dashed', - borderWidth?: AnimatableNumericValue, - borderBottomWidth?: AnimatableNumericValue, - borderEndWidth?: AnimatableNumericValue, - borderLeftWidth?: AnimatableNumericValue, - borderRightWidth?: AnimatableNumericValue, - borderStartWidth?: AnimatableNumericValue, - borderTopWidth?: AnimatableNumericValue, - opacity?: AnimatableNumericValue, + borderWidth?: number, + borderBottomWidth?: number, + borderEndWidth?: number, + borderLeftWidth?: number, + borderRightWidth?: number, + borderStartWidth?: number, + borderTopWidth?: number, + opacity?: number, outlineColor?: ____ColorValue_Internal, - outlineOffset?: AnimatableNumericValue, + outlineOffset?: number, outlineStyle?: 'solid' | 'dotted' | 'dashed', - outlineWidth?: AnimatableNumericValue, + outlineWidth?: number, elevation?: number, pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only', cursor?: CursorValue, @@ -992,9 +991,8 @@ export type ____DangerouslyImpreciseStyleProp_Internal = StyleProp< Partial<____DangerouslyImpreciseStyle_Internal>, >; -export type ____DangerouslyImpreciseAnimatedStyleProp_Internal = StyleProp< - Partial>, ->; +export type ____DangerouslyImpreciseAnimatedStyleProp_Internal = + WithAnimatedValue>>; export type ____ViewStyleProp_Internal = StyleProp< $ReadOnly>, diff --git a/packages/react-native/Libraries/StyleSheet/flattenStyle.js b/packages/react-native/Libraries/StyleSheet/flattenStyle.js index d049b376634..3353d039abf 100644 --- a/packages/react-native/Libraries/StyleSheet/flattenStyle.js +++ b/packages/react-native/Libraries/StyleSheet/flattenStyle.js @@ -10,17 +10,22 @@ 'use strict'; +import type AnimatedNode from '../Animated/nodes/AnimatedNode'; import type { ____DangerouslyImpreciseAnimatedStyleProp_Internal, ____FlattenStyleProp_Internal, } from './StyleSheetTypes'; +type NonAnimatedNodeObject = TStyleProp extends AnimatedNode + ? empty + : TStyleProp; + function flattenStyle< TStyleProp: ____DangerouslyImpreciseAnimatedStyleProp_Internal, >( style: ?TStyleProp, // $FlowFixMe[underconstrained-implicit-instantiation] -): ?____FlattenStyleProp_Internal { +): ?NonAnimatedNodeObject<____FlattenStyleProp_Internal> { if (style === null || typeof style !== 'object') { return undefined; } @@ -39,6 +44,7 @@ function flattenStyle< for (const key in computedStyle) { // $FlowFixMe[incompatible-use] // $FlowFixMe[invalid-computed-prop] + // $FlowFixMe[prop-missing] result[key] = computedStyle[key]; } } diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap index 595074915d2..ffe63c20556 100644 --- a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap +++ b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap @@ -3360,7 +3360,7 @@ exports[`public API should not change unintentionally Libraries/Components/Touch }>; type TouchableOpacityBaseProps = $ReadOnly<{ activeOpacity?: ?number, - style?: ?ViewStyleProp, + style?: ?Animated.WithAnimatedValue, hostRef?: ?React.RefSetter>, }>; export type TouchableOpacityProps = $ReadOnly<{ @@ -7085,8 +7085,7 @@ export type EdgeInsetsValue = { right: number, bottom: number, }; -export type DimensionValue = number | string | \\"auto\\" | AnimatedNode | null; -export type AnimatableNumericValue = number | AnimatedNode; +export type DimensionValue = number | string | \\"auto\\" | null; export type CursorValue = \\"auto\\" | \\"pointer\\"; type ____LayoutStyle_Internal = $ReadOnly<{ display?: \\"none\\" | \\"flex\\" | \\"contents\\", @@ -7191,7 +7190,7 @@ export type ____ShadowStyle_InternalCore = $ReadOnly<{ width?: number, height?: number, }>, - shadowOpacity?: AnimatableNumericValue, + shadowOpacity?: number, shadowRadius?: number, }>; export type ____ShadowStyle_Internal = $ReadOnly<{ @@ -7262,32 +7261,32 @@ export type ____ViewStyle_InternalBase = $ReadOnly<{ borderBlockColor?: ____ColorValue_Internal, borderBlockEndColor?: ____ColorValue_Internal, borderBlockStartColor?: ____ColorValue_Internal, - borderRadius?: AnimatableNumericValue | string, - borderBottomEndRadius?: AnimatableNumericValue | string, - borderBottomLeftRadius?: AnimatableNumericValue | string, - borderBottomRightRadius?: AnimatableNumericValue | string, - borderBottomStartRadius?: AnimatableNumericValue | string, - borderEndEndRadius?: AnimatableNumericValue | string, - borderEndStartRadius?: AnimatableNumericValue | string, - borderStartEndRadius?: AnimatableNumericValue | string, - borderStartStartRadius?: AnimatableNumericValue | string, - borderTopEndRadius?: AnimatableNumericValue | string, - borderTopLeftRadius?: AnimatableNumericValue | string, - borderTopRightRadius?: AnimatableNumericValue | string, - borderTopStartRadius?: AnimatableNumericValue | string, + borderRadius?: number | string, + borderBottomEndRadius?: number | string, + borderBottomLeftRadius?: number | string, + borderBottomRightRadius?: number | string, + borderBottomStartRadius?: number | string, + borderEndEndRadius?: number | string, + borderEndStartRadius?: number | string, + borderStartEndRadius?: number | string, + borderStartStartRadius?: number | string, + borderTopEndRadius?: number | string, + borderTopLeftRadius?: number | string, + borderTopRightRadius?: number | string, + borderTopStartRadius?: number | string, borderStyle?: \\"solid\\" | \\"dotted\\" | \\"dashed\\", - borderWidth?: AnimatableNumericValue, - borderBottomWidth?: AnimatableNumericValue, - borderEndWidth?: AnimatableNumericValue, - borderLeftWidth?: AnimatableNumericValue, - borderRightWidth?: AnimatableNumericValue, - borderStartWidth?: AnimatableNumericValue, - borderTopWidth?: AnimatableNumericValue, - opacity?: AnimatableNumericValue, + borderWidth?: number, + borderBottomWidth?: number, + borderEndWidth?: number, + borderLeftWidth?: number, + borderRightWidth?: number, + borderStartWidth?: number, + borderTopWidth?: number, + opacity?: number, outlineColor?: ____ColorValue_Internal, - outlineOffset?: AnimatableNumericValue, + outlineOffset?: number, outlineStyle?: \\"solid\\" | \\"dotted\\" | \\"dashed\\", - outlineWidth?: AnimatableNumericValue, + outlineWidth?: number, elevation?: number, pointerEvents?: \\"auto\\" | \\"none\\" | \\"box-none\\" | \\"box-only\\", cursor?: CursorValue, @@ -7460,9 +7459,8 @@ export type StyleProp<+T> = export type ____DangerouslyImpreciseStyleProp_Internal = StyleProp< Partial<____DangerouslyImpreciseStyle_Internal>, >; -export type ____DangerouslyImpreciseAnimatedStyleProp_Internal = StyleProp< - Partial>, ->; +export type ____DangerouslyImpreciseAnimatedStyleProp_Internal = + WithAnimatedValue>>; export type ____ViewStyleProp_Internal = StyleProp< $ReadOnly>, >; @@ -7498,11 +7496,14 @@ export type ____FlattenStyleProp_Internal<+TStyleProp: StyleProp> = `; exports[`public API should not change unintentionally Libraries/StyleSheet/flattenStyle.js 1`] = ` -"declare function flattenStyle< +"type NonAnimatedNodeObject = TStyleProp extends AnimatedNode + ? empty + : TStyleProp; +declare function flattenStyle< TStyleProp: ____DangerouslyImpreciseAnimatedStyleProp_Internal, >( style: ?TStyleProp -): ?____FlattenStyleProp_Internal; +): ?NonAnimatedNodeObject<____FlattenStyleProp_Internal>; declare export default typeof flattenStyle; " `;