Skip to content

Commit ef812a1

Browse files
tjzeltjzel
authored
fix: Animation assignment with compiler-safe API (#6715)
## Summary When I added compiler-safe API for shared values, I accidentally forgot that animations exist and that their assignment to shared values has to be handled separately. Fixes - #6613 ## Test plan Added relevant runtime test suite and adjusted some others.
1 parent 1eed1a9 commit ef812a1

File tree

6 files changed

+316
-101
lines changed

6 files changed

+316
-101
lines changed

‎apps/common-app/src/examples/RuntimeTests/RuntimeTestsExample.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,8 @@ export default function RuntimeTestsExample() {
4949
require('./tests/core/useAnimatedStyle/reuseAnimatedStyle.test');
5050
require('./tests/core/useDerivedValue/basic.test');
5151
require('./tests/core/useDerivedValue/chain.test');
52+
53+
require('./tests/core/useSharedValue/animationsCompilerApi.test');
5254
},
5355
},
5456
{

‎apps/common-app/src/examples/RuntimeTests/tests/animations/withTiming/basic.test.tsx‎

Lines changed: 57 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,15 @@ const WIDTH_COMPONENT_PASSIVE_REF = 'WidthComponentPassive';
2727
type Width = number | `${number}%` | 'auto';
2828

2929
describe('withTiming animation of WIDTH', () => {
30-
const WidthComponent = ({ startWidth, finalWidth }: { startWidth: Width; finalWidth: Width }) => {
30+
const WidthComponent = ({
31+
startWidth,
32+
finalWidth,
33+
compilerApi,
34+
}: {
35+
startWidth: Width;
36+
finalWidth: Width;
37+
compilerApi: boolean;
38+
}) => {
3139
const widthActiveSV = useSharedValue(startWidth);
3240
const widthPassiveSV = useSharedValue(startWidth);
3341

@@ -36,22 +44,30 @@ describe('withTiming animation of WIDTH', () => {
3644

3745
const styleActive = useAnimatedStyle(() => {
3846
return {
39-
width: withTiming(widthActiveSV.value, { duration: 500 }),
47+
width: withTiming(compilerApi ? widthActiveSV.get() : widthActiveSV.value, { duration: 500 }),
4048
};
4149
});
4250
const stylePassive = useAnimatedStyle(() => {
4351
return {
44-
width: widthPassiveSV.value,
52+
width: compilerApi ? widthPassiveSV.get() : widthPassiveSV.value,
4553
};
4654
});
4755

4856
useEffect(() => {
49-
widthActiveSV.value = finalWidth;
50-
}, [widthActiveSV, finalWidth]);
57+
if (compilerApi) {
58+
widthActiveSV.set(finalWidth);
59+
} else {
60+
widthActiveSV.value = finalWidth;
61+
}
62+
}, [widthActiveSV, finalWidth, compilerApi]);
5163

5264
useEffect(() => {
53-
widthPassiveSV.value = withTiming(finalWidth, { duration: 500 });
54-
}, [widthPassiveSV, finalWidth]);
65+
if (compilerApi) {
66+
widthPassiveSV.set(withTiming(finalWidth, { duration: 500 }));
67+
} else {
68+
widthPassiveSV.value = withTiming(finalWidth, { duration: 500 });
69+
}
70+
}, [widthPassiveSV, finalWidth, compilerApi]);
5571

5672
return (
5773
<View style={styles.container}>
@@ -69,31 +85,41 @@ describe('withTiming animation of WIDTH', () => {
6985
finalWidth: Width;
7086
finalWidthInPixels: number;
7187
description: string;
88+
compilerApi: boolean;
7289
}
73-
test.each([
74-
{ startWidth: 0, finalWidth: 100, finalWidthInPixels: 100, description: 'width in pixels' },
75-
{
76-
startWidth: '0%',
77-
finalWidth: '100%',
78-
finalWidthInPixels: Dimensions.get('window').width,
79-
description: 'width in percents',
80-
},
81-
{
82-
startWidth: '0%',
83-
finalWidth: '75%',
84-
finalWidthInPixels: Dimensions.get('window').width * 0.75,
85-
description: 'width in percents',
86-
},
87-
{
88-
startWidth: 20,
89-
finalWidth: '40%',
90-
finalWidthInPixels: Dimensions.get('window').width * 0.4,
91-
description: 'width from pixels to percents (not supported)',
92-
},
93-
] as Array<TestCase>)(
90+
test.each(
91+
[
92+
{ startWidth: 0, finalWidth: 100, finalWidthInPixels: 100, description: 'width in pixels' },
93+
{
94+
startWidth: '0%',
95+
finalWidth: '100%',
96+
finalWidthInPixels: Dimensions.get('window').width,
97+
description: 'width in percents',
98+
},
99+
{
100+
startWidth: '0%',
101+
finalWidth: '75%',
102+
finalWidthInPixels: Dimensions.get('window').width * 0.75,
103+
description: 'width in percents',
104+
},
105+
{
106+
startWidth: 20,
107+
finalWidth: '40%',
108+
finalWidthInPixels: Dimensions.get('window').width * 0.4,
109+
description: 'width from pixels to percents (not supported)',
110+
},
111+
].reduce(
112+
(acc, element) => [
113+
...acc,
114+
{ ...element, compilerApi: false },
115+
{ ...element, compilerApi: true, description: `${element.description} (compiler API)` },
116+
],
117+
[] as Record<string, unknown>[],
118+
) as unknown as Array<TestCase>,
119+
)(
94120
'${description}, from ${startWidth} to ${finalWidth}',
95-
async ({ startWidth, finalWidth, finalWidthInPixels }: TestCase) => {
96-
await render(<WidthComponent startWidth={startWidth} finalWidth={finalWidth} />);
121+
async ({ startWidth, finalWidth, finalWidthInPixels, compilerApi }: TestCase) => {
122+
await render(<WidthComponent startWidth={startWidth} finalWidth={finalWidth} compilerApi={compilerApi} />);
97123
const componentActive = getTestComponent(WIDTH_COMPONENT_ACTIVE_REF);
98124
const WidthComponentPassive = getTestComponent(WIDTH_COMPONENT_PASSIVE_REF);
99125
await wait(1000);
@@ -103,7 +129,7 @@ describe('withTiming animation of WIDTH', () => {
103129
);
104130

105131
test('Width from percent to pixels is NOT handled correctly', async () => {
106-
await render(<WidthComponent startWidth={'20%'} finalWidth={100} />);
132+
await render(<WidthComponent startWidth={'20%'} finalWidth={100} compilerApi={false} />);
107133
const componentActive = getTestComponent(WIDTH_COMPONENT_ACTIVE_REF);
108134
const WidthComponentPassive = getTestComponent(WIDTH_COMPONENT_PASSIVE_REF);
109135
await wait(1000);

‎apps/common-app/src/examples/RuntimeTests/tests/core/useDerivedValue/basic.test.tsx‎

Lines changed: 95 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -43,12 +43,14 @@ describe('Test useDerivedValue changing width', () => {
4343
animate,
4444
animationType,
4545
deriveFunction,
46+
compilerApi,
4647
}: {
4748
startWidth: number;
4849
finalWidth: number;
4950
animate: AnimationLocation;
5051
animationType: AnimationType;
5152
deriveFunction: (a: number) => number;
53+
compilerApi: boolean;
5254
}) => {
5355
const basicValue = useSharedValue(startWidth);
5456
const componentRef = useTestRef(WIDTH_COMPONENT);
@@ -60,20 +62,30 @@ describe('Test useDerivedValue changing width', () => {
6062
if (animate === AnimationLocation.ANIMATED_STYLE) {
6163
return {
6264
width:
63-
animationType === AnimationType.TIMING ? withTiming(derivedValue.value) : withSpring(derivedValue.value),
65+
animationType === AnimationType.TIMING
66+
? withTiming(compilerApi ? derivedValue.get() : derivedValue.value)
67+
: withSpring(compilerApi ? derivedValue.get() : derivedValue.value),
6468
};
6569
} else {
66-
return { width: derivedValue.value };
70+
return { width: compilerApi ? derivedValue.get() : derivedValue.value };
6771
}
6872
});
6973

7074
useEffect(() => {
7175
if (animate === AnimationLocation.USE_EFFECT) {
72-
basicValue.value = animationType === AnimationType.TIMING ? withTiming(finalWidth) : withSpring(finalWidth);
76+
if (compilerApi) {
77+
basicValue.set(animationType === AnimationType.TIMING ? withTiming(finalWidth) : withSpring(finalWidth));
78+
} else {
79+
basicValue.value = animationType === AnimationType.TIMING ? withTiming(finalWidth) : withSpring(finalWidth);
80+
}
7381
} else {
74-
basicValue.value = finalWidth;
82+
if (compilerApi) {
83+
basicValue.set(finalWidth);
84+
} else {
85+
basicValue.value = finalWidth;
86+
}
7587
}
76-
}, [basicValue, finalWidth, animate, animationType]);
88+
}, [basicValue, finalWidth, animate, animationType, compilerApi]);
7789

7890
return (
7991
<View style={styles.container}>
@@ -108,6 +120,7 @@ describe('Test useDerivedValue changing width', () => {
108120
finalWidth: number,
109121
animate: AnimationLocation,
110122
animationType: AnimationType,
123+
compilerApi: boolean,
111124
) {
112125
await mockAnimationTimer();
113126
const updatesContainerActive = await recordAnimationUpdates();
@@ -118,6 +131,7 @@ describe('Test useDerivedValue changing width', () => {
118131
animate={animate}
119132
animationType={animationType}
120133
deriveFunction={derivedFun}
134+
compilerApi={compilerApi}
121135
/>,
122136
);
123137
const testComponent = getTestComponent(WIDTH_COMPONENT);
@@ -129,68 +143,81 @@ describe('Test useDerivedValue changing width', () => {
129143
return [updates, naiveUpdates];
130144
}
131145

132-
test.each([
133-
{
134-
startWidth: 0,
135-
finalWidth: 100,
136-
animate: AnimationLocation.USE_EFFECT,
137-
animationType: AnimationType.TIMING,
138-
},
139-
{
140-
startWidth: 0,
141-
finalWidth: 100,
142-
animate: AnimationLocation.ANIMATED_STYLE,
143-
animationType: AnimationType.TIMING,
144-
},
145-
{
146-
startWidth: 0,
147-
finalWidth: 100,
148-
animate: AnimationLocation.ANIMATED_STYLE,
149-
animationType: AnimationType.SPRING,
150-
},
151-
{
152-
startWidth: 0,
153-
finalWidth: 100,
154-
animate: AnimationLocation.USE_EFFECT,
155-
animationType: AnimationType.SPRING,
156-
},
157-
{
158-
startWidth: 0,
159-
finalWidth: 100,
160-
animate: AnimationLocation.NONE,
161-
animationType: AnimationType.NONE,
162-
},
163-
{
164-
startWidth: 100,
165-
finalWidth: 20,
166-
animate: AnimationLocation.USE_EFFECT,
167-
animationType: AnimationType.TIMING,
168-
},
169-
{
170-
startWidth: 400,
171-
finalWidth: 300,
172-
animate: AnimationLocation.ANIMATED_STYLE,
173-
animationType: AnimationType.TIMING,
174-
},
175-
{
176-
startWidth: 20,
177-
finalWidth: 100,
178-
animate: AnimationLocation.ANIMATED_STYLE,
179-
animationType: AnimationType.SPRING,
180-
},
181-
{
182-
startWidth: 55.5,
183-
finalWidth: 155.5,
184-
animate: AnimationLocation.USE_EFFECT,
185-
animationType: AnimationType.SPRING,
186-
},
187-
{
188-
startWidth: 300,
189-
finalWidth: 33,
190-
animate: AnimationLocation.NONE,
191-
animationType: AnimationType.NONE,
192-
},
193-
])(
146+
test.each(
147+
[
148+
{
149+
startWidth: 0,
150+
finalWidth: 100,
151+
animate: AnimationLocation.USE_EFFECT,
152+
animationType: AnimationType.TIMING,
153+
},
154+
{
155+
startWidth: 0,
156+
finalWidth: 100,
157+
animate: AnimationLocation.ANIMATED_STYLE,
158+
animationType: AnimationType.TIMING,
159+
},
160+
{
161+
startWidth: 0,
162+
finalWidth: 100,
163+
animate: AnimationLocation.ANIMATED_STYLE,
164+
animationType: AnimationType.SPRING,
165+
},
166+
{
167+
startWidth: 0,
168+
finalWidth: 100,
169+
animate: AnimationLocation.USE_EFFECT,
170+
animationType: AnimationType.SPRING,
171+
},
172+
{
173+
startWidth: 0,
174+
finalWidth: 100,
175+
animate: AnimationLocation.NONE,
176+
animationType: AnimationType.NONE,
177+
},
178+
{
179+
startWidth: 100,
180+
finalWidth: 20,
181+
animate: AnimationLocation.USE_EFFECT,
182+
animationType: AnimationType.TIMING,
183+
},
184+
{
185+
startWidth: 400,
186+
finalWidth: 300,
187+
animate: AnimationLocation.ANIMATED_STYLE,
188+
animationType: AnimationType.TIMING,
189+
},
190+
{
191+
startWidth: 20,
192+
finalWidth: 100,
193+
animate: AnimationLocation.ANIMATED_STYLE,
194+
animationType: AnimationType.SPRING,
195+
},
196+
{
197+
startWidth: 55.5,
198+
finalWidth: 155.5,
199+
animate: AnimationLocation.USE_EFFECT,
200+
animationType: AnimationType.SPRING,
201+
},
202+
{
203+
startWidth: 300,
204+
finalWidth: 33,
205+
animate: AnimationLocation.NONE,
206+
animationType: AnimationType.NONE,
207+
},
208+
].reduce(
209+
(acc, element) => {
210+
return [...acc, { ...element, compilerApi: false }, { ...element, compilerApi: true }];
211+
},
212+
[] as {
213+
startWidth: number;
214+
finalWidth: number;
215+
animate: AnimationLocation;
216+
animationType: AnimationType;
217+
compilerApi: boolean;
218+
}[],
219+
),
220+
)(
194221
'Animate from ${startWidth} to ${finalWidth}, ${animationType} ${animate}',
195222
async ({ startWidth, finalWidth, animate, animationType }) => {
196223
const snapshotIdPerType = {
@@ -212,6 +239,7 @@ describe('Test useDerivedValue changing width', () => {
212239
finalWidth,
213240
animate,
214241
animationType,
242+
false,
215243
);
216244

217245
expect(updates).toMatchSnapshots(snapshot[snapshotName]);

0 commit comments

Comments
 (0)