diff --git a/app/src/examples/RuntimeTests/RuntimeTestsExample.tsx b/app/src/examples/RuntimeTests/RuntimeTestsExample.tsx index 3028015d44b..2f2eca922a6 100644 --- a/app/src/examples/RuntimeTests/RuntimeTestsExample.tsx +++ b/app/src/examples/RuntimeTests/RuntimeTestsExample.tsx @@ -7,6 +7,7 @@ import './tests/animations/withTiming/easingSnapshots.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'; export default function RuntimeTestsExample() { return ; diff --git a/app/src/examples/RuntimeTests/tests/animations/withTiming/easingSnapshots.test.tsx b/app/src/examples/RuntimeTests/tests/animations/withTiming/easingSnapshots.test.tsx index 70fdffa3268..2ab6941a6be 100644 --- a/app/src/examples/RuntimeTests/tests/animations/withTiming/easingSnapshots.test.tsx +++ b/app/src/examples/RuntimeTests/tests/animations/withTiming/easingSnapshots.test.tsx @@ -42,7 +42,7 @@ const AnimatedComponent = ({ easing }: { easing: EasingFunction | EasingFunction ); }; -async function getSnaphotUpdates(easingFn: EasingFunction | EasingFunctionFactory | undefined) { +async function getSnapshotUpdates(easingFn: EasingFunction | EasingFunctionFactory | undefined) { await mockAnimationTimer(); const updatesContainer = await recordAnimationUpdates(); await render(); @@ -54,7 +54,7 @@ async function getSnaphotUpdates(easingFn: EasingFunction | EasingFunctionFactor describe('withTiming snapshots 📸, test EASING', () => { test('No easing function', async () => { - const [updates, nativeUpdates] = await getSnaphotUpdates(undefined); + const [updates, nativeUpdates] = await getSnapshotUpdates(undefined); expect(updates).toMatchSnapshots(Snapshots.noEasing); expect(updates).toMatchNativeSnapshots(nativeUpdates, true); }); @@ -79,7 +79,7 @@ describe('withTiming snapshots 📸, test EASING', () => { .replace(/\./g, '$') .replace(/-/g, '$')}`; - const [updates, nativeUpdates] = await getSnaphotUpdates( + const [updates, nativeUpdates] = await getSnapshotUpdates( //@ts-ignore This error is because various easing functions accept different number of arguments easing(...argumentSet), ); @@ -97,13 +97,13 @@ describe('withTiming snapshots 📸, test EASING', () => { Easing.quad, Easing.sin, ])('Easing.%p', async easing => { - const [updates, nativeUpdates] = await getSnaphotUpdates(easing); + const [updates, nativeUpdates] = await getSnapshotUpdates(easing); expect(updates).toMatchSnapshots(Snapshots[easing.name as keyof typeof Snapshots]); expect(updates).toMatchNativeSnapshots(nativeUpdates, true); }); test.each([(Easing.in, Easing.out, Easing.inOut)])('Easing.%p(Easing.elastic(10))', async easing => { - const [updates, nativeUpdates] = await getSnaphotUpdates(easing(Easing.elastic(10))); + const [updates, nativeUpdates] = await getSnapshotUpdates(easing(Easing.elastic(10))); expect(updates).toMatchSnapshots(Snapshots[easing.name as keyof typeof Snapshots]); expect(updates).toMatchNativeSnapshots(nativeUpdates, true); }); diff --git a/app/src/examples/RuntimeTests/tests/animations/withTiming/entering.snapshot.ts b/app/src/examples/RuntimeTests/tests/animations/withTiming/entering.snapshot.ts new file mode 100644 index 00000000000..e283d97d5dd --- /dev/null +++ b/app/src/examples/RuntimeTests/tests/animations/withTiming/entering.snapshot.ts @@ -0,0 +1,31 @@ +export const Snapshots = { + _16_128_26_1__179_6_6_1_: [{"backgroundColor": 4279271450}, {"backgroundColor": 4279271450}, {"backgroundColor": 4279271450}, {"backgroundColor": 4279271450}, {"backgroundColor": 4279271450}, {"backgroundColor": 4279271450}, {"backgroundColor": 4279271450}, {"backgroundColor": 4279271450}, {"backgroundColor": 4279271450}, {"backgroundColor": 4279271450}, {"backgroundColor": 4279271450}, {"backgroundColor": 4279271450}, {"backgroundColor": 4279271450}, {"backgroundColor": 4279271450}, {"backgroundColor": 4279271450}, {"backgroundColor": 4279271450}, {"backgroundColor": 4279271450}, {"backgroundColor": 4279271450}, {"backgroundColor": 4279271450}, {"backgroundColor": 4279271450}, {"backgroundColor": 4279271450}, {"backgroundColor": 4279271450}, {"backgroundColor": 4279271450}, {"backgroundColor": 4279271450}, {"backgroundColor": 4279271450}, {"backgroundColor": 4279271450}, {"backgroundColor": 4279271450}, {"backgroundColor": 4279271450}, {"backgroundColor": 4279271450}, {"backgroundColor": 4279271450}, {"backgroundColor": 4279271450}, {"backgroundColor": 4279271450}, {"backgroundColor": 4279271450}, {"backgroundColor": 4279468058}, {"backgroundColor": 4279861274}, {"backgroundColor": 4280319770}, {"backgroundColor": 4280843802}, {"backgroundColor": 4281367833}, {"backgroundColor": 4281891865}, {"backgroundColor": 4282415641}, {"backgroundColor": 4282939416}, {"backgroundColor": 4283463192}, {"backgroundColor": 4283986712}, {"backgroundColor": 4284510231}, {"backgroundColor": 4284968214}, {"backgroundColor": 4285491734}, {"backgroundColor": 4286014741}, {"backgroundColor": 4286472468}, {"backgroundColor": 4286995219}, {"backgroundColor": 4287387154}, {"backgroundColor": 4287778833}, {"backgroundColor": 4288170768}, {"backgroundColor": 4288431375}, {"backgroundColor": 4288692238}, {"backgroundColor": 4288952845}, {"backgroundColor": 4289147916}, {"backgroundColor": 4289343243}, {"backgroundColor": 4289472778}, {"backgroundColor": 4289602313}, {"backgroundColor": 4289731848}, {"backgroundColor": 4289795847}, {"backgroundColor": 4289859847}, {"backgroundColor": 4289923846}, {"backgroundColor": 4289922566}, {"backgroundColor": 4289922566}], + _16_128_26_1__179_6_6_1_native: [{"backgroundColor": "nil"}, {"backgroundColor": "#10801a"}, {"backgroundColor": "#10801a"}, {"backgroundColor": "#10801a"}, {"backgroundColor": "#10801a"}, {"backgroundColor": "#10801a"}, {"backgroundColor": "#10801a"}, {"backgroundColor": "#10801a"}, {"backgroundColor": "#10801a"}, {"backgroundColor": "#10801a"}, {"backgroundColor": "#10801a"}, {"backgroundColor": "#10801a"}, {"backgroundColor": "#10801a"}, {"backgroundColor": "#10801a"}, {"backgroundColor": "#10801a"}, {"backgroundColor": "#10801a"}, {"backgroundColor": "#10801a"}, {"backgroundColor": "#10801a"}, {"backgroundColor": "#10801a"}, {"backgroundColor": "#10801a"}, {"backgroundColor": "#10801a"}, {"backgroundColor": "#10801a"}, {"backgroundColor": "#10801a"}, {"backgroundColor": "#10801a"}, {"backgroundColor": "#10801a"}, {"backgroundColor": "#10801a"}, {"backgroundColor": "#10801a"}, {"backgroundColor": "#10801a"}, {"backgroundColor": "#10801a"}, {"backgroundColor": "#10801a"}, {"backgroundColor": "#10801a"}, {"backgroundColor": "#10801a"}, {"backgroundColor": "#10801a"}, {"backgroundColor": "#10801a"}, {"backgroundColor": "#13801a"}, {"backgroundColor": "#19801a"}, {"backgroundColor": "#207f1a"}, {"backgroundColor": "#287e1a"}, {"backgroundColor": "#307d19"}, {"backgroundColor": "#387c19"}, {"backgroundColor": "#407a19"}, {"backgroundColor": "#487818"}, {"backgroundColor": "#507618"}, {"backgroundColor": "#587318"}, {"backgroundColor": "#607017"}, {"backgroundColor": "#676d16"}, {"backgroundColor": "#6f6a16"}, {"backgroundColor": "#776515"}, {"backgroundColor": "#7e6114"}, {"backgroundColor": "#865b13"}, {"backgroundColor": "#8c5612"}, {"backgroundColor": "#925011"}, {"backgroundColor": "#984b10"}, {"backgroundColor": "#9c450f"}, {"backgroundColor": "#a0400e"}, {"backgroundColor": "#a43a0d"}, {"backgroundColor": "#a7340c"}, {"backgroundColor": "#aa2f0b"}, {"backgroundColor": "#ac290a"}, {"backgroundColor": "#ae2309"}, {"backgroundColor": "#b01d08"}, {"backgroundColor": "#b11707"}, {"backgroundColor": "#b21107"}, {"backgroundColor": "#b30b06"}, {"backgroundColor": "#b30606"}, {"backgroundColor": "#b30606"}], + + _143_253_140_1__29_247_107_1_: [{"backgroundColor": 4287626636}, {"backgroundColor": 4287626636}, {"backgroundColor": 4287626636}, {"backgroundColor": 4287626636}, {"backgroundColor": 4287626636}, {"backgroundColor": 4287626636}, {"backgroundColor": 4287626636}, {"backgroundColor": 4287626636}, {"backgroundColor": 4287626636}, {"backgroundColor": 4287626636}, {"backgroundColor": 4287626636}, {"backgroundColor": 4287626636}, {"backgroundColor": 4287626636}, {"backgroundColor": 4287626636}, {"backgroundColor": 4287626636}, {"backgroundColor": 4287626636}, {"backgroundColor": 4287626636}, {"backgroundColor": 4287626636}, {"backgroundColor": 4287626636}, {"backgroundColor": 4287626636}, {"backgroundColor": 4287626636}, {"backgroundColor": 4287626636}, {"backgroundColor": 4287626636}, {"backgroundColor": 4287626636}, {"backgroundColor": 4287626636}, {"backgroundColor": 4287626636}, {"backgroundColor": 4287626636}, {"backgroundColor": 4287626636}, {"backgroundColor": 4287626636}, {"backgroundColor": 4287626636}, {"backgroundColor": 4287626636}, {"backgroundColor": 4287626636}, {"backgroundColor": 4287626636}, {"backgroundColor": 4287626636}, {"backgroundColor": 4287561100}, {"backgroundColor": 4287561099}, {"backgroundColor": 4287495563}, {"backgroundColor": 4287430027}, {"backgroundColor": 4287298954}, {"backgroundColor": 4287167625}, {"backgroundColor": 4287036552}, {"backgroundColor": 4286905479}, {"backgroundColor": 4286708870}, {"backgroundColor": 4286512261}, {"backgroundColor": 4286315395}, {"backgroundColor": 4286053250}, {"backgroundColor": 4285725568}, {"backgroundColor": 4285397630}, {"backgroundColor": 4285069948}, {"backgroundColor": 4284676730}, {"backgroundColor": 4284283256}, {"backgroundColor": 4283890038}, {"backgroundColor": 4283496821}, {"backgroundColor": 4283168883}, {"backgroundColor": 4282775666}, {"backgroundColor": 4282382448}, {"backgroundColor": 4281989231}, {"backgroundColor": 4281661294}, {"backgroundColor": 4281333613}, {"backgroundColor": 4281005932}, {"backgroundColor": 4280678252}, {"backgroundColor": 4280416107}, {"backgroundColor": 4280219499}, {"backgroundColor": 4280153963}, {"backgroundColor": 4280153963}], + _143_253_140_1__29_247_107_1_native: [{"backgroundColor": "nil"}, {"backgroundColor": "#8ffd8c"}, {"backgroundColor": "#8ffd8c"}, {"backgroundColor": "#8ffd8c"}, {"backgroundColor": "#8ffd8c"}, {"backgroundColor": "#8ffd8c"}, {"backgroundColor": "#8ffd8c"}, {"backgroundColor": "#8ffd8c"}, {"backgroundColor": "#8ffd8c"}, {"backgroundColor": "#8ffd8c"}, {"backgroundColor": "#8ffd8c"}, {"backgroundColor": "#8ffd8c"}, {"backgroundColor": "#8ffd8c"}, {"backgroundColor": "#8ffd8c"}, {"backgroundColor": "#8ffd8c"}, {"backgroundColor": "#8ffd8c"}, {"backgroundColor": "#8ffd8c"}, {"backgroundColor": "#8ffd8c"}, {"backgroundColor": "#8ffd8c"}, {"backgroundColor": "#8ffd8c"}, {"backgroundColor": "#8ffd8c"}, {"backgroundColor": "#8ffd8c"}, {"backgroundColor": "#8ffd8c"}, {"backgroundColor": "#8ffd8c"}, {"backgroundColor": "#8ffd8c"}, {"backgroundColor": "#8ffd8c"}, {"backgroundColor": "#8ffd8c"}, {"backgroundColor": "#8ffd8c"}, {"backgroundColor": "#8ffd8c"}, {"backgroundColor": "#8ffd8c"}, {"backgroundColor": "#8ffd8c"}, {"backgroundColor": "#8ffd8c"}, {"backgroundColor": "#8ffd8c"}, {"backgroundColor": "#8ffd8c"}, {"backgroundColor": "#8ffd8c"}, {"backgroundColor": "#8efd8c"}, {"backgroundColor": "#8efd8b"}, {"backgroundColor": "#8dfd8b"}, {"backgroundColor": "#8cfd8b"}, {"backgroundColor": "#8afd8a"}, {"backgroundColor": "#88fc89"}, {"backgroundColor": "#86fc88"}, {"backgroundColor": "#84fc87"}, {"backgroundColor": "#81fc86"}, {"backgroundColor": "#7efc85"}, {"backgroundColor": "#7bfb83"}, {"backgroundColor": "#77fb82"}, {"backgroundColor": "#72fb80"}, {"backgroundColor": "#6dfa7e"}, {"backgroundColor": "#68fa7c"}, {"backgroundColor": "#62fa7a"}, {"backgroundColor": "#5cf978"}, {"backgroundColor": "#56f976"}, {"backgroundColor": "#50f975"}, {"backgroundColor": "#4bf873"}, {"backgroundColor": "#45f872"}, {"backgroundColor": "#3ff870"}, {"backgroundColor": "#39f86f"}, {"backgroundColor": "#34f76e"}, {"backgroundColor": "#2ff76d"}, {"backgroundColor": "#2af76c"}, {"backgroundColor": "#25f76c"}, {"backgroundColor": "#21f76b"}, {"backgroundColor": "#1ef76b"}, {"backgroundColor": "#1df76b"}, {"backgroundColor": "#1df76b"}], + + _226_167_48_1__222_251_137_1_: [{"backgroundColor": 4293044016}, {"backgroundColor": 4293044016}, {"backgroundColor": 4293044016}, {"backgroundColor": 4293044016}, {"backgroundColor": 4293044016}, {"backgroundColor": 4293044016}, {"backgroundColor": 4293044016}, {"backgroundColor": 4293044016}, {"backgroundColor": 4293044016}, {"backgroundColor": 4293044016}, {"backgroundColor": 4293044016}, {"backgroundColor": 4293044016}, {"backgroundColor": 4293044016}, {"backgroundColor": 4293044016}, {"backgroundColor": 4293044016}, {"backgroundColor": 4293044016}, {"backgroundColor": 4293044016}, {"backgroundColor": 4293044016}, {"backgroundColor": 4293044016}, {"backgroundColor": 4293044016}, {"backgroundColor": 4293044016}, {"backgroundColor": 4293044016}, {"backgroundColor": 4293044016}, {"backgroundColor": 4293044016}, {"backgroundColor": 4293044016}, {"backgroundColor": 4293044016}, {"backgroundColor": 4293044016}, {"backgroundColor": 4293044016}, {"backgroundColor": 4293044016}, {"backgroundColor": 4293044016}, {"backgroundColor": 4293044016}, {"backgroundColor": 4293044016}, {"backgroundColor": 4293044016}, {"backgroundColor": 4293044016}, {"backgroundColor": 4293044274}, {"backgroundColor": 4293044531}, {"backgroundColor": 4293045046}, {"backgroundColor": 4293045561}, {"backgroundColor": 4293046077}, {"backgroundColor": 4293046848}, {"backgroundColor": 4292982084}, {"backgroundColor": 4292982857}, {"backgroundColor": 4292983885}, {"backgroundColor": 4292984914}, {"backgroundColor": 4292985943}, {"backgroundColor": 4292987227}, {"backgroundColor": 4292922976}, {"backgroundColor": 4292924261}, {"backgroundColor": 4292925546}, {"backgroundColor": 4292926831}, {"backgroundColor": 4292862323}, {"backgroundColor": 4292863350}, {"backgroundColor": 4292864377}, {"backgroundColor": 4292865148}, {"backgroundColor": 4292865919}, {"backgroundColor": 4292866433}, {"backgroundColor": 4292801667}, {"backgroundColor": 4292802180}, {"backgroundColor": 4292802438}, {"backgroundColor": 4292802695}, {"backgroundColor": 4292803208}, {"backgroundColor": 4292803208}, {"backgroundColor": 4292803465}, {"backgroundColor": 4292803465}, {"backgroundColor": 4292803465}], + _226_167_48_1__222_251_137_1_native: [{"backgroundColor": "nil"}, {"backgroundColor": "#e2a730"}, {"backgroundColor": "#e2a730"}, {"backgroundColor": "#e2a730"}, {"backgroundColor": "#e2a730"}, {"backgroundColor": "#e2a730"}, {"backgroundColor": "#e2a730"}, {"backgroundColor": "#e2a730"}, {"backgroundColor": "#e2a730"}, {"backgroundColor": "#e2a730"}, {"backgroundColor": "#e2a730"}, {"backgroundColor": "#e2a730"}, {"backgroundColor": "#e2a730"}, {"backgroundColor": "#e2a730"}, {"backgroundColor": "#e2a730"}, {"backgroundColor": "#e2a730"}, {"backgroundColor": "#e2a730"}, {"backgroundColor": "#e2a730"}, {"backgroundColor": "#e2a730"}, {"backgroundColor": "#e2a730"}, {"backgroundColor": "#e2a730"}, {"backgroundColor": "#e2a730"}, {"backgroundColor": "#e2a730"}, {"backgroundColor": "#e2a730"}, {"backgroundColor": "#e2a730"}, {"backgroundColor": "#e2a730"}, {"backgroundColor": "#e2a730"}, {"backgroundColor": "#e2a730"}, {"backgroundColor": "#e2a730"}, {"backgroundColor": "#e2a730"}, {"backgroundColor": "#e2a730"}, {"backgroundColor": "#e2a730"}, {"backgroundColor": "#e2a730"}, {"backgroundColor": "#e2a730"}, {"backgroundColor": "#e2a730"}, {"backgroundColor": "#e2a832"}, {"backgroundColor": "#e2a933"}, {"backgroundColor": "#e2ab36"}, {"backgroundColor": "#e2ad39"}, {"backgroundColor": "#e2af3d"}, {"backgroundColor": "#e2b240"}, {"backgroundColor": "#e1b544"}, {"backgroundColor": "#e1b849"}, {"backgroundColor": "#e1bc4d"}, {"backgroundColor": "#e1c052"}, {"backgroundColor": "#e1c457"}, {"backgroundColor": "#e1c95b"}, {"backgroundColor": "#e0ce60"}, {"backgroundColor": "#e0d365"}, {"backgroundColor": "#e0d86a"}, {"backgroundColor": "#e0dd6f"}, {"backgroundColor": "#dfe173"}, {"backgroundColor": "#dfe576"}, {"backgroundColor": "#dfe979"}, {"backgroundColor": "#dfec7c"}, {"backgroundColor": "#dfef7f"}, {"backgroundColor": "#dff181"}, {"backgroundColor": "#def483"}, {"backgroundColor": "#def684"}, {"backgroundColor": "#def786"}, {"backgroundColor": "#def887"}, {"backgroundColor": "#defa88"}, {"backgroundColor": "#defa88"}, {"backgroundColor": "#defb89"}, {"backgroundColor": "#defb89"}, {"backgroundColor": "#defb89"}], + + _201_25_139_1__91_234_32_1_: [{"backgroundColor": 4291369355}, {"backgroundColor": 4291369355}, {"backgroundColor": 4291369355}, {"backgroundColor": 4291369355}, {"backgroundColor": 4291369355}, {"backgroundColor": 4291369355}, {"backgroundColor": 4291369355}, {"backgroundColor": 4291369355}, {"backgroundColor": 4291369355}, {"backgroundColor": 4291369355}, {"backgroundColor": 4291369355}, {"backgroundColor": 4291369355}, {"backgroundColor": 4291369355}, {"backgroundColor": 4291369355}, {"backgroundColor": 4291369355}, {"backgroundColor": 4291369355}, {"backgroundColor": 4291369355}, {"backgroundColor": 4291369355}, {"backgroundColor": 4291369355}, {"backgroundColor": 4291369355}, {"backgroundColor": 4291369355}, {"backgroundColor": 4291369355}, {"backgroundColor": 4291369355}, {"backgroundColor": 4291369355}, {"backgroundColor": 4291369355}, {"backgroundColor": 4291369355}, {"backgroundColor": 4291369355}, {"backgroundColor": 4291369355}, {"backgroundColor": 4291369355}, {"backgroundColor": 4291369355}, {"backgroundColor": 4291369355}, {"backgroundColor": 4291369355}, {"backgroundColor": 4291369355}, {"backgroundColor": 4291370123}, {"backgroundColor": 4291306379}, {"backgroundColor": 4291308682}, {"backgroundColor": 4291245705}, {"backgroundColor": 4291117192}, {"backgroundColor": 4290988678}, {"backgroundColor": 4290860421}, {"backgroundColor": 4290731907}, {"backgroundColor": 4290537856}, {"backgroundColor": 4290343806}, {"backgroundColor": 4290084219}, {"backgroundColor": 4289824631}, {"backgroundColor": 4289565044}, {"backgroundColor": 4289174383}, {"backgroundColor": 4288849259}, {"backgroundColor": 4288393061}, {"backgroundColor": 4288002144}, {"backgroundColor": 4287610714}, {"backgroundColor": 4287219285}, {"backgroundColor": 4286827599}, {"backgroundColor": 4286435914}, {"backgroundColor": 4286109508}, {"backgroundColor": 4285717311}, {"backgroundColor": 4285455929}, {"backgroundColor": 4285129012}, {"backgroundColor": 4284867631}, {"backgroundColor": 4284671531}, {"backgroundColor": 4284475431}, {"backgroundColor": 4284344611}, {"backgroundColor": 4284279329}, {"backgroundColor": 4284213792}, {"backgroundColor": 4284213792}], + _201_25_139_1__91_234_32_1_native: [{"backgroundColor": "nil"}, {"backgroundColor": "#c9198b"}, {"backgroundColor": "#c9198b"}, {"backgroundColor": "#c9198b"}, {"backgroundColor": "#c9198b"}, {"backgroundColor": "#c9198b"}, {"backgroundColor": "#c9198b"}, {"backgroundColor": "#c9198b"}, {"backgroundColor": "#c9198b"}, {"backgroundColor": "#c9198b"}, {"backgroundColor": "#c9198b"}, {"backgroundColor": "#c9198b"}, {"backgroundColor": "#c9198b"}, {"backgroundColor": "#c9198b"}, {"backgroundColor": "#c9198b"}, {"backgroundColor": "#c9198b"}, {"backgroundColor": "#c9198b"}, {"backgroundColor": "#c9198b"}, {"backgroundColor": "#c9198b"}, {"backgroundColor": "#c9198b"}, {"backgroundColor": "#c9198b"}, {"backgroundColor": "#c9198b"}, {"backgroundColor": "#c9198b"}, {"backgroundColor": "#c9198b"}, {"backgroundColor": "#c9198b"}, {"backgroundColor": "#c9198b"}, {"backgroundColor": "#c9198b"}, {"backgroundColor": "#c9198b"}, {"backgroundColor": "#c9198b"}, {"backgroundColor": "#c9198b"}, {"backgroundColor": "#c9198b"}, {"backgroundColor": "#c9198b"}, {"backgroundColor": "#c9198b"}, {"backgroundColor": "#c9198b"}, {"backgroundColor": "#c91c8b"}, {"backgroundColor": "#c8238b"}, {"backgroundColor": "#c82c8a"}, {"backgroundColor": "#c73689"}, {"backgroundColor": "#c54088"}, {"backgroundColor": "#c34a86"}, {"backgroundColor": "#c15585"}, {"backgroundColor": "#bf5f83"}, {"backgroundColor": "#bc6980"}, {"backgroundColor": "#b9737e"}, {"backgroundColor": "#b57d7b"}, {"backgroundColor": "#b18777"}, {"backgroundColor": "#ad9174"}, {"backgroundColor": "#a79b6f"}, {"backgroundColor": "#a2a56b"}, {"backgroundColor": "#9baf65"}, {"backgroundColor": "#95b860"}, {"backgroundColor": "#8fbf5a"}, {"backgroundColor": "#89c655"}, {"backgroundColor": "#83cc4f"}, {"backgroundColor": "#7dd24a"}, {"backgroundColor": "#78d744"}, {"backgroundColor": "#72db3f"}, {"backgroundColor": "#6ede39"}, {"backgroundColor": "#69e134"}, {"backgroundColor": "#65e42f"}, {"backgroundColor": "#62e62b"}, {"backgroundColor": "#5fe827"}, {"backgroundColor": "#5de923"}, {"backgroundColor": "#5cea21"}, {"backgroundColor": "#5bea20"}, {"backgroundColor": "#5bea20"}], + + _246_121_228_1__10_192_235_1_: [{"backgroundColor": 4294343140}, {"backgroundColor": 4294343140}, {"backgroundColor": 4294343140}, {"backgroundColor": 4294343140}, {"backgroundColor": 4294343140}, {"backgroundColor": 4294343140}, {"backgroundColor": 4294343140}, {"backgroundColor": 4294343140}, {"backgroundColor": 4294343140}, {"backgroundColor": 4294343140}, {"backgroundColor": 4294343140}, {"backgroundColor": 4294343140}, {"backgroundColor": 4294343140}, {"backgroundColor": 4294343140}, {"backgroundColor": 4294343140}, {"backgroundColor": 4294343140}, {"backgroundColor": 4294343140}, {"backgroundColor": 4294343140}, {"backgroundColor": 4294343140}, {"backgroundColor": 4294343140}, {"backgroundColor": 4294343140}, {"backgroundColor": 4294343140}, {"backgroundColor": 4294343140}, {"backgroundColor": 4294343140}, {"backgroundColor": 4294343140}, {"backgroundColor": 4294343140}, {"backgroundColor": 4294343140}, {"backgroundColor": 4294343140}, {"backgroundColor": 4294343140}, {"backgroundColor": 4294343140}, {"backgroundColor": 4294343140}, {"backgroundColor": 4294343140}, {"backgroundColor": 4294343140}, {"backgroundColor": 4294343140}, {"backgroundColor": 4294277860}, {"backgroundColor": 4294212580}, {"backgroundColor": 4294081764}, {"backgroundColor": 4293951204}, {"backgroundColor": 4293820645}, {"backgroundColor": 4293559013}, {"backgroundColor": 4293363173}, {"backgroundColor": 4293101797}, {"backgroundColor": 4292774885}, {"backgroundColor": 4292382694}, {"backgroundColor": 4291990246}, {"backgroundColor": 4291532518}, {"backgroundColor": 4291009255}, {"backgroundColor": 4290420711}, {"backgroundColor": 4289766376}, {"backgroundColor": 4289046504}, {"backgroundColor": 4288392169}, {"backgroundColor": 4287672041}, {"backgroundColor": 4286951913}, {"backgroundColor": 4286297322}, {"backgroundColor": 4285576938}, {"backgroundColor": 4284856554}, {"backgroundColor": 4284136170}, {"backgroundColor": 4283349994}, {"backgroundColor": 4282629611}, {"backgroundColor": 4281908971}, {"backgroundColor": 4281122795}, {"backgroundColor": 4280336363}, {"backgroundColor": 4279550187}, {"backgroundColor": 4278960363}, {"backgroundColor": 4278894827}], + _246_121_228_1__10_192_235_1_native: [{"backgroundColor": "nil"}, {"backgroundColor": "#f679e4"}, {"backgroundColor": "#f679e4"}, {"backgroundColor": "#f679e4"}, {"backgroundColor": "#f679e4"}, {"backgroundColor": "#f679e4"}, {"backgroundColor": "#f679e4"}, {"backgroundColor": "#f679e4"}, {"backgroundColor": "#f679e4"}, {"backgroundColor": "#f679e4"}, {"backgroundColor": "#f679e4"}, {"backgroundColor": "#f679e4"}, {"backgroundColor": "#f679e4"}, {"backgroundColor": "#f679e4"}, {"backgroundColor": "#f679e4"}, {"backgroundColor": "#f679e4"}, {"backgroundColor": "#f679e4"}, {"backgroundColor": "#f679e4"}, {"backgroundColor": "#f679e4"}, {"backgroundColor": "#f679e4"}, {"backgroundColor": "#f679e4"}, {"backgroundColor": "#f679e4"}, {"backgroundColor": "#f679e4"}, {"backgroundColor": "#f679e4"}, {"backgroundColor": "#f679e4"}, {"backgroundColor": "#f679e4"}, {"backgroundColor": "#f679e4"}, {"backgroundColor": "#f679e4"}, {"backgroundColor": "#f679e4"}, {"backgroundColor": "#f679e4"}, {"backgroundColor": "#f679e4"}, {"backgroundColor": "#f679e4"}, {"backgroundColor": "#f679e4"}, {"backgroundColor": "#f679e4"}, {"backgroundColor": "#f679e4"}, {"backgroundColor": "#f57ae4"}, {"backgroundColor": "#f47be4"}, {"backgroundColor": "#f27ce4"}, {"backgroundColor": "#f07ee4"}, {"backgroundColor": "#ee80e5"}, {"backgroundColor": "#ea82e5"}, {"backgroundColor": "#e785e5"}, {"backgroundColor": "#e388e5"}, {"backgroundColor": "#de8be5"}, {"backgroundColor": "#d88fe6"}, {"backgroundColor": "#d292e6"}, {"backgroundColor": "#cb96e6"}, {"backgroundColor": "#c39ae7"}, {"backgroundColor": "#ba9fe7"}, {"backgroundColor": "#b0a3e8"}, {"backgroundColor": "#a5a7e8"}, {"backgroundColor": "#9babe9"}, {"backgroundColor": "#90aee9"}, {"backgroundColor": "#85b1e9"}, {"backgroundColor": "#7bb4ea"}, {"backgroundColor": "#70b6ea"}, {"backgroundColor": "#65b8ea"}, {"backgroundColor": "#5abaea"}, {"backgroundColor": "#4ebbea"}, {"backgroundColor": "#43bdeb"}, {"backgroundColor": "#38beeb"}, {"backgroundColor": "#2cbfeb"}, {"backgroundColor": "#20bfeb"}, {"backgroundColor": "#14c0eb"}, {"backgroundColor": "#0bc0eb"}, {"backgroundColor": "#0ac0eb"}], + + _12_115_38_1__242_174_57_1_: [{"backgroundColor": 4279005990}, {"backgroundColor": 4279005990}, {"backgroundColor": 4279005990}, {"backgroundColor": 4279005990}, {"backgroundColor": 4279005990}, {"backgroundColor": 4279005990}, {"backgroundColor": 4279005990}, {"backgroundColor": 4279005990}, {"backgroundColor": 4279005990}, {"backgroundColor": 4279005990}, {"backgroundColor": 4279005990}, {"backgroundColor": 4279005990}, {"backgroundColor": 4279005990}, {"backgroundColor": 4279005990}, {"backgroundColor": 4279005990}, {"backgroundColor": 4279005990}, {"backgroundColor": 4279005990}, {"backgroundColor": 4279005990}, {"backgroundColor": 4279005990}, {"backgroundColor": 4279005990}, {"backgroundColor": 4279005990}, {"backgroundColor": 4279005990}, {"backgroundColor": 4279005990}, {"backgroundColor": 4279005990}, {"backgroundColor": 4279005990}, {"backgroundColor": 4279005990}, {"backgroundColor": 4279005990}, {"backgroundColor": 4279005990}, {"backgroundColor": 4279005990}, {"backgroundColor": 4279005990}, {"backgroundColor": 4279005990}, {"backgroundColor": 4279005990}, {"backgroundColor": 4279005990}, {"backgroundColor": 4279399206}, {"backgroundColor": 4280120358}, {"backgroundColor": 4280906790}, {"backgroundColor": 4281628199}, {"backgroundColor": 4282349351}, {"backgroundColor": 4283136296}, {"backgroundColor": 4283857704}, {"backgroundColor": 4284513577}, {"backgroundColor": 4285234986}, {"backgroundColor": 4285956651}, {"backgroundColor": 4286678316}, {"backgroundColor": 4287334445}, {"backgroundColor": 4288056110}, {"backgroundColor": 4288712239}, {"backgroundColor": 4289368624}, {"backgroundColor": 4290024753}, {"backgroundColor": 4290681138}, {"backgroundColor": 4291206195}, {"backgroundColor": 4291665716}, {"backgroundColor": 4292059445}, {"backgroundColor": 4292453174}, {"backgroundColor": 4292781366}, {"backgroundColor": 4293044023}, {"backgroundColor": 4293306679}, {"backgroundColor": 4293503544}, {"backgroundColor": 4293700408}, {"backgroundColor": 4293831736}, {"backgroundColor": 4293963065}, {"backgroundColor": 4294028857}, {"backgroundColor": 4294094393}, {"backgroundColor": 4294094393}, {"backgroundColor": 4294094393}], + _12_115_38_1__242_174_57_1_native: [{"backgroundColor": "nil"}, {"backgroundColor": "#0c7326"}, {"backgroundColor": "#0c7326"}, {"backgroundColor": "#0c7326"}, {"backgroundColor": "#0c7326"}, {"backgroundColor": "#0c7326"}, {"backgroundColor": "#0c7326"}, {"backgroundColor": "#0c7326"}, {"backgroundColor": "#0c7326"}, {"backgroundColor": "#0c7326"}, {"backgroundColor": "#0c7326"}, {"backgroundColor": "#0c7326"}, {"backgroundColor": "#0c7326"}, {"backgroundColor": "#0c7326"}, {"backgroundColor": "#0c7326"}, {"backgroundColor": "#0c7326"}, {"backgroundColor": "#0c7326"}, {"backgroundColor": "#0c7326"}, {"backgroundColor": "#0c7326"}, {"backgroundColor": "#0c7326"}, {"backgroundColor": "#0c7326"}, {"backgroundColor": "#0c7326"}, {"backgroundColor": "#0c7326"}, {"backgroundColor": "#0c7326"}, {"backgroundColor": "#0c7326"}, {"backgroundColor": "#0c7326"}, {"backgroundColor": "#0c7326"}, {"backgroundColor": "#0c7326"}, {"backgroundColor": "#0c7326"}, {"backgroundColor": "#0c7326"}, {"backgroundColor": "#0c7326"}, {"backgroundColor": "#0c7326"}, {"backgroundColor": "#0c7326"}, {"backgroundColor": "#0c7326"}, {"backgroundColor": "#127326"}, {"backgroundColor": "#1d7426"}, {"backgroundColor": "#297426"}, {"backgroundColor": "#347627"}, {"backgroundColor": "#3f7727"}, {"backgroundColor": "#4b7928"}, {"backgroundColor": "#567b28"}, {"backgroundColor": "#607d29"}, {"backgroundColor": "#6b7f2a"}, {"backgroundColor": "#76822b"}, {"backgroundColor": "#81852c"}, {"backgroundColor": "#8b882d"}, {"backgroundColor": "#968b2e"}, {"backgroundColor": "#a08e2f"}, {"backgroundColor": "#aa9230"}, {"backgroundColor": "#b49531"}, {"backgroundColor": "#be9932"}, {"backgroundColor": "#c69c33"}, {"backgroundColor": "#cd9f34"}, {"backgroundColor": "#d3a135"}, {"backgroundColor": "#d9a336"}, {"backgroundColor": "#dea536"}, {"backgroundColor": "#e2a737"}, {"backgroundColor": "#e6a937"}, {"backgroundColor": "#e9aa38"}, {"backgroundColor": "#ecab38"}, {"backgroundColor": "#eeac38"}, {"backgroundColor": "#f0ad39"}, {"backgroundColor": "#f1ae39"}, {"backgroundColor": "#f2ae39"}, {"backgroundColor": "#f2ae39"}, {"backgroundColor": "#f2ae39"}], + + _169_198_146_1__238_116_102_1_: [{"backgroundColor": 4289316498}, {"backgroundColor": 4289316498}, {"backgroundColor": 4289316498}, {"backgroundColor": 4289316498}, {"backgroundColor": 4289316498}, {"backgroundColor": 4289316498}, {"backgroundColor": 4289316498}, {"backgroundColor": 4289316498}, {"backgroundColor": 4289316498}, {"backgroundColor": 4289316498}, {"backgroundColor": 4289316498}, {"backgroundColor": 4289316498}, {"backgroundColor": 4289316498}, {"backgroundColor": 4289316498}, {"backgroundColor": 4289316498}, {"backgroundColor": 4289316498}, {"backgroundColor": 4289316498}, {"backgroundColor": 4289316498}, {"backgroundColor": 4289316498}, {"backgroundColor": 4289316498}, {"backgroundColor": 4289316498}, {"backgroundColor": 4289316498}, {"backgroundColor": 4289316498}, {"backgroundColor": 4289316498}, {"backgroundColor": 4289316498}, {"backgroundColor": 4289316498}, {"backgroundColor": 4289316498}, {"backgroundColor": 4289316498}, {"backgroundColor": 4289316498}, {"backgroundColor": 4289316498}, {"backgroundColor": 4289316498}, {"backgroundColor": 4289316498}, {"backgroundColor": 4289316498}, {"backgroundColor": 4289316498}, {"backgroundColor": 4289381778}, {"backgroundColor": 4289447313}, {"backgroundColor": 4289512593}, {"backgroundColor": 4289577872}, {"backgroundColor": 4289708431}, {"backgroundColor": 4289839246}, {"backgroundColor": 4290035341}, {"backgroundColor": 4290231180}, {"backgroundColor": 4290427274}, {"backgroundColor": 4290623113}, {"backgroundColor": 4290818695}, {"backgroundColor": 4291080069}, {"backgroundColor": 4291341186}, {"backgroundColor": 4291602048}, {"backgroundColor": 4291928445}, {"backgroundColor": 4292189307}, {"backgroundColor": 4292384888}, {"backgroundColor": 4292645750}, {"backgroundColor": 4292841331}, {"backgroundColor": 4292971377}, {"backgroundColor": 4293166959}, {"backgroundColor": 4293297005}, {"backgroundColor": 4293427308}, {"backgroundColor": 4293492074}, {"backgroundColor": 4293622377}, {"backgroundColor": 4293687400}, {"backgroundColor": 4293752679}, {"backgroundColor": 4293752167}, {"backgroundColor": 4293817446}, {"backgroundColor": 4293817446}, {"backgroundColor": 4293817446}], + _169_198_146_1__238_116_102_1_native: [{"backgroundColor": "nil"}, {"backgroundColor": "#a9c692"}, {"backgroundColor": "#a9c692"}, {"backgroundColor": "#a9c692"}, {"backgroundColor": "#a9c692"}, {"backgroundColor": "#a9c692"}, {"backgroundColor": "#a9c692"}, {"backgroundColor": "#a9c692"}, {"backgroundColor": "#a9c692"}, {"backgroundColor": "#a9c692"}, {"backgroundColor": "#a9c692"}, {"backgroundColor": "#a9c692"}, {"backgroundColor": "#a9c692"}, {"backgroundColor": "#a9c692"}, {"backgroundColor": "#a9c692"}, {"backgroundColor": "#a9c692"}, {"backgroundColor": "#a9c692"}, {"backgroundColor": "#a9c692"}, {"backgroundColor": "#a9c692"}, {"backgroundColor": "#a9c692"}, {"backgroundColor": "#a9c692"}, {"backgroundColor": "#a9c692"}, {"backgroundColor": "#a9c692"}, {"backgroundColor": "#a9c692"}, {"backgroundColor": "#a9c692"}, {"backgroundColor": "#a9c692"}, {"backgroundColor": "#a9c692"}, {"backgroundColor": "#a9c692"}, {"backgroundColor": "#a9c692"}, {"backgroundColor": "#a9c692"}, {"backgroundColor": "#a9c692"}, {"backgroundColor": "#a9c692"}, {"backgroundColor": "#a9c692"}, {"backgroundColor": "#a9c692"}, {"backgroundColor": "#a9c692"}, {"backgroundColor": "#aac592"}, {"backgroundColor": "#abc591"}, {"backgroundColor": "#acc491"}, {"backgroundColor": "#adc390"}, {"backgroundColor": "#afc18f"}, {"backgroundColor": "#b1c08e"}, {"backgroundColor": "#b4be8d"}, {"backgroundColor": "#b7bb8c"}, {"backgroundColor": "#bab98a"}, {"backgroundColor": "#bdb689"}, {"backgroundColor": "#c0b287"}, {"backgroundColor": "#c4af85"}, {"backgroundColor": "#c8ab82"}, {"backgroundColor": "#cca680"}, {"backgroundColor": "#d1a17d"}, {"backgroundColor": "#d59c7b"}, {"backgroundColor": "#d89878"}, {"backgroundColor": "#dc9376"}, {"backgroundColor": "#df8f73"}, {"backgroundColor": "#e18b71"}, {"backgroundColor": "#e4876f"}, {"backgroundColor": "#e6836d"}, {"backgroundColor": "#e8806c"}, {"backgroundColor": "#e97d6a"}, {"backgroundColor": "#eb7a69"}, {"backgroundColor": "#ec7868"}, {"backgroundColor": "#ed7767"}, {"backgroundColor": "#ed7567"}, {"backgroundColor": "#ee7466"}, {"backgroundColor": "#ee7466"}, {"backgroundColor": "#ee7466"}], + + _222_170_194_1__79_79_145_1_: [{"backgroundColor": 4292782786}, {"backgroundColor": 4292782786}, {"backgroundColor": 4292782786}, {"backgroundColor": 4292782786}, {"backgroundColor": 4292782786}, {"backgroundColor": 4292782786}, {"backgroundColor": 4292782786}, {"backgroundColor": 4292782786}, {"backgroundColor": 4292782786}, {"backgroundColor": 4292782786}, {"backgroundColor": 4292782786}, {"backgroundColor": 4292782786}, {"backgroundColor": 4292782786}, {"backgroundColor": 4292782786}, {"backgroundColor": 4292782786}, {"backgroundColor": 4292782786}, {"backgroundColor": 4292782786}, {"backgroundColor": 4292782786}, {"backgroundColor": 4292782786}, {"backgroundColor": 4292782786}, {"backgroundColor": 4292782786}, {"backgroundColor": 4292782786}, {"backgroundColor": 4292782786}, {"backgroundColor": 4292782786}, {"backgroundColor": 4292782786}, {"backgroundColor": 4292782786}, {"backgroundColor": 4292782786}, {"backgroundColor": 4292782786}, {"backgroundColor": 4292782786}, {"backgroundColor": 4292782786}, {"backgroundColor": 4292782786}, {"backgroundColor": 4292782786}, {"backgroundColor": 4292782786}, {"backgroundColor": 4292782786}, {"backgroundColor": 4292716994}, {"backgroundColor": 4292651457}, {"backgroundColor": 4292585665}, {"backgroundColor": 4292454336}, {"backgroundColor": 4292322751}, {"backgroundColor": 4292191422}, {"backgroundColor": 4291994044}, {"backgroundColor": 4291731387}, {"backgroundColor": 4291468473}, {"backgroundColor": 4291205559}, {"backgroundColor": 4290877109}, {"backgroundColor": 4290482867}, {"backgroundColor": 4290088624}, {"backgroundColor": 4289628589}, {"backgroundColor": 4289103018}, {"backgroundColor": 4288577447}, {"backgroundColor": 4288117413}, {"backgroundColor": 4287591842}, {"backgroundColor": 4287066271}, {"backgroundColor": 4286606237}, {"backgroundColor": 4286080667}, {"backgroundColor": 4285620889}, {"backgroundColor": 4285226647}, {"backgroundColor": 4284767126}, {"backgroundColor": 4284438420}, {"backgroundColor": 4284110227}, {"backgroundColor": 4283781778}, {"backgroundColor": 4283584914}, {"backgroundColor": 4283453585}, {"backgroundColor": 4283387793}, {"backgroundColor": 4283387793}], + _222_170_194_1__79_79_145_1_native: [{"backgroundColor": "nil"}, {"backgroundColor": "#deaac2"}, {"backgroundColor": "#deaac2"}, {"backgroundColor": "#deaac2"}, {"backgroundColor": "#deaac2"}, {"backgroundColor": "#deaac2"}, {"backgroundColor": "#deaac2"}, {"backgroundColor": "#deaac2"}, {"backgroundColor": "#deaac2"}, {"backgroundColor": "#deaac2"}, {"backgroundColor": "#deaac2"}, {"backgroundColor": "#deaac2"}, {"backgroundColor": "#deaac2"}, {"backgroundColor": "#deaac2"}, {"backgroundColor": "#deaac2"}, {"backgroundColor": "#deaac2"}, {"backgroundColor": "#deaac2"}, {"backgroundColor": "#deaac2"}, {"backgroundColor": "#deaac2"}, {"backgroundColor": "#deaac2"}, {"backgroundColor": "#deaac2"}, {"backgroundColor": "#deaac2"}, {"backgroundColor": "#deaac2"}, {"backgroundColor": "#deaac2"}, {"backgroundColor": "#deaac2"}, {"backgroundColor": "#deaac2"}, {"backgroundColor": "#deaac2"}, {"backgroundColor": "#deaac2"}, {"backgroundColor": "#deaac2"}, {"backgroundColor": "#deaac2"}, {"backgroundColor": "#deaac2"}, {"backgroundColor": "#deaac2"}, {"backgroundColor": "#deaac2"}, {"backgroundColor": "#deaac2"}, {"backgroundColor": "#deaac2"}, {"backgroundColor": "#dda9c2"}, {"backgroundColor": "#dca9c1"}, {"backgroundColor": "#dba8c1"}, {"backgroundColor": "#d9a7c0"}, {"backgroundColor": "#d7a5bf"}, {"backgroundColor": "#d5a4be"}, {"backgroundColor": "#d2a1bc"}, {"backgroundColor": "#ce9fbb"}, {"backgroundColor": "#ca9cb9"}, {"backgroundColor": "#c699b7"}, {"backgroundColor": "#c196b5"}, {"backgroundColor": "#bb92b3"}, {"backgroundColor": "#b58eb0"}, {"backgroundColor": "#ae89ad"}, {"backgroundColor": "#a684aa"}, {"backgroundColor": "#9e7fa7"}, {"backgroundColor": "#977aa5"}, {"backgroundColor": "#8f75a2"}, {"backgroundColor": "#87709f"}, {"backgroundColor": "#806b9d"}, {"backgroundColor": "#78669b"}, {"backgroundColor": "#716299"}, {"backgroundColor": "#6b5e97"}, {"backgroundColor": "#645b96"}, {"backgroundColor": "#5f5794"}, {"backgroundColor": "#5a5593"}, {"backgroundColor": "#555292"}, {"backgroundColor": "#525192"}, {"backgroundColor": "#505091"}, {"backgroundColor": "#4f4f91"}, {"backgroundColor": "#4f4f91"}], + + _116_58_155_1__161_66_77_1_: [{"backgroundColor": 4285807259}, {"backgroundColor": 4285807259}, {"backgroundColor": 4285807259}, {"backgroundColor": 4285807259}, {"backgroundColor": 4285807259}, {"backgroundColor": 4285807259}, {"backgroundColor": 4285807259}, {"backgroundColor": 4285807259}, {"backgroundColor": 4285807259}, {"backgroundColor": 4285807259}, {"backgroundColor": 4285807259}, {"backgroundColor": 4285807259}, {"backgroundColor": 4285807259}, {"backgroundColor": 4285807259}, {"backgroundColor": 4285807259}, {"backgroundColor": 4285807259}, {"backgroundColor": 4285807259}, {"backgroundColor": 4285807259}, {"backgroundColor": 4285807259}, {"backgroundColor": 4285807259}, {"backgroundColor": 4285807259}, {"backgroundColor": 4285807259}, {"backgroundColor": 4285807259}, {"backgroundColor": 4285807259}, {"backgroundColor": 4285807259}, {"backgroundColor": 4285807259}, {"backgroundColor": 4285807259}, {"backgroundColor": 4285807259}, {"backgroundColor": 4285807259}, {"backgroundColor": 4285807259}, {"backgroundColor": 4285807259}, {"backgroundColor": 4285807259}, {"backgroundColor": 4285807259}, {"backgroundColor": 4285807259}, {"backgroundColor": 4285807259}, {"backgroundColor": 4285872794}, {"backgroundColor": 4285938329}, {"backgroundColor": 4286003864}, {"backgroundColor": 4286069655}, {"backgroundColor": 4286135189}, {"backgroundColor": 4286266260}, {"backgroundColor": 4286397329}, {"backgroundColor": 4286528655}, {"backgroundColor": 4286659724}, {"backgroundColor": 4286790794}, {"backgroundColor": 4286987654}, {"backgroundColor": 4287118722}, {"backgroundColor": 4287315582}, {"backgroundColor": 4287512186}, {"backgroundColor": 4287643509}, {"backgroundColor": 4287840113}, {"backgroundColor": 4287971436}, {"backgroundColor": 4288102504}, {"backgroundColor": 4288233572}, {"backgroundColor": 4288299360}, {"backgroundColor": 4288430429}, {"backgroundColor": 4288495962}, {"backgroundColor": 4288561495}, {"backgroundColor": 4288627284}, {"backgroundColor": 4288692818}, {"backgroundColor": 4288692816}, {"backgroundColor": 4288758350}, {"backgroundColor": 4288758349}, {"backgroundColor": 4288758349}, {"backgroundColor": 4288758349}], + _116_58_155_1__161_66_77_1_native: [{"backgroundColor": "nil"}, {"backgroundColor": "#743a9b"}, {"backgroundColor": "#743a9b"}, {"backgroundColor": "#743a9b"}, {"backgroundColor": "#743a9b"}, {"backgroundColor": "#743a9b"}, {"backgroundColor": "#743a9b"}, {"backgroundColor": "#743a9b"}, {"backgroundColor": "#743a9b"}, {"backgroundColor": "#743a9b"}, {"backgroundColor": "#743a9b"}, {"backgroundColor": "#743a9b"}, {"backgroundColor": "#743a9b"}, {"backgroundColor": "#743a9b"}, {"backgroundColor": "#743a9b"}, {"backgroundColor": "#743a9b"}, {"backgroundColor": "#743a9b"}, {"backgroundColor": "#743a9b"}, {"backgroundColor": "#743a9b"}, {"backgroundColor": "#743a9b"}, {"backgroundColor": "#743a9b"}, {"backgroundColor": "#743a9b"}, {"backgroundColor": "#743a9b"}, {"backgroundColor": "#743a9b"}, {"backgroundColor": "#743a9b"}, {"backgroundColor": "#743a9b"}, {"backgroundColor": "#743a9b"}, {"backgroundColor": "#743a9b"}, {"backgroundColor": "#743a9b"}, {"backgroundColor": "#743a9b"}, {"backgroundColor": "#743a9b"}, {"backgroundColor": "#743a9b"}, {"backgroundColor": "#743a9b"}, {"backgroundColor": "#743a9b"}, {"backgroundColor": "#743a9b"}, {"backgroundColor": "#743a9b"}, {"backgroundColor": "#753a9a"}, {"backgroundColor": "#763a99"}, {"backgroundColor": "#773a98"}, {"backgroundColor": "#783b97"}, {"backgroundColor": "#793b95"}, {"backgroundColor": "#7b3b94"}, {"backgroundColor": "#7d3b91"}, {"backgroundColor": "#7f3c8f"}, {"backgroundColor": "#813c8c"}, {"backgroundColor": "#833c8a"}, {"backgroundColor": "#863d86"}, {"backgroundColor": "#883d82"}, {"backgroundColor": "#8b3e7e"}, {"backgroundColor": "#8e3e7a"}, {"backgroundColor": "#903f75"}, {"backgroundColor": "#933f71"}, {"backgroundColor": "#95406c"}, {"backgroundColor": "#974068"}, {"backgroundColor": "#994064"}, {"backgroundColor": "#9a4160"}, {"backgroundColor": "#9c415d"}, {"backgroundColor": "#9d415a"}, {"backgroundColor": "#9e4157"}, {"backgroundColor": "#9f4254"}, {"backgroundColor": "#a04252"}, {"backgroundColor": "#a04250"}, {"backgroundColor": "#a1424e"}, {"backgroundColor": "#a1424d"}, {"backgroundColor": "#a1424d"}, {"backgroundColor": "#a1424d"}], + + _232_113_116_1__158_201_27_1_: [{"backgroundColor": 4293423476}, {"backgroundColor": 4293423476}, {"backgroundColor": 4293423476}, {"backgroundColor": 4293423476}, {"backgroundColor": 4293423476}, {"backgroundColor": 4293423476}, {"backgroundColor": 4293423476}, {"backgroundColor": 4293423476}, {"backgroundColor": 4293423476}, {"backgroundColor": 4293423476}, {"backgroundColor": 4293423476}, {"backgroundColor": 4293423476}, {"backgroundColor": 4293423476}, {"backgroundColor": 4293423476}, {"backgroundColor": 4293423476}, {"backgroundColor": 4293423476}, {"backgroundColor": 4293423476}, {"backgroundColor": 4293423476}, {"backgroundColor": 4293423476}, {"backgroundColor": 4293423476}, {"backgroundColor": 4293423476}, {"backgroundColor": 4293423476}, {"backgroundColor": 4293423476}, {"backgroundColor": 4293423476}, {"backgroundColor": 4293423476}, {"backgroundColor": 4293423476}, {"backgroundColor": 4293423476}, {"backgroundColor": 4293423476}, {"backgroundColor": 4293423476}, {"backgroundColor": 4293423476}, {"backgroundColor": 4293423476}, {"backgroundColor": 4293423476}, {"backgroundColor": 4293423476}, {"backgroundColor": 4293423476}, {"backgroundColor": 4293423732}, {"backgroundColor": 4293358451}, {"backgroundColor": 4293293426}, {"backgroundColor": 4293228401}, {"backgroundColor": 4293163632}, {"backgroundColor": 4293033327}, {"backgroundColor": 4292903277}, {"backgroundColor": 4292773227}, {"backgroundColor": 4292577641}, {"backgroundColor": 4292382055}, {"backgroundColor": 4292186724}, {"backgroundColor": 4291991393}, {"backgroundColor": 4291730525}, {"backgroundColor": 4291469657}, {"backgroundColor": 4291143252}, {"backgroundColor": 4290882384}, {"backgroundColor": 4290621259}, {"backgroundColor": 4290360135}, {"backgroundColor": 4290099010}, {"backgroundColor": 4289837629}, {"backgroundColor": 4289641785}, {"backgroundColor": 4289445940}, {"backgroundColor": 4289249840}, {"backgroundColor": 4289053740}, {"backgroundColor": 4288922920}, {"backgroundColor": 4288792356}, {"backgroundColor": 4288727073}, {"backgroundColor": 4288661534}, {"backgroundColor": 4288596252}, {"backgroundColor": 4288596251}, {"backgroundColor": 4288596251}], + _232_113_116_1__158_201_27_1_native: [{"backgroundColor": "nil"}, {"backgroundColor": "#e87174"}, {"backgroundColor": "#e87174"}, {"backgroundColor": "#e87174"}, {"backgroundColor": "#e87174"}, {"backgroundColor": "#e87174"}, {"backgroundColor": "#e87174"}, {"backgroundColor": "#e87174"}, {"backgroundColor": "#e87174"}, {"backgroundColor": "#e87174"}, {"backgroundColor": "#e87174"}, {"backgroundColor": "#e87174"}, {"backgroundColor": "#e87174"}, {"backgroundColor": "#e87174"}, {"backgroundColor": "#e87174"}, {"backgroundColor": "#e87174"}, {"backgroundColor": "#e87174"}, {"backgroundColor": "#e87174"}, {"backgroundColor": "#e87174"}, {"backgroundColor": "#e87174"}, {"backgroundColor": "#e87174"}, {"backgroundColor": "#e87174"}, {"backgroundColor": "#e87174"}, {"backgroundColor": "#e87174"}, {"backgroundColor": "#e87174"}, {"backgroundColor": "#e87174"}, {"backgroundColor": "#e87174"}, {"backgroundColor": "#e87174"}, {"backgroundColor": "#e87174"}, {"backgroundColor": "#e87174"}, {"backgroundColor": "#e87174"}, {"backgroundColor": "#e87174"}, {"backgroundColor": "#e87174"}, {"backgroundColor": "#e87174"}, {"backgroundColor": "#e87174"}, {"backgroundColor": "#e87274"}, {"backgroundColor": "#e77373"}, {"backgroundColor": "#e67572"}, {"backgroundColor": "#e57771"}, {"backgroundColor": "#e47a70"}, {"backgroundColor": "#e27d6f"}, {"backgroundColor": "#e0816d"}, {"backgroundColor": "#de856b"}, {"backgroundColor": "#db8969"}, {"backgroundColor": "#d88d67"}, {"backgroundColor": "#d59264"}, {"backgroundColor": "#d29761"}, {"backgroundColor": "#ce9c5d"}, {"backgroundColor": "#caa159"}, {"backgroundColor": "#c5a654"}, {"backgroundColor": "#c1ab50"}, {"backgroundColor": "#bdaf4b"}, {"backgroundColor": "#b9b347"}, {"backgroundColor": "#b5b742"}, {"backgroundColor": "#b1ba3d"}, {"backgroundColor": "#aebd39"}, {"backgroundColor": "#abc034"}, {"backgroundColor": "#a8c230"}, {"backgroundColor": "#a5c42c"}, {"backgroundColor": "#a3c528"}, {"backgroundColor": "#a1c724"}, {"backgroundColor": "#a0c821"}, {"backgroundColor": "#9fc81e"}, {"backgroundColor": "#9ec91c"}, {"backgroundColor": "#9ec91b"}, {"backgroundColor": "#9ec91b"}], +}; diff --git a/app/src/examples/RuntimeTests/tests/animations/withTiming/enteringColorsSnapshots.test.tsx b/app/src/examples/RuntimeTests/tests/animations/withTiming/enteringColorsSnapshots.test.tsx new file mode 100644 index 00000000000..488962dc89d --- /dev/null +++ b/app/src/examples/RuntimeTests/tests/animations/withTiming/enteringColorsSnapshots.test.tsx @@ -0,0 +1,63 @@ +import { StyleSheet } from 'react-native'; +import Animated, { withDelay, withTiming } from 'react-native-reanimated'; +import React from 'react'; +import { + describe, + test, + expect, + mockAnimationTimer, + recordAnimationUpdates, + render, + wait, +} from '../../../ReanimatedRuntimeTestsRunner/RuntimeTestsApi'; +import { Snapshots } from './entering.snapshot'; + +const AnimatedComponent = ({ fromColor, toColor }: { fromColor: string; toColor: string }) => { + const customAnim = () => { + 'worklet'; + const animations = { + backgroundColor: withDelay(500, withTiming(toColor, { duration: 500 })), + }; + const initialValues = { backgroundColor: fromColor }; + return { initialValues, animations }; + }; + + return ; +}; + +async function getSnapshotUpdates(fromColor: string, toColor: string) { + await mockAnimationTimer(); + const updatesContainer = await recordAnimationUpdates(); + await render(); + await wait(1200); + const updates = updatesContainer.getUpdates(); + const nativeUpdates = await updatesContainer.getNativeSnapshots(); + return [updates, nativeUpdates]; +} + +describe('entering with custom animation (withDelay + withTiming color changes) test', () => { + test.each([ + ['rgba(16, 128, 26, 1)', 'rgba(179, 6, 6, 1)'], + ['rgba(143, 253, 140, 1)', 'rgba(29, 247, 107, 1)'], + ['rgba(226, 167, 48, 1)', 'rgba(222, 251, 137, 1)'], + ['rgba(201, 25, 139, 1)', 'rgba(91, 234, 32, 1)'], + ['rgba(246, 121, 228, 1)', 'rgba(10, 192, 235, 1)'], + ['rgba(12, 115, 38, 1)', 'rgba(242, 174, 57, 1)'], + ['rgba(169, 198, 146, 1)', 'rgba(238, 116, 102, 1)'], + ['rgba(222, 170, 194, 1)', 'rgba(79, 79, 145, 1)'], + ['rgba(116, 58, 155, 1)', 'rgba(161, 66, 77, 1)'], + ['rgba(232, 113, 116, 1)', 'rgba(158, 201, 27, 1)'], + ])('Entering color from ${0} to ${1}', async ([fromColor, toColor]) => { + const [updates, nativeUpdates] = await getSnapshotUpdates(fromColor, toColor); + const snapshotName = (fromColor + toColor) + .replace(/\s/g, '') + .replace(/[()]/g, '_') + .replace(/,/g, '_') + .replace(/rgba/g, ''); + const nativeSnapshotName = snapshotName + 'native'; + expect(updates).toMatchSnapshots(Snapshots[snapshotName as keyof typeof Snapshots]); + expect(nativeUpdates).toMatchSnapshots(Snapshots[nativeSnapshotName as keyof typeof Snapshots]); + }); +}); + +const styles = StyleSheet.create({ colorBox: { flex: 1 } }); diff --git a/src/reanimated2/animation/styleAnimation.ts b/src/reanimated2/animation/styleAnimation.ts index af0fddff0a0..6ed35e01800 100644 --- a/src/reanimated2/animation/styleAnimation.ts +++ b/src/reanimated2/animation/styleAnimation.ts @@ -125,16 +125,18 @@ export function withStyleAnimation( stillGoing = true; } - if (ColorProperties.includes(currentEntry.path[0] as string)) { - currentStyleAnimation.current = processColor( - currentStyleAnimation.current - ) as number; - } + // When working with animations changing colors, we need to make sure that each one of them begins with a rgba, not a processed number. + // Thus, we only set the path to a processed color, but currentStyleAnimation.current stays as rgba. + const isAnimatingColorProp = ColorProperties.includes( + currentEntry.path[0] as string + ); setPath( animation.current, currentEntry.path, - currentStyleAnimation.current + isAnimatingColorProp + ? processColor(currentStyleAnimation.current) + : currentStyleAnimation.current ); } }