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
This commit is contained in:
Jakub Piasecki
2025-04-09 02:16:09 -07:00
committed by Facebook GitHub Bot
parent 2d7b59c669
commit 423d4fd7dc
4 changed files with 69 additions and 64 deletions
@@ -71,7 +71,7 @@ type TouchableOpacityBaseProps = $ReadOnly<{
* Defaults to 0.2
*/
activeOpacity?: ?number,
style?: ?ViewStyleProp,
style?: ?Animated.WithAnimatedValue<ViewStyleProp>,
hostRef?: ?React.RefSetter<React.ElementRef<typeof Animated.View>>,
}>;
+28 -30
View File
@@ -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<AnimatedBaseProps<____DangerouslyImpreciseStyle_Internal>>,
>;
export type ____DangerouslyImpreciseAnimatedStyleProp_Internal =
WithAnimatedValue<StyleProp<Partial<____DangerouslyImpreciseStyle_Internal>>>;
export type ____ViewStyleProp_Internal = StyleProp<
$ReadOnly<Partial<____ViewStyle_Internal>>,
+7 -1
View File
@@ -10,17 +10,22 @@
'use strict';
import type AnimatedNode from '../Animated/nodes/AnimatedNode';
import type {
____DangerouslyImpreciseAnimatedStyleProp_Internal,
____FlattenStyleProp_Internal,
} from './StyleSheetTypes';
type NonAnimatedNodeObject<TStyleProp> = TStyleProp extends AnimatedNode
? empty
: TStyleProp;
function flattenStyle<
TStyleProp: ____DangerouslyImpreciseAnimatedStyleProp_Internal,
>(
style: ?TStyleProp,
// $FlowFixMe[underconstrained-implicit-instantiation]
): ?____FlattenStyleProp_Internal<TStyleProp> {
): ?NonAnimatedNodeObject<____FlattenStyleProp_Internal<TStyleProp>> {
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];
}
}
@@ -3360,7 +3360,7 @@ exports[`public API should not change unintentionally Libraries/Components/Touch
}>;
type TouchableOpacityBaseProps = $ReadOnly<{
activeOpacity?: ?number,
style?: ?ViewStyleProp,
style?: ?Animated.WithAnimatedValue<ViewStyleProp>,
hostRef?: ?React.RefSetter<React.ElementRef<typeof Animated.View>>,
}>;
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<AnimatedBaseProps<____DangerouslyImpreciseStyle_Internal>>,
>;
export type ____DangerouslyImpreciseAnimatedStyleProp_Internal =
WithAnimatedValue<StyleProp<Partial<____DangerouslyImpreciseStyle_Internal>>>;
export type ____ViewStyleProp_Internal = StyleProp<
$ReadOnly<Partial<____ViewStyle_Internal>>,
>;
@@ -7498,11 +7496,14 @@ export type ____FlattenStyleProp_Internal<+TStyleProp: StyleProp<mixed>> =
`;
exports[`public API should not change unintentionally Libraries/StyleSheet/flattenStyle.js 1`] = `
"declare function flattenStyle<
"type NonAnimatedNodeObject<TStyleProp> = TStyleProp extends AnimatedNode
? empty
: TStyleProp;
declare function flattenStyle<
TStyleProp: ____DangerouslyImpreciseAnimatedStyleProp_Internal,
>(
style: ?TStyleProp
): ?____FlattenStyleProp_Internal<TStyleProp>;
): ?NonAnimatedNodeObject<____FlattenStyleProp_Internal<TStyleProp>>;
declare export default typeof flattenStyle;
"
`;