Test two ways to use sharedValue in useAnimatedStyle

app/src/examples/RuntimeTests/ReanimatedRuntimeTestsRunner/TestRunner.ts

@@ -142,10 +142,10 @@ export class TestRunner {
   }
 
   public testEach<T>(examples: Array<T>, only = false, skip = false) {
-    return (name: string, testCase: (example: T) => void) => {
+    return (name: string, testCase: (example: T, index?: number) => void) => {
       examples.forEach((example, index) => {
         const currentTestCase = async () => {
-          await testCase(example);
+          await testCase(example, index);
         };
         this.test(formatString(name, example, index), currentTestCase, only, skip);
       });

app/src/examples/RuntimeTests/RuntimeTestsExample.tsx

@@ -2,13 +2,16 @@ import React from 'react';
 import RuntimeTestsRunner from './ReanimatedRuntimeTestsRunner/RuntimeTestsRunner';
 
 // load tests
-// import './tests/Animations.test';
-import './tests/animations/withTiming/easingSnapshots.test';
+import './tests/Animations.test';
+
+import './tests/animations/withTiming/easing.test';
 import './tests/animations/withTiming/basic.test';
 import './tests/animations/withTiming/colors.test';
 import './tests/animations/withTiming/arrays.test';
-import './tests/animations/withTiming/enteringColorsSnapshots.test';
-import './tests/getRelativeCoords/relativeCoords.test';
+import './tests/animations/withTiming/transformMatrices.test';
+
+import './tests/layoutAnimations/entering/enteringColors.test';
+import './tests/utilities/relativeCoords.test';
 
 export default function RuntimeTestsExample() {
   return <RuntimeTestsRunner />;

app/src/examples/RuntimeTests/tests/Animations.test.tsx

@@ -22,7 +22,7 @@ import {
   waitForNotify,
   clearRenderOutput,
 } from '../ReanimatedRuntimeTestsRunner/RuntimeTestsApi';
-import { Snapshots } from './snapshots/Animations.snapshot';
+import { Snapshots } from './Animations.snapshot';
 import { ComparisonMode } from '../ReanimatedRuntimeTestsRunner/types';
 
 const AnimatedComponent = () => {

app/src/examples/RuntimeTests/tests/animations/withTiming/basic.test.tsx

@@ -22,27 +22,45 @@ enum Tracker {
   Width = 'widthTracker',
 }
 
-const WIDTH_COMPONENT_REF = 'WidthComponent';
+const WIDTH_COMPONENT_ACTIVE_REF = 'WidthComponentActive';
+const WIDTH_COMPONENT_PASSIVE_REF = 'WidthComponentPassive';
+
 type Width = number | `${number}%` | 'auto';
 
 describe('withTiming animation of WIDTH', () => {
   const WidthComponent = ({ startWidth, finalWidth }: { startWidth: Width; finalWidth: Width }) => {
-    const widthSV = useSharedValue(startWidth);
-    const ref = useTestRef(WIDTH_COMPONENT_REF);
+    const widthActiveSV = useSharedValue(startWidth);
+    const widthPassiveSV = useSharedValue(startWidth);
 
-    const style = useAnimatedStyle(() => {
+    const refActive = useTestRef(WIDTH_COMPONENT_ACTIVE_REF);
+    const refPassive = useTestRef(WIDTH_COMPONENT_PASSIVE_REF);
+
+    const styleActive = useAnimatedStyle(() => {
+      return {
+        width: withTiming(widthActiveSV.value, { duration: 500 }),
+      };
+    });
+    const stylePassive = useAnimatedStyle(() => {
       return {
-        width: withTiming(widthSV.value, { duration: 500 }),
+        width: withTiming(widthActiveSV.value, { duration: 500 }),
       };
     });
 
     useEffect(() => {
-      widthSV.value = finalWidth;
-    }, [widthSV, finalWidth]);
+      widthActiveSV.value = finalWidth;
+    }, [widthActiveSV, finalWidth]);
+
+    useEffect(() => {
+      widthPassiveSV.value = withTiming(finalWidth, { duration: 500 });
+    }, [widthPassiveSV, finalWidth]);
 
     return (
       <View style={styles.container}>
-        <Animated.View ref={ref} style={[styles.animatedBox, style]} />
+        <Animated.View
+          ref={refActive}
+          style={[styles.animatedBox, { backgroundColor: 'palevioletred' }, styleActive]}
+        />
+        <Animated.View ref={refPassive} style={[styles.animatedBox, { backgroundColor: 'royalblue' }, stylePassive]} />
       </View>
     );
   };
@@ -71,23 +89,27 @@ describe('withTiming animation of WIDTH', () => {
       startWidth: 20,
       finalWidth: '40%',
       finalWidthInPixels: Dimensions.get('window').width * 0.4,
-      description: 'width from pixels to percents',
+      description: 'width from pixels to percents (not supported)',
     },
   ] as Array<TestCase>)(
     '${description}, from ${startWidth} to ${finalWidth}',
     async ({ startWidth, finalWidth, finalWidthInPixels }: TestCase) => {
       await render(<WidthComponent startWidth={startWidth} finalWidth={finalWidth} />);
-      const component = getTestComponent(WIDTH_COMPONENT_REF);
+      const componentActive = getTestComponent(WIDTH_COMPONENT_ACTIVE_REF);
+      const WidthComponentPassive = getTestComponent(WIDTH_COMPONENT_PASSIVE_REF);
       await wait(1000);
-      expect(await component.getAnimatedStyle('width')).toBe(finalWidthInPixels, ComparisonMode.DISTANCE);
+      expect(await componentActive.getAnimatedStyle('width')).toBe(finalWidthInPixels, ComparisonMode.DISTANCE);
+      expect(await WidthComponentPassive.getAnimatedStyle('width')).toBe(finalWidthInPixels, ComparisonMode.DISTANCE);
     },
   );
 
   test('Width from percent to pixels is NOT handled correctly', async () => {
     await render(<WidthComponent startWidth={'20%'} finalWidth={100} />);
-    const component = getTestComponent(WIDTH_COMPONENT_REF);
+    const componentActive = getTestComponent(WIDTH_COMPONENT_ACTIVE_REF);
+    const WidthComponentPassive = getTestComponent(WIDTH_COMPONENT_PASSIVE_REF);
     await wait(1000);
-    expect(await component.getAnimatedStyle('width')).not.toBe(100, ComparisonMode.DISTANCE);
+    expect(await componentActive.getAnimatedStyle('width')).not.toBe(100, ComparisonMode.DISTANCE);
+    expect(await WidthComponentPassive.getAnimatedStyle('width')).not.toBe(100, ComparisonMode.DISTANCE);
   });
 });
 
@@ -138,7 +160,6 @@ const styles = StyleSheet.create({
   },
   animatedBox: {
     width: 0,
-    opacity: 0,
     height: 80,
     margin: 30,
   },

app/src/examples/RuntimeTests/tests/animations/withTiming/colors.test.tsx

@@ -13,33 +13,48 @@ import {
   wait,
 } from '../../../ReanimatedRuntimeTestsRunner/RuntimeTestsApi';
 
-const COMPONENT_REF = 'ColorComponent';
+const COMPONENT_REF_ACTIVE = 'ColorComponentPassive';
+const COMPONENT_REF_PASSIVE = 'ColorComponentPassive';
 
 const ColorComponent = ({ color1, color2 }: { color1: string | number; color2: string | number }) => {
-  const colorSV = useSharedValue(color1);
-  const ref = useTestRef(COMPONENT_REF);
+  const colorActiveSV = useSharedValue(color1);
+  const colorPassiveSV = useSharedValue(color1);
+
+  const refActive = useTestRef(COMPONENT_REF_ACTIVE);
+  const refPassive = useTestRef(COMPONENT_REF_PASSIVE);
+
+  // @ts-ignore number is not a valid color
+  const styleActive = useAnimatedStyle(() => {
+    return {
+      backgroundColor: withDelay(100, withTiming(colorActiveSV.value, { duration: 400 })),
+    };
+  });
 
   // @ts-ignore number is not a valid color
-  const style = useAnimatedStyle(() => {
+  const stylePassive = useAnimatedStyle(() => {
     return {
-      backgroundColor: withDelay(100, withTiming(colorSV.value, { duration: 400 })),
+      backgroundColor: colorPassiveSV.value,
     };
   });
 
   useEffect(() => {
-    colorSV.value = color2;
-  }, [colorSV, color2]);
+    colorActiveSV.value = color2;
+  }, [colorActiveSV, color2]);
+
+  useEffect(() => {
+    colorPassiveSV.value = withDelay(100, withTiming(color2, { duration: 400 }));
+  }, [colorPassiveSV, color2]);
 
   return (
     <View style={styles.container}>
-      <Animated.View ref={ref} style={[styles.animatedBox, style]} />
+      <Animated.View ref={refActive} style={[styles.animatedBox, styleActive]} />
+      <Animated.View ref={refPassive} style={[styles.animatedBox, stylePassive]} />
     </View>
   );
 };
 
 describe('withTiming animation of COLOR 🎨', () => {
   const OPAQUE_COLORS = [
-    0x6495ed,
     'rgb(100,149,237)',
     'rgba(100,149,237,1)',
     '#6495ed',
@@ -51,18 +66,38 @@ describe('withTiming animation of COLOR 🎨', () => {
 
   test.each(OPAQUE_COLORS)('Animate FROM color as %s', async color => {
     await render(<ColorComponent color1={color} color2="coral" />);
-    const component = getTestComponent(COMPONENT_REF);
-    expect(await component.getAnimatedStyle('backgroundColor')).toBe('#6495ed', ComparisonMode.COLOR);
+    const componentActive = getTestComponent(COMPONENT_REF_ACTIVE);
+    const componentPassive = getTestComponent(COMPONENT_REF_PASSIVE);
+
+    expect(await componentActive.getAnimatedStyle('backgroundColor')).toBe('#6495ed', ComparisonMode.COLOR);
+    expect(await componentPassive.getAnimatedStyle('backgroundColor')).toBe('#6495ed', ComparisonMode.COLOR);
     await wait(1000);
-    expect(await component.getAnimatedStyle('backgroundColor')).toBe('#ff7f50', ComparisonMode.COLOR);
+    expect(await componentActive.getAnimatedStyle('backgroundColor')).toBe('#ff7f50', ComparisonMode.COLOR);
+    expect(await componentPassive.getAnimatedStyle('backgroundColor')).toBe('#ff7f50', ComparisonMode.COLOR);
   });
 
   test.each(OPAQUE_COLORS)('Animate TO color as %s', async color => {
     await render(<ColorComponent color1="coral" color2={color} />);
-    const component = getTestComponent(COMPONENT_REF);
-    expect(await component.getAnimatedStyle('backgroundColor')).toBe('#ff7f50', ComparisonMode.COLOR);
+    const componentActive = getTestComponent(COMPONENT_REF_ACTIVE);
+    const componentPassive = getTestComponent(COMPONENT_REF_PASSIVE);
+
+    expect(await componentActive.getAnimatedStyle('backgroundColor')).toBe('#ff7f50', ComparisonMode.COLOR);
+    expect(await componentPassive.getAnimatedStyle('backgroundColor')).toBe('#ff7f50', ComparisonMode.COLOR);
     await wait(1000);
-    expect(await component.getAnimatedStyle('backgroundColor')).toBe('#6495ed', ComparisonMode.COLOR);
+    expect(await componentActive.getAnimatedStyle('backgroundColor')).toBe('#6495ed', ComparisonMode.COLOR);
+    expect(await componentPassive.getAnimatedStyle('backgroundColor')).toBe('#6495ed', ComparisonMode.COLOR);
+  });
+
+  test("Animating colors as number doesn't work and doesn't crash", async () => {
+    await render(<ColorComponent color1="coral" color2={0x6495ed} />);
+    const componentActive = getTestComponent(COMPONENT_REF_ACTIVE);
+    const componentPassive = getTestComponent(COMPONENT_REF_PASSIVE);
+
+    expect(await componentActive.getAnimatedStyle('backgroundColor')).toBe('#ff7f50', ComparisonMode.COLOR);
+    expect(await componentPassive.getAnimatedStyle('backgroundColor')).toBe('#ff7f50', ComparisonMode.COLOR);
+    await wait(1000);
+    expect(await componentActive.getAnimatedStyle('backgroundColor')).not.toBe('#6495ed', ComparisonMode.COLOR);
+    expect(await componentPassive.getAnimatedStyle('backgroundColor')).not.toBe('#6495ed', ComparisonMode.COLOR);
   });
 
   test.each([
@@ -75,12 +110,14 @@ describe('withTiming animation of COLOR 🎨', () => {
     { from: '#5bc', fromHex: '#55bbcc', to: '#1b1', toHex: '#11bb11' },
   ])('Animate from ${from} to ${to}', async ({ from, to, fromHex, toHex }) => {
     await render(<ColorComponent color1={from} color2={to} />);
-    const component = getTestComponent(COMPONENT_REF);
+    const componentActive = getTestComponent(COMPONENT_REF_ACTIVE);
+    const componentPassive = getTestComponent(COMPONENT_REF_PASSIVE);
 
-    expect(await component.getAnimatedStyle('backgroundColor')).toBe(fromHex, ComparisonMode.COLOR);
+    expect(await componentActive.getAnimatedStyle('backgroundColor')).toBe(fromHex, ComparisonMode.COLOR);
+    expect(await componentPassive.getAnimatedStyle('backgroundColor')).toBe(fromHex, ComparisonMode.COLOR);
     await wait(1000);
-
-    expect(await component.getAnimatedStyle('backgroundColor')).toBe(toHex, ComparisonMode.COLOR);
+    expect(await componentActive.getAnimatedStyle('backgroundColor')).toBe(toHex, ComparisonMode.COLOR);
+    expect(await componentPassive.getAnimatedStyle('backgroundColor')).toBe(toHex, ComparisonMode.COLOR);
   });
 });