'use strict'; import type { MutableRefObject } from 'react'; import { useEffect, useRef } from 'react'; import { makeShareable, startMapper, stopMapper } from '../core'; import updateProps, { updatePropsJestWrapper } from '../UpdateProps'; import { initialUpdaterRun } from '../animation'; import { useSharedValue } from './useSharedValue'; import { buildWorkletsHash, isAnimated, shallowEqual, validateAnimatedStyles, } from './utils'; import type { AnimatedStyleHandle, DefaultStyle, DependencyList, Descriptor, JestAnimatedStyleHandle, } from './commonTypes'; import type { ViewDescriptorsSet, ViewRefSet } from '../ViewDescriptorsSet'; import { makeViewDescriptorsSet, useViewRefSet } from '../ViewDescriptorsSet'; import { isJest, shouldBeUseWeb } from '../PlatformChecker'; import type { AnimationObject, Timestamp, NestedObjectValues, SharedValue, StyleProps, WorkletFunction, AnimatedPropsAdapterFunction, AnimatedPropsAdapterWorklet, } from '../commonTypes'; import type { AnimatedStyle } from '../helperTypes'; import { isWorkletFunction } from '../commonTypes'; const SHOULD_BE_USE_WEB = shouldBeUseWeb(); interface AnimatedState { last: AnimatedStyle; animations: AnimatedStyle; isAnimationRunning: boolean; isAnimationCancelled: boolean; } interface AnimatedUpdaterData { initial: { value: AnimatedStyle; updater: () => AnimatedStyle; }; remoteState: AnimatedState; viewDescriptors: ViewDescriptorsSet; } function prepareAnimation( frameTimestamp: number, animatedProp: AnimatedStyle, lastAnimation: AnimatedStyle, lastValue: AnimatedStyle ): void { 'worklet'; if (Array.isArray(animatedProp)) { animatedProp.forEach((prop, index) => { prepareAnimation( frameTimestamp, prop, lastAnimation && lastAnimation[index], lastValue && lastValue[index] ); }); // return animatedProp; } if (typeof animatedProp === 'object' && animatedProp.onFrame) { const animation = animatedProp; let value = animation.current; if (lastValue !== undefined && lastValue !== null) { if (typeof lastValue === 'object') { if (lastValue.value !== undefined) { // previously it was a shared value value = lastValue.value; } else if (lastValue.onFrame !== undefined) { if (lastAnimation?.current !== undefined) { // it was an animation before, copy its state value = lastAnimation.current; } else if (lastValue?.current !== undefined) { // it was initialized value = lastValue.current; } } } else { // previously it was a plain value, just set it as starting point value = lastValue; } } animation.callStart = (timestamp: Timestamp) => { animation.onStart(animation, value, timestamp, lastAnimation); }; animation.callStart(frameTimestamp); animation.callStart = null; } else if (typeof animatedProp === 'object') { // it is an object Object.keys(animatedProp).forEach((key) => prepareAnimation( frameTimestamp, animatedProp[key], lastAnimation && lastAnimation[key], lastValue && lastValue[key] ) ); } } function runAnimations( animation: AnimatedStyle, timestamp: Timestamp, key: number | string, result: AnimatedStyle, animationsActive: SharedValue ): boolean { 'worklet'; if (!animationsActive.value) { return true; } if (Array.isArray(animation)) { result[key] = []; let allFinished = true; animation.forEach((entry, index) => { if ( !runAnimations(entry, timestamp, index, result[key], animationsActive) ) { allFinished = false; } }); return allFinished; } else if (typeof animation === 'object' && animation.onFrame) { let finished = true; if (!animation.finished) { if (animation.callStart) { animation.callStart(timestamp); animation.callStart = null; } finished = animation.onFrame(animation, timestamp); animation.timestamp = timestamp; if (finished) { animation.finished = true; animation.callback && animation.callback(true /* finished */); } } result[key] = animation.current; return finished; } else if (typeof animation === 'object') { result[key] = {}; let allFinished = true; Object.keys(animation).forEach((k) => { if ( !runAnimations( animation[k], timestamp, k, result[key], animationsActive ) ) { allFinished = false; } }); return allFinished; } else { result[key] = animation; return true; } } function styleUpdater( viewDescriptors: SharedValue, updater: WorkletFunction<[], AnimatedStyle> | (() => AnimatedStyle), state: AnimatedState, maybeViewRef: ViewRefSet | undefined, animationsActive: SharedValue, isAnimatedProps = false ): void { 'worklet'; const animations = state.animations ?? {}; const newValues = updater() ?? {}; const oldValues = state.last; const nonAnimatedNewValues: StyleProps = {}; let hasAnimations = false; let frameTimestamp: number | undefined; let hasNonAnimatedValues = false; for (const key in newValues) { const value = newValues[key]; if (isAnimated(value)) { frameTimestamp = global.__frameTimestamp || global._getAnimationTimestamp(); prepareAnimation(frameTimestamp, value, animations[key], oldValues[key]); animations[key] = value; hasAnimations = true; } else { hasNonAnimatedValues = true; nonAnimatedNewValues[key] = value; delete animations[key]; } } if (hasAnimations) { const frame = (timestamp: Timestamp) => { // eslint-disable-next-line @typescript-eslint/no-shadow const { animations, last, isAnimationCancelled } = state; if (isAnimationCancelled) { state.isAnimationRunning = false; return; } const updates: AnimatedStyle = {}; let allFinished = true; for (const propName in animations) { const finished = runAnimations( animations[propName], timestamp, propName, updates, animationsActive ); if (finished) { last[propName] = updates[propName]; delete animations[propName]; } else { allFinished = false; } } if (updates) { updateProps(viewDescriptors, updates, maybeViewRef); } if (!allFinished) { requestAnimationFrame(frame); } else { state.isAnimationRunning = false; } }; state.animations = animations; if (!state.isAnimationRunning) { state.isAnimationCancelled = false; state.isAnimationRunning = true; frame(frameTimestamp!); } if (hasNonAnimatedValues) { updateProps(viewDescriptors, nonAnimatedNewValues, maybeViewRef); } } else { state.isAnimationCancelled = true; state.animations = []; if (!shallowEqual(oldValues, newValues)) { updateProps(viewDescriptors, newValues, maybeViewRef, isAnimatedProps); } } state.last = newValues; } function jestStyleUpdater( viewDescriptors: SharedValue, updater: WorkletFunction<[], AnimatedStyle> | (() => AnimatedStyle), state: AnimatedState, maybeViewRef: ViewRefSet | undefined, animationsActive: SharedValue, animatedStyle: MutableRefObject>, adapters: AnimatedPropsAdapterFunction[] ): void { 'worklet'; const animations: AnimatedStyle = state.animations ?? {}; const newValues = updater() ?? {}; const oldValues = state.last; // extract animated props let hasAnimations = false; let frameTimestamp: number | undefined; Object.keys(animations).forEach((key) => { const value = newValues[key]; if (!isAnimated(value)) { delete animations[key]; } }); Object.keys(newValues).forEach((key) => { const value = newValues[key]; if (isAnimated(value)) { frameTimestamp = global.__frameTimestamp || global._getAnimationTimestamp(); prepareAnimation(frameTimestamp, value, animations[key], oldValues[key]); animations[key] = value; hasAnimations = true; } }); function frame(timestamp: Timestamp) { // eslint-disable-next-line @typescript-eslint/no-shadow const { animations, last, isAnimationCancelled } = state; if (isAnimationCancelled) { state.isAnimationRunning = false; return; } const updates: AnimatedStyle = {}; let allFinished = true; Object.keys(animations).forEach((propName) => { const finished = runAnimations( animations[propName], timestamp, propName, updates, animationsActive ); if (finished) { last[propName] = updates[propName]; delete animations[propName]; } else { allFinished = false; } }); if (Object.keys(updates).length) { updatePropsJestWrapper( viewDescriptors, updates, maybeViewRef, animatedStyle, adapters ); } if (!allFinished) { requestAnimationFrame(frame); } else { state.isAnimationRunning = false; } } if (hasAnimations) { state.animations = animations; if (!state.isAnimationRunning) { state.isAnimationCancelled = false; state.isAnimationRunning = true; frame(frameTimestamp!); } } else { state.isAnimationCancelled = true; state.animations = []; } // calculate diff state.last = newValues; if (!shallowEqual(oldValues, newValues)) { updatePropsJestWrapper( viewDescriptors, newValues, maybeViewRef, animatedStyle, adapters ); } } // check for invalid usage of shared values in returned object function checkSharedValueUsage( prop: NestedObjectValues, currentKey?: string ): void { if (Array.isArray(prop)) { // if it's an array (i.ex. transform) validate all its elements for (const element of prop) { checkSharedValueUsage(element, currentKey); } } else if ( typeof prop === 'object' && prop !== null && prop.value === undefined ) { // if it's a nested object, run validation for all its props for (const key of Object.keys(prop)) { checkSharedValueUsage(prop[key], key); } } else if ( currentKey !== undefined && typeof prop === 'object' && prop !== null && prop.value !== undefined ) { // if shared value is passed insted of its value, throw an error throw new Error( `[Reanimated] Invalid value passed to \`${currentKey}\`, maybe you forgot to use \`.value\`?` ); } } /** * Lets you create a styles object, similar to StyleSheet styles, which can be animated using shared values. * * @param updater - A function returning an object with style properties you want to animate. * @param dependencies - An optional array of dependencies. Only relevant when using Reanimated without the Babel plugin on the Web. * @returns An animated style object which has to be passed to the `style` property of an Animated component you want to animate. * @see https://docs.swmansion.com/react-native-reanimated/docs/core/useAnimatedStyle */ // You cannot pass Shared Values to `useAnimatedStyle` directly. // @ts-expect-error This overload is required by our API. export function useAnimatedStyle