Skip to content

Commit 423d4fd

Browse files
j-piaseckifacebook-github-bot
j-piasecki
authored and
facebook-github-bot
committed
Remove Animated nodes from StyleSheet types (#50452)
Summary: Pull Request resolved: #50452 Changelog: [Internal] Reviewed By: huntie Differential Revision: D72308559 fbshipit-source-id: 0d8a505da6c80a9014667183a19585dd89f1db43
1 parent 2d7b59c commit 423d4fd

File tree

4 files changed

+69
-64
lines changed

4 files changed

+69
-64
lines changed

‎packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ type TouchableOpacityBaseProps = $ReadOnly<{
7171
* Defaults to 0.2
7272
*/
7373
activeOpacity?: ?number,
74-
style?: ?ViewStyleProp,
74+
style?: ?Animated.WithAnimatedValue<ViewStyleProp>,
7575

7676
hostRef?: ?React.RefSetter<React.ElementRef<typeof Animated.View>>,
7777
}>;

‎packages/react-native/Libraries/StyleSheet/StyleSheetTypes.js

Lines changed: 28 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010

1111
'use strict';
1212

13-
import type {AnimatedBaseProps} from '../Animated/createAnimatedComponent';
13+
import type {WithAnimatedValue} from '../Animated/createAnimatedComponent';
1414
import type AnimatedNode from '../Animated/nodes/AnimatedNode';
1515
import type {ImageResizeMode} from './../Image/ImageResizeMode';
1616
import type {
@@ -38,8 +38,7 @@ export type EdgeInsetsValue = {
3838
bottom: number,
3939
};
4040

41-
export type DimensionValue = number | string | 'auto' | AnimatedNode | null;
42-
export type AnimatableNumericValue = number | AnimatedNode;
41+
export type DimensionValue = number | string | 'auto' | null;
4342

4443
export type CursorValue = 'auto' | 'pointer';
4544

@@ -694,7 +693,7 @@ export type ____ShadowStyle_InternalCore = $ReadOnly<{
694693
* Sets the drop shadow opacity (multiplied by the color's alpha component)
695694
* @platform ios
696695
*/
697-
shadowOpacity?: AnimatableNumericValue,
696+
shadowOpacity?: number,
698697
/**
699698
* Sets the drop shadow blur radius
700699
* @platform ios
@@ -777,32 +776,32 @@ export type ____ViewStyle_InternalBase = $ReadOnly<{
777776
borderBlockColor?: ____ColorValue_Internal,
778777
borderBlockEndColor?: ____ColorValue_Internal,
779778
borderBlockStartColor?: ____ColorValue_Internal,
780-
borderRadius?: AnimatableNumericValue | string,
781-
borderBottomEndRadius?: AnimatableNumericValue | string,
782-
borderBottomLeftRadius?: AnimatableNumericValue | string,
783-
borderBottomRightRadius?: AnimatableNumericValue | string,
784-
borderBottomStartRadius?: AnimatableNumericValue | string,
785-
borderEndEndRadius?: AnimatableNumericValue | string,
786-
borderEndStartRadius?: AnimatableNumericValue | string,
787-
borderStartEndRadius?: AnimatableNumericValue | string,
788-
borderStartStartRadius?: AnimatableNumericValue | string,
789-
borderTopEndRadius?: AnimatableNumericValue | string,
790-
borderTopLeftRadius?: AnimatableNumericValue | string,
791-
borderTopRightRadius?: AnimatableNumericValue | string,
792-
borderTopStartRadius?: AnimatableNumericValue | string,
779+
borderRadius?: number | string,
780+
borderBottomEndRadius?: number | string,
781+
borderBottomLeftRadius?: number | string,
782+
borderBottomRightRadius?: number | string,
783+
borderBottomStartRadius?: number | string,
784+
borderEndEndRadius?: number | string,
785+
borderEndStartRadius?: number | string,
786+
borderStartEndRadius?: number | string,
787+
borderStartStartRadius?: number | string,
788+
borderTopEndRadius?: number | string,
789+
borderTopLeftRadius?: number | string,
790+
borderTopRightRadius?: number | string,
791+
borderTopStartRadius?: number | string,
793792
borderStyle?: 'solid' | 'dotted' | 'dashed',
794-
borderWidth?: AnimatableNumericValue,
795-
borderBottomWidth?: AnimatableNumericValue,
796-
borderEndWidth?: AnimatableNumericValue,
797-
borderLeftWidth?: AnimatableNumericValue,
798-
borderRightWidth?: AnimatableNumericValue,
799-
borderStartWidth?: AnimatableNumericValue,
800-
borderTopWidth?: AnimatableNumericValue,
801-
opacity?: AnimatableNumericValue,
793+
borderWidth?: number,
794+
borderBottomWidth?: number,
795+
borderEndWidth?: number,
796+
borderLeftWidth?: number,
797+
borderRightWidth?: number,
798+
borderStartWidth?: number,
799+
borderTopWidth?: number,
800+
opacity?: number,
802801
outlineColor?: ____ColorValue_Internal,
803-
outlineOffset?: AnimatableNumericValue,
802+
outlineOffset?: number,
804803
outlineStyle?: 'solid' | 'dotted' | 'dashed',
805-
outlineWidth?: AnimatableNumericValue,
804+
outlineWidth?: number,
806805
elevation?: number,
807806
pointerEvents?: 'auto' | 'none' | 'box-none' | 'box-only',
808807
cursor?: CursorValue,
@@ -992,9 +991,8 @@ export type ____DangerouslyImpreciseStyleProp_Internal = StyleProp<
992991
Partial<____DangerouslyImpreciseStyle_Internal>,
993992
>;
994993

995-
export type ____DangerouslyImpreciseAnimatedStyleProp_Internal = StyleProp<
996-
Partial<AnimatedBaseProps<____DangerouslyImpreciseStyle_Internal>>,
997-
>;
994+
export type ____DangerouslyImpreciseAnimatedStyleProp_Internal =
995+
WithAnimatedValue<StyleProp<Partial<____DangerouslyImpreciseStyle_Internal>>>;
998996

999997
export type ____ViewStyleProp_Internal = StyleProp<
1000998
$ReadOnly<Partial<____ViewStyle_Internal>>,

‎packages/react-native/Libraries/StyleSheet/flattenStyle.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,22 @@
1010

1111
'use strict';
1212

13+
import type AnimatedNode from '../Animated/nodes/AnimatedNode';
1314
import type {
1415
____DangerouslyImpreciseAnimatedStyleProp_Internal,
1516
____FlattenStyleProp_Internal,
1617
} from './StyleSheetTypes';
1718

19+
type NonAnimatedNodeObject<TStyleProp> = TStyleProp extends AnimatedNode
20+
? empty
21+
: TStyleProp;
22+
1823
function flattenStyle<
1924
TStyleProp: ____DangerouslyImpreciseAnimatedStyleProp_Internal,
2025
>(
2126
style: ?TStyleProp,
2227
// $FlowFixMe[underconstrained-implicit-instantiation]
23-
): ?____FlattenStyleProp_Internal<TStyleProp> {
28+
): ?NonAnimatedNodeObject<____FlattenStyleProp_Internal<TStyleProp>> {
2429
if (style === null || typeof style !== 'object') {
2530
return undefined;
2631
}
@@ -39,6 +44,7 @@ function flattenStyle<
3944
for (const key in computedStyle) {
4045
// $FlowFixMe[incompatible-use]
4146
// $FlowFixMe[invalid-computed-prop]
47+
// $FlowFixMe[prop-missing]
4248
result[key] = computedStyle[key];
4349
}
4450
}

‎packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap

Lines changed: 33 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -3360,7 +3360,7 @@ exports[`public API should not change unintentionally Libraries/Components/Touch
33603360
}>;
33613361
type TouchableOpacityBaseProps = $ReadOnly<{
33623362
activeOpacity?: ?number,
3363-
style?: ?ViewStyleProp,
3363+
style?: ?Animated.WithAnimatedValue<ViewStyleProp>,
33643364
hostRef?: ?React.RefSetter<React.ElementRef<typeof Animated.View>>,
33653365
}>;
33663366
export type TouchableOpacityProps = $ReadOnly<{
@@ -7085,8 +7085,7 @@ export type EdgeInsetsValue = {
70857085
right: number,
70867086
bottom: number,
70877087
};
7088-
export type DimensionValue = number | string | \\"auto\\" | AnimatedNode | null;
7089-
export type AnimatableNumericValue = number | AnimatedNode;
7088+
export type DimensionValue = number | string | \\"auto\\" | null;
70907089
export type CursorValue = \\"auto\\" | \\"pointer\\";
70917090
type ____LayoutStyle_Internal = $ReadOnly<{
70927091
display?: \\"none\\" | \\"flex\\" | \\"contents\\",
@@ -7191,7 +7190,7 @@ export type ____ShadowStyle_InternalCore = $ReadOnly<{
71917190
width?: number,
71927191
height?: number,
71937192
}>,
7194-
shadowOpacity?: AnimatableNumericValue,
7193+
shadowOpacity?: number,
71957194
shadowRadius?: number,
71967195
}>;
71977196
export type ____ShadowStyle_Internal = $ReadOnly<{
@@ -7262,32 +7261,32 @@ export type ____ViewStyle_InternalBase = $ReadOnly<{
72627261
borderBlockColor?: ____ColorValue_Internal,
72637262
borderBlockEndColor?: ____ColorValue_Internal,
72647263
borderBlockStartColor?: ____ColorValue_Internal,
7265-
borderRadius?: AnimatableNumericValue | string,
7266-
borderBottomEndRadius?: AnimatableNumericValue | string,
7267-
borderBottomLeftRadius?: AnimatableNumericValue | string,
7268-
borderBottomRightRadius?: AnimatableNumericValue | string,
7269-
borderBottomStartRadius?: AnimatableNumericValue | string,
7270-
borderEndEndRadius?: AnimatableNumericValue | string,
7271-
borderEndStartRadius?: AnimatableNumericValue | string,
7272-
borderStartEndRadius?: AnimatableNumericValue | string,
7273-
borderStartStartRadius?: AnimatableNumericValue | string,
7274-
borderTopEndRadius?: AnimatableNumericValue | string,
7275-
borderTopLeftRadius?: AnimatableNumericValue | string,
7276-
borderTopRightRadius?: AnimatableNumericValue | string,
7277-
borderTopStartRadius?: AnimatableNumericValue | string,
7264+
borderRadius?: number | string,
7265+
borderBottomEndRadius?: number | string,
7266+
borderBottomLeftRadius?: number | string,
7267+
borderBottomRightRadius?: number | string,
7268+
borderBottomStartRadius?: number | string,
7269+
borderEndEndRadius?: number | string,
7270+
borderEndStartRadius?: number | string,
7271+
borderStartEndRadius?: number | string,
7272+
borderStartStartRadius?: number | string,
7273+
borderTopEndRadius?: number | string,
7274+
borderTopLeftRadius?: number | string,
7275+
borderTopRightRadius?: number | string,
7276+
borderTopStartRadius?: number | string,
72787277
borderStyle?: \\"solid\\" | \\"dotted\\" | \\"dashed\\",
7279-
borderWidth?: AnimatableNumericValue,
7280-
borderBottomWidth?: AnimatableNumericValue,
7281-
borderEndWidth?: AnimatableNumericValue,
7282-
borderLeftWidth?: AnimatableNumericValue,
7283-
borderRightWidth?: AnimatableNumericValue,
7284-
borderStartWidth?: AnimatableNumericValue,
7285-
borderTopWidth?: AnimatableNumericValue,
7286-
opacity?: AnimatableNumericValue,
7278+
borderWidth?: number,
7279+
borderBottomWidth?: number,
7280+
borderEndWidth?: number,
7281+
borderLeftWidth?: number,
7282+
borderRightWidth?: number,
7283+
borderStartWidth?: number,
7284+
borderTopWidth?: number,
7285+
opacity?: number,
72877286
outlineColor?: ____ColorValue_Internal,
7288-
outlineOffset?: AnimatableNumericValue,
7287+
outlineOffset?: number,
72897288
outlineStyle?: \\"solid\\" | \\"dotted\\" | \\"dashed\\",
7290-
outlineWidth?: AnimatableNumericValue,
7289+
outlineWidth?: number,
72917290
elevation?: number,
72927291
pointerEvents?: \\"auto\\" | \\"none\\" | \\"box-none\\" | \\"box-only\\",
72937292
cursor?: CursorValue,
@@ -7460,9 +7459,8 @@ export type StyleProp<+T> =
74607459
export type ____DangerouslyImpreciseStyleProp_Internal = StyleProp<
74617460
Partial<____DangerouslyImpreciseStyle_Internal>,
74627461
>;
7463-
export type ____DangerouslyImpreciseAnimatedStyleProp_Internal = StyleProp<
7464-
Partial<AnimatedBaseProps<____DangerouslyImpreciseStyle_Internal>>,
7465-
>;
7462+
export type ____DangerouslyImpreciseAnimatedStyleProp_Internal =
7463+
WithAnimatedValue<StyleProp<Partial<____DangerouslyImpreciseStyle_Internal>>>;
74667464
export type ____ViewStyleProp_Internal = StyleProp<
74677465
$ReadOnly<Partial<____ViewStyle_Internal>>,
74687466
>;
@@ -7498,11 +7496,14 @@ export type ____FlattenStyleProp_Internal<+TStyleProp: StyleProp<mixed>> =
74987496
`;
74997497

75007498
exports[`public API should not change unintentionally Libraries/StyleSheet/flattenStyle.js 1`] = `
7501-
"declare function flattenStyle<
7499+
"type NonAnimatedNodeObject<TStyleProp> = TStyleProp extends AnimatedNode
7500+
? empty
7501+
: TStyleProp;
7502+
declare function flattenStyle<
75027503
TStyleProp: ____DangerouslyImpreciseAnimatedStyleProp_Internal,
75037504
>(
75047505
style: ?TStyleProp
7505-
): ?____FlattenStyleProp_Internal<TStyleProp>;
7506+
): ?NonAnimatedNodeObject<____FlattenStyleProp_Internal<TStyleProp>>;
75067507
declare export default typeof flattenStyle;
75077508
"
75087509
`;

0 commit comments

Comments
 (0)