From 9517cfb815c45a31081c626a1d516e490863cfdc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomasz=20=C5=BBelawski?= Date: Fri, 28 Jul 2023 18:21:00 +0200 Subject: [PATCH 1/7] init but it's tragic --- src/reanimated2/UpdateProps.ts | 26 +++++------ src/reanimated2/animation/commonTypes.ts | 8 ++-- src/reanimated2/animation/decay.ts | 2 + src/reanimated2/animation/index.ts | 6 +-- src/reanimated2/animation/springUtils.ts | 2 + src/reanimated2/animation/styleAnimation.ts | 9 ++-- src/reanimated2/animation/timing.ts | 2 + src/reanimated2/animation/util.ts | 4 +- src/reanimated2/commonTypes.ts | 25 ---------- src/reanimated2/component/FlatList.tsx | 2 + src/reanimated2/component/ScrollView.tsx | 2 +- src/reanimated2/helperTypes.ts | 39 ++++++++++++++-- src/reanimated2/hook/index.ts | 5 +- src/reanimated2/hook/useAnimatedStyle.ts | 52 +++++++++++---------- src/reanimated2/hook/utils.ts | 8 ++-- src/reanimated2/index.ts | 14 +++++- src/reanimated2/interpolateColor.ts | 4 +- src/reanimated2/js-reanimated/index.ts | 7 +-- src/reanimated2/layoutReanimation/index.ts | 1 + 19 files changed, 125 insertions(+), 93 deletions(-) diff --git a/src/reanimated2/UpdateProps.ts b/src/reanimated2/UpdateProps.ts index 0d403593712..33c775022c9 100644 --- a/src/reanimated2/UpdateProps.ts +++ b/src/reanimated2/UpdateProps.ts @@ -1,17 +1,13 @@ import type { MutableRefObject } from 'react'; import { processColor } from './Colors'; -import type { - AnimatedStyle, - ShadowNodeWrapper, - SharedValue, - StyleProps, -} from './commonTypes'; +import type { ShadowNodeWrapper, SharedValue, StyleProps } from './commonTypes'; import { makeShareable } from './core'; import type { Descriptor } from './hook/commonTypes'; import { _updatePropsJS } from './js-reanimated'; import { shouldBeUseWeb } from './PlatformChecker'; import type { ViewRefSet } from './ViewDescriptorsSet'; import { runOnUIImmediately } from './threads'; +import { AnimatedStyle } from './helperTypes'; // copied from react-native/Libraries/Components/View/ReactNativeStyleAttributes export const colorProps = [ @@ -35,7 +31,7 @@ export const ColorProperties = makeShareable(colorProps); export let updateProps: ( viewDescriptor: SharedValue, - updates: StyleProps | AnimatedStyle, + updates: StyleProps | AnimatedStyle, maybeViewRef: ViewRefSet | undefined ) => void; @@ -63,10 +59,10 @@ if (shouldBeUseWeb()) { export const updatePropsJestWrapper = ( viewDescriptors: SharedValue, - updates: AnimatedStyle, + updates: AnimatedStyle, maybeViewRef: ViewRefSet | undefined, - animatedStyle: MutableRefObject, - adapters: ((updates: AnimatedStyle) => void)[] + animatedStyle: MutableRefObject>, + adapters: ((updates: AnimatedStyle) => void)[] ): void => { adapters.forEach((adapter) => { adapter(updates); @@ -87,12 +83,12 @@ const createUpdatePropsManager = global._IS_FABRIC // Fabric const operations: { shadowNodeWrapper: ShadowNodeWrapper; - updates: StyleProps | AnimatedStyle; + updates: StyleProps | AnimatedStyle; }[] = []; return { update( viewDescriptors: SharedValue, - updates: StyleProps | AnimatedStyle + updates: StyleProps | AnimatedStyle ) { viewDescriptors.value.forEach((viewDescriptor) => { operations.push({ @@ -117,12 +113,12 @@ const createUpdatePropsManager = global._IS_FABRIC const operations: { tag: number; name: string; - updates: StyleProps | AnimatedStyle; + updates: StyleProps | AnimatedStyle; }[] = []; return { update( viewDescriptors: SharedValue, - updates: StyleProps | AnimatedStyle + updates: StyleProps | AnimatedStyle ) { viewDescriptors.value.forEach((viewDescriptor) => { operations.push({ @@ -151,7 +147,7 @@ runOnUIImmediately(() => { export interface UpdatePropsManager { update( viewDescriptors: SharedValue, - updates: StyleProps | AnimatedStyle + updates: StyleProps | AnimatedStyle ): void; flush(): void; } diff --git a/src/reanimated2/animation/commonTypes.ts b/src/reanimated2/animation/commonTypes.ts index 4262907864b..b033dd4ff7a 100644 --- a/src/reanimated2/animation/commonTypes.ts +++ b/src/reanimated2/animation/commonTypes.ts @@ -1,5 +1,4 @@ import type { - AnimatedStyle, StyleProps, AnimatableValue, AnimationObject, @@ -7,6 +6,7 @@ import type { Timestamp, AnimationCallback, } from '../commonTypes'; +import { AnimatedStyle } from '../helperTypes'; export interface HigherOrderAnimation { isHigherOrder?: boolean; @@ -40,11 +40,13 @@ export interface SequenceAnimation export interface StyleLayoutAnimation extends HigherOrderAnimation { current: StyleProps; - styleAnimations: AnimatedStyle; + // ??????? + styleAnimations: AnimatedStyle; onFrame: (animation: StyleLayoutAnimation, timestamp: Timestamp) => boolean; onStart: ( nextAnimation: StyleLayoutAnimation, - current: AnimatedStyle, + // ???????? + current: AnimatedStyle, timestamp: Timestamp, previousAnimation: StyleLayoutAnimation ) => void; diff --git a/src/reanimated2/animation/decay.ts b/src/reanimated2/animation/decay.ts index 8666f1c2973..6241c4d511e 100644 --- a/src/reanimated2/animation/decay.ts +++ b/src/reanimated2/animation/decay.ts @@ -15,6 +15,8 @@ interface DecayConfig { velocity?: number; } +export type WithDecayConfig = DecayConfig; + interface DefaultDecayConfig { deceleration: number; velocityFactor: number; diff --git a/src/reanimated2/animation/index.ts b/src/reanimated2/animation/index.ts index b1b0ca59c63..28efdacdd3c 100644 --- a/src/reanimated2/animation/index.ts +++ b/src/reanimated2/animation/index.ts @@ -8,10 +8,10 @@ export type { } from './commonTypes'; export { cancelAnimation, defineAnimation, initialUpdaterRun } from './util'; export { withTiming } from './timing'; -export type { TimingAnimation } from './timing'; +export type { TimingAnimation, WithTimingConfig } from './timing'; export { withSpring } from './spring'; -export type { SpringAnimation } from './springUtils'; -export { withDecay } from './decay'; +export type { SpringAnimation, WithSpringConfig } from './springUtils'; +export { withDecay, WithDecayConfig } from './decay'; export type { DecayAnimation } from './decay'; export { withDelay } from './delay'; export { withRepeat } from './repeat'; diff --git a/src/reanimated2/animation/springUtils.ts b/src/reanimated2/animation/springUtils.ts index b5ba2c1bf6a..e6d8b663d88 100644 --- a/src/reanimated2/animation/springUtils.ts +++ b/src/reanimated2/animation/springUtils.ts @@ -21,6 +21,8 @@ export type SpringConfig = { } ); +export type WithSpringConfig = SpringConfig; + export interface SpringConfigInner { useDuration: boolean; configIsInvalid: boolean; diff --git a/src/reanimated2/animation/styleAnimation.ts b/src/reanimated2/animation/styleAnimation.ts index d384094a901..32d814d577f 100644 --- a/src/reanimated2/animation/styleAnimation.ts +++ b/src/reanimated2/animation/styleAnimation.ts @@ -4,7 +4,6 @@ import type { AnimatableValue, AnimationObject, Animation, - AnimatedStyle, NestedObject, NestedObjectValues, } from '../commonTypes'; @@ -12,6 +11,7 @@ import type { StyleLayoutAnimation } from './commonTypes'; import { withTiming } from './timing'; import { ColorProperties } from '../UpdateProps'; import { processColor } from '../Colors'; +import { AnimatedStyle } from '../helperTypes'; // resolves path to value for nested objects // if path cannot be resolved returns undefined @@ -71,7 +71,8 @@ interface NestedObjectEntry { } export function withStyleAnimation( - styleAnimations: AnimatedStyle + // ??????? + styleAnimations: AnimatedStyle ): StyleLayoutAnimation { 'worklet'; return defineAnimation({}, () => { @@ -143,7 +144,8 @@ export function withStyleAnimation( const onStart = ( animation: StyleLayoutAnimation, - value: AnimatedStyle, + // ?????????? + value: AnimatedStyle, now: Timestamp, previousAnimation: StyleLayoutAnimation ): void => { @@ -180,6 +182,7 @@ export function withStyleAnimation( ); let prevVal = resolvePath(value, currentEntry.path); if (prevAnimation && !prevVal) { + // @ts-expect-error wtf happened here prevVal = prevAnimation.current; } if (prevVal === undefined) { diff --git a/src/reanimated2/animation/timing.ts b/src/reanimated2/animation/timing.ts index 8304add80e5..a7e0e82db51 100644 --- a/src/reanimated2/animation/timing.ts +++ b/src/reanimated2/animation/timing.ts @@ -13,6 +13,8 @@ interface TimingConfig { easing?: EasingFn | EasingFactoryFn; } +export type WithTimingConfig = TimingConfig; + export interface TimingAnimation extends Animation { type: string; easing: EasingFn; diff --git a/src/reanimated2/animation/util.ts b/src/reanimated2/animation/util.ts index 2ecaa0eb877..f6f706fd3a0 100644 --- a/src/reanimated2/animation/util.ts +++ b/src/reanimated2/animation/util.ts @@ -13,7 +13,6 @@ import { } from '../Colors'; import type { - AnimatedStyle, SharedValue, AnimatableValue, Animation, @@ -34,10 +33,11 @@ import { subtractMatrices, getRotationMatrix, } from './transformationMatrix/matrixUtils'; +import type { AnimatedStyle } from '../helperTypes'; let IN_STYLE_UPDATER = false; -export type UserUpdater = () => AnimatedStyle; +export type UserUpdater = () => AnimatedStyle; export function initialUpdaterRun(updater: () => T): T { IN_STYLE_UPDATER = true; diff --git a/src/reanimated2/commonTypes.ts b/src/reanimated2/commonTypes.ts index 80f0ba8bbb7..e4e546b989e 100644 --- a/src/reanimated2/commonTypes.ts +++ b/src/reanimated2/commonTypes.ts @@ -37,31 +37,6 @@ export interface StyleProps extends ViewStyle, TextStyle { [key: string]: any; } -export interface AnimatedStyle extends Record { - [key: string]: any; - transform?: Array< - | Record<'matrix', number[] | AnimationObject> - | Partial< - Record< - | 'perspective' - | 'scale' - | 'scaleX' - | 'scaleY' - | 'translateX' - | 'translateY', - number | AnimationObject - > - > - | Partial< - Record< - 'rotate' | 'rotateX' | 'rotateY' | 'rotateZ' | 'skewX' | 'skewY', - string | AnimationObject - > - > - | Record - >; -} - export interface SharedValue { value: T; addListener: (listenerID: number, listener: (value: T) => void) => void; diff --git a/src/reanimated2/component/FlatList.tsx b/src/reanimated2/component/FlatList.tsx index 60d22ee15eb..629e55a05c4 100644 --- a/src/reanimated2/component/FlatList.tsx +++ b/src/reanimated2/component/FlatList.tsx @@ -41,6 +41,8 @@ interface ReanimatedFlatListPropsWithLayout extends FlatListProps { itemLayoutAnimation?: ILayoutAnimationBuilder; } +export type FlatListPropsWithLayout = ReanimatedFlatListPropsWithLayout; + // TODO TYPESCRIPT This is a temporary type to get rid of .d.ts file. declare class ReanimatedFlatListClass extends Component< AnimateProps> diff --git a/src/reanimated2/component/ScrollView.tsx b/src/reanimated2/component/ScrollView.tsx index d9f2749946f..482ad0c2109 100644 --- a/src/reanimated2/component/ScrollView.tsx +++ b/src/reanimated2/component/ScrollView.tsx @@ -7,7 +7,7 @@ import type { SharedValue } from '../commonTypes'; import type { AnimateProps } from '../helperTypes'; import { useAnimatedRef, useScrollViewOffset } from '../hook'; -interface AnimatedScrollViewProps extends ScrollViewProps { +export interface AnimatedScrollViewProps extends ScrollViewProps { scrollViewOffset?: SharedValue; } diff --git a/src/reanimated2/helperTypes.ts b/src/reanimated2/helperTypes.ts index 60d4bcbd484..8d9047f5688 100644 --- a/src/reanimated2/helperTypes.ts +++ b/src/reanimated2/helperTypes.ts @@ -15,29 +15,39 @@ import type { import type { AnimatableValue, BaseAnimationBuilder, + EasingFactoryFn, + EasingFn, EntryExitAnimationFunction, LayoutAnimationFunction, SharedValue, + Value3D, + ValueRotation, } from '.'; import type { ReanimatedKeyframe } from './layoutReanimation/animationBuilder/Keyframe'; import type { SharedTransition } from './layoutReanimation/sharedTransitions'; import type { DependencyList } from './hook/commonTypes'; -type Adaptable = T | ReadonlyArray> | SharedValue; +export type Adaptable = + | T + | ReadonlyArray> + | SharedValue; -type AdaptTransforms = { +export type AdaptTransforms = { [P in keyof T]: Adaptable; }; type TransformsStyle = Pick; -type TransformStyleTypes = TransformsStyle['transform'] extends +export type TransformStyleTypes = TransformsStyle['transform'] extends | readonly (infer T)[] | undefined ? T : never; -type AnimatedTransform = AdaptTransforms[]; +export type AnimatedTransform = AdaptTransforms[]; +/** + * @deprecated Please use `AnimatedStyle` instead. + */ export type AnimateStyle = { [K in keyof S]: K extends 'transform' ? AnimatedTransform @@ -50,13 +60,15 @@ export type AnimateStyle = { : S[K] | SharedValue; }; +export type AnimatedStyle = AnimateStyle; + // provided types can either be their original types (like backgroundColor: pink) // or inline shared values/derived values type MaybeSharedValue = { [K in keyof S]: S[K] | Readonly>>; }; -type StylesOrDefault = 'style' extends keyof T +export type StylesOrDefault = 'style' extends keyof T ? MaybeSharedValue : Record; @@ -137,3 +149,20 @@ export type useAnimatedPropsType = ( | AnimatedPropsAdapterFunction[] | null ) => Partial; + +// should one of them be deprecated? +export type EasingFunction = EasingFn; +export type EasingFunctionFactory = EasingFactoryFn; + +// deprecated? +export type SensorValue3D = SharedValue; + +// deprecated? +export type SensorValueRotation = SharedValue; + +// deprecated? +export interface InterpolatedNode { + __nodeId: number; +} + +// diff --git a/src/reanimated2/hook/index.ts b/src/reanimated2/hook/index.ts index 22ef19dafb4..9eb4f0642dc 100644 --- a/src/reanimated2/hook/index.ts +++ b/src/reanimated2/hook/index.ts @@ -8,7 +8,10 @@ export { export { useSharedValue } from './useSharedValue'; export { useReducedMotion } from './useReducedMotion'; export { useAnimatedStyle } from './useAnimatedStyle'; -export type { AnimatedStyleResult } from './useAnimatedStyle'; +export type { + AnimatedStyleResult, + AnimatedStyleProp, +} from './useAnimatedStyle'; export { useAnimatedGestureHandler } from './useAnimatedGestureHandler'; export type { GestureHandlerEvent, diff --git a/src/reanimated2/hook/useAnimatedStyle.ts b/src/reanimated2/hook/useAnimatedStyle.ts index f129860b250..db197770c11 100644 --- a/src/reanimated2/hook/useAnimatedStyle.ts +++ b/src/reanimated2/hook/useAnimatedStyle.ts @@ -20,7 +20,6 @@ import type { AnimationObject, Timestamp, AdapterWorkletFunction, - AnimatedStyle, BasicWorkletFunction, BasicWorkletFunctionOptional, NestedObjectValues, @@ -33,26 +32,26 @@ import type { TextStyle, ViewStyle, } from 'react-native'; -import type { AnimateStyle } from '../helperTypes'; +import type { AnimatedStyle } from '../helperTypes'; export interface AnimatedStyleResult { viewDescriptors: ViewDescriptorsSet; - initial: AnimatedStyle; + initial: AnimatedStyle; viewsRef: ViewRefSet; - animatedStyle?: MutableRefObject; + animatedStyle?: MutableRefObject>; } interface AnimatedState { - last: AnimatedStyle; - animations: AnimatedStyle; + last: AnimatedStyle; + animations: AnimatedStyle; isAnimationRunning: boolean; isAnimationCancelled: boolean; } interface AnimationRef { initial: { - value: AnimatedStyle; - updater: () => AnimatedStyle; + value: AnimatedStyle; + updater: () => AnimatedStyle; }; remoteState: AnimatedState; viewDescriptors: ViewDescriptorsSet; @@ -60,9 +59,9 @@ interface AnimationRef { function prepareAnimation( frameTimestamp: number, - animatedProp: AnimatedStyle, - lastAnimation: AnimatedStyle, - lastValue: AnimatedStyle + animatedProp: AnimatedStyle, + lastAnimation: AnimatedStyle, + lastValue: AnimatedStyle ): void { 'worklet'; if (Array.isArray(animatedProp)) { @@ -119,10 +118,10 @@ function prepareAnimation( } function runAnimations( - animation: AnimatedStyle, + animation: AnimatedStyle, timestamp: Timestamp, key: number | string, - result: AnimatedStyle, + result: AnimatedStyle, animationsActive: SharedValue ): boolean { 'worklet'; @@ -181,7 +180,7 @@ function runAnimations( function styleUpdater( viewDescriptors: SharedValue, - updater: BasicWorkletFunction, + updater: BasicWorkletFunction>, state: AnimatedState, maybeViewRef: ViewRefSet | undefined, animationsActive: SharedValue @@ -217,7 +216,7 @@ function styleUpdater( return; } - const updates: AnimatedStyle = {}; + const updates: AnimatedStyle = {}; let allFinished = true; for (const propName in animations) { const finished = runAnimations( @@ -269,15 +268,15 @@ function styleUpdater( function jestStyleUpdater( viewDescriptors: SharedValue, - updater: BasicWorkletFunction, + updater: BasicWorkletFunction>, state: AnimatedState, maybeViewRef: ViewRefSet | undefined, animationsActive: SharedValue, - animatedStyle: MutableRefObject, + animatedStyle: MutableRefObject>, adapters: AdapterWorkletFunction[] = [] ): void { 'worklet'; - const animations: AnimatedStyle = state.animations ?? {}; + const animations: AnimatedStyle = state.animations ?? {}; const newValues = updater() ?? {}; const oldValues = state.last; @@ -307,7 +306,7 @@ function jestStyleUpdater( return; } - const updates: AnimatedStyle = {}; + const updates: AnimatedStyle = {}; let allFinished = true; Object.keys(animations).forEach((propName) => { const finished = runAnimations( @@ -401,7 +400,10 @@ function checkSharedValueUsage( } // TODO TYPESCRIPT This is a temporary type to get rid of .d.ts file. -type AnimatedStyleProp = AnimateStyle | RegisteredStyle>; +// deprecated ?? +export type AnimatedStyleProp = + | AnimatedStyle + | RegisteredStyle>; // TODO TYPESCRIPT This is a temporary type to get rid of .d.ts file. type useAnimatedStyleType = < @@ -411,7 +413,7 @@ type useAnimatedStyleType = < deps?: DependencyList | null ) => T; -export const useAnimatedStyle = function ( +export const useAnimatedStyle = function >( // animated style cannot be an array updater: BasicWorkletFunction ? never : T>, dependencies?: DependencyList, @@ -440,9 +442,9 @@ For more, see the docs: https://docs.swmansion.com/react-native-reanimated/docs/ : []; const adaptersHash = adapters ? buildWorkletsHash(adaptersArray) : null; const animationsActive = useSharedValue(true); - const animatedStyle: MutableRefObject = useRef( - {} - ); + const animatedStyle: MutableRefObject> = useRef< + AnimatedStyle + >({}); // build dependencies if (!dependencies) { @@ -453,7 +455,7 @@ For more, see the docs: https://docs.swmansion.com/react-native-reanimated/docs/ adaptersHash && dependencies.push(adaptersHash); if (!initRef.current) { - const initialStyle: AnimatedStyle = initialUpdaterRun(updater); + const initialStyle: AnimatedStyle = initialUpdaterRun(updater); validateAnimatedStyles(initialStyle); initRef.current = { initial: { diff --git a/src/reanimated2/hook/utils.ts b/src/reanimated2/hook/utils.ts index 23ee9130a75..2dfe7468f3a 100644 --- a/src/reanimated2/hook/utils.ts +++ b/src/reanimated2/hook/utils.ts @@ -2,7 +2,6 @@ import type { MutableRefObject } from 'react'; import { useEffect, useRef } from 'react'; import { processColor } from '../Colors'; import type { - AnimatedStyle, Context, NativeEvent, NestedObjectValues, @@ -15,6 +14,7 @@ import { colorProps } from '../UpdateProps'; import WorkletEventHandler from '../WorkletEventHandler'; import type { ContextWithDependencies, DependencyList } from './commonTypes'; import type { NativeSyntheticEvent } from 'react-native'; +import type { AnimatedStyle } from '../helperTypes'; interface Handler extends WorkletFunction { (event: T, context: TContext): void; } @@ -156,7 +156,7 @@ export function areDependenciesEqual( return areHookInputsEqual(nextDeps, prevDeps); } -export function hasColorProps(updates: AnimatedStyle): boolean { +export function hasColorProps(updates: AnimatedStyle): boolean { const colorPropsSet = new Set(colorProps); for (const key in updates) { if (colorPropsSet.has(key)) { @@ -166,7 +166,7 @@ export function hasColorProps(updates: AnimatedStyle): boolean { return false; } -export function parseColors(updates: AnimatedStyle): void { +export function parseColors(updates: AnimatedStyle): void { 'worklet'; for (const key in updates) { if (colorProps.indexOf(key) !== -1) { @@ -209,7 +209,7 @@ export function shallowEqual(a: any, b: any) { return true; } -export const validateAnimatedStyles = (styles: AnimatedStyle): void => { +export const validateAnimatedStyles = (styles: AnimatedStyle): void => { 'worklet'; if (typeof styles !== 'object') { throw new Error( diff --git a/src/reanimated2/index.ts b/src/reanimated2/index.ts index e21281485e6..cd075ca01e0 100644 --- a/src/reanimated2/index.ts +++ b/src/reanimated2/index.ts @@ -15,4 +15,16 @@ export * from './commonTypes'; export * from './frameCallback'; export * from './pluginUtils'; export * from './jestUtils'; -export type { AnimateProps } from './helperTypes'; +export type { + Adaptable, + AdaptTransforms, + AnimateProps, + AnimatedProps, + AnimatedTransform, + TransformStyleTypes, + AnimateStyle, + AnimatedStyle, + StylesOrDefault, +} from './helperTypes'; +export type { AnimatedScrollViewProps } from './component/ScrollView'; +export type { FlatListPropsWithLayout } from './component/FlatList'; diff --git a/src/reanimated2/interpolateColor.ts b/src/reanimated2/interpolateColor.ts index 91931869edc..5155909f3bd 100644 --- a/src/reanimated2/interpolateColor.ts +++ b/src/reanimated2/interpolateColor.ts @@ -111,7 +111,7 @@ const interpolateColorsRGB = ( ); }; -interface InterpolateRGB { +export interface InterpolateRGB { r: number[]; g: number[]; b: number[]; @@ -141,7 +141,7 @@ const getInterpolateRGB = ( return { r, g, b, a }; }; -interface InterpolateHSV { +export interface InterpolateHSV { h: number[]; s: number[]; v: number[]; diff --git a/src/reanimated2/js-reanimated/index.ts b/src/reanimated2/js-reanimated/index.ts index a0e6d43b4d8..dcc3a11c9d1 100644 --- a/src/reanimated2/js-reanimated/index.ts +++ b/src/reanimated2/js-reanimated/index.ts @@ -1,6 +1,7 @@ import JSReanimated from './JSReanimated'; -import type { AnimatedStyle, StyleProps } from '../commonTypes'; +import type { StyleProps } from '../commonTypes'; import { isWeb } from '../PlatformChecker'; +import type { AnimatedStyle } from '../helperTypes'; // eslint-disable-next-line @typescript-eslint/no-explicit-any let createReactDOMStyle: (style: any) => any; @@ -47,13 +48,13 @@ interface JSReanimatedComponent { } export const _updatePropsJS = ( - updates: StyleProps | AnimatedStyle, + updates: StyleProps | AnimatedStyle, viewRef: { _component?: JSReanimatedComponent } ): void => { if (viewRef._component) { const component = viewRef._component; const [rawStyles] = Object.keys(updates).reduce( - (acc: [StyleProps, AnimatedStyle], key) => { + (acc: [StyleProps, AnimatedStyle], key) => { const value = updates[key]; const index = typeof value === 'function' ? 1 : 0; acc[index][key] = value; diff --git a/src/reanimated2/layoutReanimation/index.ts b/src/reanimated2/layoutReanimation/index.ts index 0833600a8f8..eca1f5ff0de 100644 --- a/src/reanimated2/layoutReanimation/index.ts +++ b/src/reanimated2/layoutReanimation/index.ts @@ -3,3 +3,4 @@ export * from './animationBuilder'; export * from './defaultAnimations'; export * from './defaultTransitions'; export * from './sharedTransitions'; +export type { KeyframeProps } from './animationBuilder/commonTypes'; From 47626cd30f09b9e63c8326b6216f87cb1cbe2a77 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomasz=20=C5=BBelawski?= Date: Mon, 31 Jul 2023 10:56:09 +0200 Subject: [PATCH 2/7] init --- src/Animated.ts | 2 +- src/reanimated2/UpdateProps.ts | 26 +++++------ src/reanimated2/animation/commonTypes.ts | 6 +-- src/reanimated2/animation/styleAnimation.ts | 6 +-- src/reanimated2/animation/util.ts | 4 +- src/reanimated2/commonTypes.ts | 25 ---------- src/reanimated2/globals.d.ts | 6 +-- src/reanimated2/helperTypes.ts | 19 +++++++- src/reanimated2/hook/useAnimatedStyle.ts | 51 +++++++++++---------- src/reanimated2/hook/utils.ts | 8 ++-- src/reanimated2/js-reanimated/index.ts | 7 +-- 11 files changed, 74 insertions(+), 86 deletions(-) diff --git a/src/Animated.ts b/src/Animated.ts index 900b0b0d823..f597cb52473 100644 --- a/src/Animated.ts +++ b/src/Animated.ts @@ -10,4 +10,4 @@ export { AnimatedScrollView as ScrollView } from './reanimated2/component/Scroll export { AnimatedImage as Image } from './reanimated2/component/Image'; export { ReanimatedFlatList as FlatList } from './reanimated2/component/FlatList'; export type { SharedValue } from './reanimated2/commonTypes'; -export type { AnimateStyle } from './reanimated2/helperTypes'; +export type { AnimatedStyle, AnimateStyle } from './reanimated2/helperTypes'; diff --git a/src/reanimated2/UpdateProps.ts b/src/reanimated2/UpdateProps.ts index 0d403593712..f27788a4ac9 100644 --- a/src/reanimated2/UpdateProps.ts +++ b/src/reanimated2/UpdateProps.ts @@ -1,11 +1,7 @@ import type { MutableRefObject } from 'react'; import { processColor } from './Colors'; -import type { - AnimatedStyle, - ShadowNodeWrapper, - SharedValue, - StyleProps, -} from './commonTypes'; +import type { ShadowNodeWrapper, SharedValue, StyleProps } from './commonTypes'; +import type { AnimatedStyle } from './helperTypes'; import { makeShareable } from './core'; import type { Descriptor } from './hook/commonTypes'; import { _updatePropsJS } from './js-reanimated'; @@ -35,7 +31,7 @@ export const ColorProperties = makeShareable(colorProps); export let updateProps: ( viewDescriptor: SharedValue, - updates: StyleProps | AnimatedStyle, + updates: StyleProps | AnimatedStyle, maybeViewRef: ViewRefSet | undefined ) => void; @@ -63,10 +59,10 @@ if (shouldBeUseWeb()) { export const updatePropsJestWrapper = ( viewDescriptors: SharedValue, - updates: AnimatedStyle, + updates: AnimatedStyle, maybeViewRef: ViewRefSet | undefined, - animatedStyle: MutableRefObject, - adapters: ((updates: AnimatedStyle) => void)[] + animatedStyle: MutableRefObject>, + adapters: ((updates: AnimatedStyle) => void)[] ): void => { adapters.forEach((adapter) => { adapter(updates); @@ -87,12 +83,12 @@ const createUpdatePropsManager = global._IS_FABRIC // Fabric const operations: { shadowNodeWrapper: ShadowNodeWrapper; - updates: StyleProps | AnimatedStyle; + updates: StyleProps | AnimatedStyle; }[] = []; return { update( viewDescriptors: SharedValue, - updates: StyleProps | AnimatedStyle + updates: StyleProps | AnimatedStyle ) { viewDescriptors.value.forEach((viewDescriptor) => { operations.push({ @@ -117,12 +113,12 @@ const createUpdatePropsManager = global._IS_FABRIC const operations: { tag: number; name: string; - updates: StyleProps | AnimatedStyle; + updates: StyleProps | AnimatedStyle; }[] = []; return { update( viewDescriptors: SharedValue, - updates: StyleProps | AnimatedStyle + updates: StyleProps | AnimatedStyle ) { viewDescriptors.value.forEach((viewDescriptor) => { operations.push({ @@ -151,7 +147,7 @@ runOnUIImmediately(() => { export interface UpdatePropsManager { update( viewDescriptors: SharedValue, - updates: StyleProps | AnimatedStyle + updates: StyleProps | AnimatedStyle ): void; flush(): void; } diff --git a/src/reanimated2/animation/commonTypes.ts b/src/reanimated2/animation/commonTypes.ts index 4262907864b..d2aecfc3412 100644 --- a/src/reanimated2/animation/commonTypes.ts +++ b/src/reanimated2/animation/commonTypes.ts @@ -1,5 +1,4 @@ import type { - AnimatedStyle, StyleProps, AnimatableValue, AnimationObject, @@ -7,6 +6,7 @@ import type { Timestamp, AnimationCallback, } from '../commonTypes'; +import type { AnimatedStyle } from '../helperTypes'; export interface HigherOrderAnimation { isHigherOrder?: boolean; @@ -40,11 +40,11 @@ export interface SequenceAnimation export interface StyleLayoutAnimation extends HigherOrderAnimation { current: StyleProps; - styleAnimations: AnimatedStyle; + styleAnimations: AnimatedStyle; onFrame: (animation: StyleLayoutAnimation, timestamp: Timestamp) => boolean; onStart: ( nextAnimation: StyleLayoutAnimation, - current: AnimatedStyle, + current: AnimatedStyle, timestamp: Timestamp, previousAnimation: StyleLayoutAnimation ) => void; diff --git a/src/reanimated2/animation/styleAnimation.ts b/src/reanimated2/animation/styleAnimation.ts index d384094a901..9729521e0cd 100644 --- a/src/reanimated2/animation/styleAnimation.ts +++ b/src/reanimated2/animation/styleAnimation.ts @@ -4,10 +4,10 @@ import type { AnimatableValue, AnimationObject, Animation, - AnimatedStyle, NestedObject, NestedObjectValues, } from '../commonTypes'; +import type { AnimatedStyle } from '../helperTypes'; import type { StyleLayoutAnimation } from './commonTypes'; import { withTiming } from './timing'; import { ColorProperties } from '../UpdateProps'; @@ -71,7 +71,7 @@ interface NestedObjectEntry { } export function withStyleAnimation( - styleAnimations: AnimatedStyle + styleAnimations: AnimatedStyle ): StyleLayoutAnimation { 'worklet'; return defineAnimation({}, () => { @@ -143,7 +143,7 @@ export function withStyleAnimation( const onStart = ( animation: StyleLayoutAnimation, - value: AnimatedStyle, + value: AnimatedStyle, now: Timestamp, previousAnimation: StyleLayoutAnimation ): void => { diff --git a/src/reanimated2/animation/util.ts b/src/reanimated2/animation/util.ts index 2ecaa0eb877..5698296a861 100644 --- a/src/reanimated2/animation/util.ts +++ b/src/reanimated2/animation/util.ts @@ -13,7 +13,6 @@ import { } from '../Colors'; import type { - AnimatedStyle, SharedValue, AnimatableValue, Animation, @@ -21,6 +20,7 @@ import type { Timestamp, AnimatableValueObject, } from '../commonTypes'; +import type { AnimatedStyle } from '../helperTypes'; import NativeReanimatedModule from '../NativeReanimated'; import { AffineMatrixFlat, @@ -37,7 +37,7 @@ import { let IN_STYLE_UPDATER = false; -export type UserUpdater = () => AnimatedStyle; +export type UserUpdater = () => AnimatedStyle; export function initialUpdaterRun(updater: () => T): T { IN_STYLE_UPDATER = true; diff --git a/src/reanimated2/commonTypes.ts b/src/reanimated2/commonTypes.ts index 80f0ba8bbb7..e4e546b989e 100644 --- a/src/reanimated2/commonTypes.ts +++ b/src/reanimated2/commonTypes.ts @@ -37,31 +37,6 @@ export interface StyleProps extends ViewStyle, TextStyle { [key: string]: any; } -export interface AnimatedStyle extends Record { - [key: string]: any; - transform?: Array< - | Record<'matrix', number[] | AnimationObject> - | Partial< - Record< - | 'perspective' - | 'scale' - | 'scaleX' - | 'scaleY' - | 'translateX' - | 'translateY', - number | AnimationObject - > - > - | Partial< - Record< - 'rotate' | 'rotateX' | 'rotateY' | 'rotateZ' | 'skewX' | 'skewY', - string | AnimationObject - > - > - | Record - >; -} - export interface SharedValue { value: T; addListener: (listenerID: number, listener: (value: T) => void) => void; diff --git a/src/reanimated2/globals.d.ts b/src/reanimated2/globals.d.ts index 5c581eef7a5..f3259e4ef3e 100644 --- a/src/reanimated2/globals.d.ts +++ b/src/reanimated2/globals.d.ts @@ -1,7 +1,6 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable no-var */ import type { - AnimatedStyle, StyleProps, MeasuredDimensions, MapperRegistry, @@ -10,6 +9,7 @@ import type { ShadowNodeWrapper, ComplexWorkletFunction, } from './commonTypes'; +import type { AnimatedStyle } from './helperTypes'; import type { FrameCallbackRegistryUI } from './frameCallback/FrameCallbackRegistryUI'; import type { NativeReanimatedModule } from './NativeReanimated/NativeReanimated'; import type { SensorContainer } from './SensorContainer'; @@ -49,7 +49,7 @@ declare global { operations: { tag: number; name: string; - updates: StyleProps | AnimatedStyle; + updates: StyleProps | AnimatedStyle; }[] ) => void) | undefined; @@ -57,7 +57,7 @@ declare global { | (( operations: { shadowNodeWrapper: ShadowNodeWrapper; - updates: StyleProps | AnimatedStyle; + updates: StyleProps | AnimatedStyle; }[] ) => void) | undefined; diff --git a/src/reanimated2/helperTypes.ts b/src/reanimated2/helperTypes.ts index 60d4bcbd484..2eba0de3018 100644 --- a/src/reanimated2/helperTypes.ts +++ b/src/reanimated2/helperTypes.ts @@ -38,6 +38,9 @@ type TransformStyleTypes = TransformsStyle['transform'] extends : never; type AnimatedTransform = AdaptTransforms[]; +/** + * @deprecated Please use `AnimatedStyle` type instead. + */ export type AnimateStyle = { [K in keyof S]: K extends 'transform' ? AnimatedTransform @@ -50,6 +53,18 @@ export type AnimateStyle = { : S[K] | SharedValue; }; +export type AnimatedStyle = { + [K in keyof S]: K extends 'transform' + ? AnimatedTransform + : S[K] extends ReadonlyArray + ? ReadonlyArray> + : S[K] extends object + ? AnimatedStyle + : S[K] extends ColorValue | undefined + ? S[K] | number + : S[K] | SharedValue; +}; + // provided types can either be their original types (like backgroundColor: pink) // or inline shared values/derived values type MaybeSharedValue = { @@ -81,12 +96,12 @@ type PickStyleProps = Pick< type StyleAnimatedProps

= { [K in keyof PickStyleProps

]: StyleProp< - AnimateStyle> + AnimatedStyle> >; }; type JustStyleAnimatedProp

= { - style?: StyleProp>>; + style?: StyleProp>>; }; type NonStyleAnimatedProps

= { diff --git a/src/reanimated2/hook/useAnimatedStyle.ts b/src/reanimated2/hook/useAnimatedStyle.ts index f129860b250..5b3c186a017 100644 --- a/src/reanimated2/hook/useAnimatedStyle.ts +++ b/src/reanimated2/hook/useAnimatedStyle.ts @@ -20,7 +20,6 @@ import type { AnimationObject, Timestamp, AdapterWorkletFunction, - AnimatedStyle, BasicWorkletFunction, BasicWorkletFunctionOptional, NestedObjectValues, @@ -33,26 +32,26 @@ import type { TextStyle, ViewStyle, } from 'react-native'; -import type { AnimateStyle } from '../helperTypes'; +import type { AnimatedStyle } from '../helperTypes'; export interface AnimatedStyleResult { viewDescriptors: ViewDescriptorsSet; - initial: AnimatedStyle; + initial: AnimatedStyle; viewsRef: ViewRefSet; - animatedStyle?: MutableRefObject; + animatedStyle?: MutableRefObject>; } interface AnimatedState { - last: AnimatedStyle; - animations: AnimatedStyle; + last: AnimatedStyle; + animations: AnimatedStyle; isAnimationRunning: boolean; isAnimationCancelled: boolean; } interface AnimationRef { initial: { - value: AnimatedStyle; - updater: () => AnimatedStyle; + value: AnimatedStyle; + updater: () => AnimatedStyle; }; remoteState: AnimatedState; viewDescriptors: ViewDescriptorsSet; @@ -60,9 +59,9 @@ interface AnimationRef { function prepareAnimation( frameTimestamp: number, - animatedProp: AnimatedStyle, - lastAnimation: AnimatedStyle, - lastValue: AnimatedStyle + animatedProp: AnimatedStyle, + lastAnimation: AnimatedStyle, + lastValue: AnimatedStyle ): void { 'worklet'; if (Array.isArray(animatedProp)) { @@ -119,10 +118,10 @@ function prepareAnimation( } function runAnimations( - animation: AnimatedStyle, + animation: AnimatedStyle, timestamp: Timestamp, key: number | string, - result: AnimatedStyle, + result: AnimatedStyle, animationsActive: SharedValue ): boolean { 'worklet'; @@ -181,7 +180,7 @@ function runAnimations( function styleUpdater( viewDescriptors: SharedValue, - updater: BasicWorkletFunction, + updater: BasicWorkletFunction>, state: AnimatedState, maybeViewRef: ViewRefSet | undefined, animationsActive: SharedValue @@ -217,7 +216,7 @@ function styleUpdater( return; } - const updates: AnimatedStyle = {}; + const updates: AnimatedStyle = {}; let allFinished = true; for (const propName in animations) { const finished = runAnimations( @@ -269,15 +268,15 @@ function styleUpdater( function jestStyleUpdater( viewDescriptors: SharedValue, - updater: BasicWorkletFunction, + updater: BasicWorkletFunction>, state: AnimatedState, maybeViewRef: ViewRefSet | undefined, animationsActive: SharedValue, - animatedStyle: MutableRefObject, + animatedStyle: MutableRefObject>, adapters: AdapterWorkletFunction[] = [] ): void { 'worklet'; - const animations: AnimatedStyle = state.animations ?? {}; + const animations: AnimatedStyle = state.animations ?? {}; const newValues = updater() ?? {}; const oldValues = state.last; @@ -307,7 +306,7 @@ function jestStyleUpdater( return; } - const updates: AnimatedStyle = {}; + const updates: AnimatedStyle = {}; let allFinished = true; Object.keys(animations).forEach((propName) => { const finished = runAnimations( @@ -401,7 +400,9 @@ function checkSharedValueUsage( } // TODO TYPESCRIPT This is a temporary type to get rid of .d.ts file. -type AnimatedStyleProp = AnimateStyle | RegisteredStyle>; +type AnimatedStyleProp = + | AnimatedStyle + | RegisteredStyle>; // TODO TYPESCRIPT This is a temporary type to get rid of .d.ts file. type useAnimatedStyleType = < @@ -411,7 +412,7 @@ type useAnimatedStyleType = < deps?: DependencyList | null ) => T; -export const useAnimatedStyle = function ( +export const useAnimatedStyle = function >( // animated style cannot be an array updater: BasicWorkletFunction ? never : T>, dependencies?: DependencyList, @@ -440,9 +441,9 @@ For more, see the docs: https://docs.swmansion.com/react-native-reanimated/docs/ : []; const adaptersHash = adapters ? buildWorkletsHash(adaptersArray) : null; const animationsActive = useSharedValue(true); - const animatedStyle: MutableRefObject = useRef( - {} - ); + const animatedStyle: MutableRefObject> = useRef< + AnimatedStyle + >({}); // build dependencies if (!dependencies) { @@ -453,7 +454,7 @@ For more, see the docs: https://docs.swmansion.com/react-native-reanimated/docs/ adaptersHash && dependencies.push(adaptersHash); if (!initRef.current) { - const initialStyle: AnimatedStyle = initialUpdaterRun(updater); + const initialStyle: AnimatedStyle = initialUpdaterRun(updater); validateAnimatedStyles(initialStyle); initRef.current = { initial: { diff --git a/src/reanimated2/hook/utils.ts b/src/reanimated2/hook/utils.ts index 23ee9130a75..b86801ed4da 100644 --- a/src/reanimated2/hook/utils.ts +++ b/src/reanimated2/hook/utils.ts @@ -2,13 +2,13 @@ import type { MutableRefObject } from 'react'; import { useEffect, useRef } from 'react'; import { processColor } from '../Colors'; import type { - AnimatedStyle, Context, NativeEvent, NestedObjectValues, WorkletFunction, AnimationObject, } from '../commonTypes'; +import type { AnimatedStyle } from '../helperTypes'; import { makeRemote } from '../core'; import { isWeb, isJest } from '../PlatformChecker'; import { colorProps } from '../UpdateProps'; @@ -156,7 +156,7 @@ export function areDependenciesEqual( return areHookInputsEqual(nextDeps, prevDeps); } -export function hasColorProps(updates: AnimatedStyle): boolean { +export function hasColorProps(updates: AnimatedStyle): boolean { const colorPropsSet = new Set(colorProps); for (const key in updates) { if (colorPropsSet.has(key)) { @@ -166,7 +166,7 @@ export function hasColorProps(updates: AnimatedStyle): boolean { return false; } -export function parseColors(updates: AnimatedStyle): void { +export function parseColors(updates: AnimatedStyle): void { 'worklet'; for (const key in updates) { if (colorProps.indexOf(key) !== -1) { @@ -209,7 +209,7 @@ export function shallowEqual(a: any, b: any) { return true; } -export const validateAnimatedStyles = (styles: AnimatedStyle): void => { +export const validateAnimatedStyles = (styles: AnimatedStyle): void => { 'worklet'; if (typeof styles !== 'object') { throw new Error( diff --git a/src/reanimated2/js-reanimated/index.ts b/src/reanimated2/js-reanimated/index.ts index a0e6d43b4d8..b223bf0ac71 100644 --- a/src/reanimated2/js-reanimated/index.ts +++ b/src/reanimated2/js-reanimated/index.ts @@ -1,5 +1,6 @@ import JSReanimated from './JSReanimated'; -import type { AnimatedStyle, StyleProps } from '../commonTypes'; +import type { StyleProps } from '../commonTypes'; +import type { AnimatedStyle } from '../helperTypes'; import { isWeb } from '../PlatformChecker'; // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -47,13 +48,13 @@ interface JSReanimatedComponent { } export const _updatePropsJS = ( - updates: StyleProps | AnimatedStyle, + updates: StyleProps | AnimatedStyle, viewRef: { _component?: JSReanimatedComponent } ): void => { if (viewRef._component) { const component = viewRef._component; const [rawStyles] = Object.keys(updates).reduce( - (acc: [StyleProps, AnimatedStyle], key) => { + (acc: [StyleProps, AnimatedStyle], key) => { const value = updates[key]; const index = typeof value === 'function' ? 1 : 0; acc[index][key] = value; From 66e99a39416efcfe6647c1ec41a1886bfdc6cf25 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomasz=20=C5=BBelawski?= Date: Mon, 31 Jul 2023 13:55:28 +0200 Subject: [PATCH 3/7] remove code duplication --- src/reanimated2/helperTypes.ts | 12 +----------- 1 file changed, 1 insertion(+), 11 deletions(-) diff --git a/src/reanimated2/helperTypes.ts b/src/reanimated2/helperTypes.ts index b3760f64133..c20444aec83 100644 --- a/src/reanimated2/helperTypes.ts +++ b/src/reanimated2/helperTypes.ts @@ -53,17 +53,7 @@ export type AnimateStyle = { : S[K] | SharedValue; }; -export type AnimatedStyle = { - [K in keyof S]: K extends 'transform' - ? AnimatedTransform - : S[K] extends ReadonlyArray - ? ReadonlyArray> - : S[K] extends object - ? AnimatedStyle - : S[K] extends ColorValue | undefined - ? S[K] | number - : S[K] | SharedValue; -}; +export type AnimatedStyle = AnimateStyle; // provided types can either be their original types (like backgroundColor: pink) // or inline shared values/derived values From 2cb9e461c56b431474374de419d5ea711f93ecf3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomasz=20=C5=BBelawski?= Date: Mon, 31 Jul 2023 16:17:38 +0200 Subject: [PATCH 4/7] deprecate Types in Animated namespace --- src/Animated.ts | 76 +++++++++++++++++-- src/reanimated2/Easing.ts | 26 +++++-- src/reanimated2/animation/timing.ts | 6 +- src/reanimated2/helperTypes.ts | 21 ----- .../ComplexAnimationBuilder.ts | 8 +- .../animationBuilder/Keyframe.ts | 6 +- .../animationBuilder/commonTypes.ts | 6 +- .../defaultTransitions/CurvedTransition.ts | 26 +++---- 8 files changed, 114 insertions(+), 61 deletions(-) diff --git a/src/Animated.ts b/src/Animated.ts index f597cb52473..f8e998a806e 100644 --- a/src/Animated.ts +++ b/src/Animated.ts @@ -1,13 +1,77 @@ -export { default as createAnimatedComponent } from './createAnimatedComponent'; -export { - addWhitelistedNativeProps, - addWhitelistedUIProps, +import type { Extrapolate as _Extrapolate } from './reanimated2/interpolateColor'; +import type { SharedValue as _SharedValue } from './reanimated2/commonTypes'; +import type { DerivedValue as _DerivedValue } from './reanimated2/hook/useDerivedValue'; +import type { + TransformStyleTypes as _TransformStyleTypes, + Adaptable as _Adaptable, + AdaptTransforms as _AdaptTransforms, + AnimatedTransform as _AnimatedTransform, + AnimateStyle as _AnimateStyle, + StylesOrDefault as _StylesOrDefault, + AnimateProps as _AnimateProps, +} from './reanimated2/helperTypes'; +import type { EasingFunction as _EasingFunction } from './reanimated2/Easing'; +import { + addWhitelistedNativeProps as _addWhitelistedNativeProps, + addWhitelistedUIProps as _addWhitelistedUIProps, } from './ConfigHelper'; +export { default as createAnimatedComponent } from './createAnimatedComponent'; export { AnimatedText as Text } from './reanimated2/component/Text'; export { AnimatedView as View } from './reanimated2/component/View'; export { AnimatedScrollView as ScrollView } from './reanimated2/component/ScrollView'; export { AnimatedImage as Image } from './reanimated2/component/Image'; export { ReanimatedFlatList as FlatList } from './reanimated2/component/FlatList'; -export type { SharedValue } from './reanimated2/commonTypes'; -export type { AnimatedStyle, AnimateStyle } from './reanimated2/helperTypes'; +/** + * @deprecated Please import `Extrapolate` directly from `react-native-reanimated` instead of `Animated` namespace. + */ +export type Extrapolate = typeof _Extrapolate; +/** + * @deprecated Please import `SharedValue` directly from `react-native-reanimated` instead of `Animated` namespace. + */ + +export type SharedValue = _SharedValue; +/** + * @deprecated Please import `DerivedValue` directly from `react-native-reanimated` instead of `Animated` namespace. + */ +export type DerivedValue = _DerivedValue; +/** + * @deprecated Please import `Adaptable` directly from `react-native-reanimated` instead of `Animated` namespace. + */ +export type Adaptable = _Adaptable; +/** + * @deprecated Please import `TransformStyleTypes` directly from `react-native-reanimated` instead of `Animated` namespace. + * */ +export type TransformStyleTypes = _TransformStyleTypes; +/** + * @deprecated Please import `AdaptTransforms` directly from `react-native-reanimated` instead of `Animated` namespace. + * */ +export type AdaptTransforms = _AdaptTransforms; +/** + * @deprecated Please import `AnimatedTransform` directly from `react-native-reanimated` instead of `Animated` namespace. + */ +export type AnimatedTransform = _AnimatedTransform; +/** + * @deprecated Please import `AnimateStyle` directly from `react-native-reanimated` instead of `Animated` namespace. + * */ +export type AnimateStyle = _AnimateStyle; +/** + * @deprecated Please import `StylesOrDefault` directly from `react-native-reanimated` instead of `Animated` namespace. + * */ +export type StylesOrDefault = _StylesOrDefault; +/** + * @deprecated Please import `AnimateProps` directly from `react-native-reanimated` instead of `Animated` namespace. + * */ +export type AnimateProps

= _AnimateProps

; +/** + * @deprecated Please import `EasingFunction` directly from `react-native-reanimated` instead of `Animated` namespace. + * */ +export type EasingFunction = _EasingFunction; +/** + * @deprecated Please import `addWhitelistedNativeProps` directly from `react-native-reanimated` instead of `Animated` namespace. + * */ +export const addWhitelistedNativeProps = _addWhitelistedNativeProps; +/** + * @deprecated Please import `addWhitelistedUIProps` directly from `react-native-reanimated` instead of `Animated` namespace. + * */ +export const addWhitelistedUIProps = _addWhitelistedUIProps; diff --git a/src/reanimated2/Easing.ts b/src/reanimated2/Easing.ts index 754fa12c4fa..cf8f9348305 100644 --- a/src/reanimated2/Easing.ts +++ b/src/reanimated2/Easing.ts @@ -46,9 +46,19 @@ import { Bezier } from './Bezier'; * - [`out`](docs/easing.html#out) runs an easing function backwards */ -export type EasingFn = (t: number) => number; +export type EasingFunction = (t: number) => number; -export type EasingFactoryFn = { factory: () => EasingFn }; +/** + * @deprecated Please use `EasingFunction` type instead. + */ +export type EasingFn = EasingFunction; + +export type EasingFunctionFactory = { factory: () => EasingFunction }; + +/** + * @deprecated Please use `EasingFunctionFactory` type instead. + */ +export type EasingFactoryFn = EasingFunctionFactory; /** * A linear function, `f(t) = t`. Position correlates to elapsed time one to * one. @@ -99,7 +109,7 @@ function cubic(t: number): number { * n = 4: http://easings.net/#easeInQuart * n = 5: http://easings.net/#easeInQuint */ -function poly(n: number): EasingFn { +function poly(n: number): EasingFunction { 'worklet'; return (t) => { 'worklet'; @@ -147,7 +157,7 @@ function exp(t: number): number { * * http://easings.net/#easeInElastic */ -function elastic(bounciness = 1): EasingFn { +function elastic(bounciness = 1): EasingFunction { 'worklet'; const p = bounciness * Math.PI; return (t) => { @@ -232,7 +242,7 @@ function bezierFn( /** * Runs an easing function forwards. */ -function in_(easing: EasingFn): EasingFn { +function in_(easing: EasingFunction): EasingFunction { 'worklet'; return easing; } @@ -240,7 +250,7 @@ function in_(easing: EasingFn): EasingFn { /** * Runs an easing function backwards. */ -function out(easing: EasingFn): EasingFn { +function out(easing: EasingFunction): EasingFunction { 'worklet'; return (t) => { 'worklet'; @@ -253,7 +263,7 @@ function out(easing: EasingFn): EasingFn { * forwards for half of the duration, then backwards for the rest of the * duration. */ -function inOut(easing: EasingFn): EasingFn { +function inOut(easing: EasingFunction): EasingFunction { 'worklet'; return (t) => { 'worklet'; @@ -270,7 +280,7 @@ function inOut(easing: EasingFn): EasingFn { * steps in the animation, and the `roundToNextStep` parameter determines whether the animation * should start at the beginning or end of each step. */ -function steps(n = 10, roundToNextStep = true): EasingFn { +function steps(n = 10, roundToNextStep = true): EasingFunction { 'worklet'; return (t) => { 'worklet'; diff --git a/src/reanimated2/animation/timing.ts b/src/reanimated2/animation/timing.ts index a62ae1ff649..878a3baa7c9 100644 --- a/src/reanimated2/animation/timing.ts +++ b/src/reanimated2/animation/timing.ts @@ -1,4 +1,4 @@ -import type { EasingFn, EasingFactoryFn } from '../Easing'; +import type { EasingFunction, EasingFunctionFactory } from '../Easing'; import { Easing } from '../Easing'; import { defineAnimation } from './util'; import type { @@ -10,14 +10,14 @@ import type { interface TimingConfig { duration?: number; - easing?: EasingFn | EasingFactoryFn; + easing?: EasingFunction | EasingFunctionFactory; } export type WithTimingConfig = TimingConfig; export interface TimingAnimation extends Animation { type: string; - easing: EasingFn; + easing: EasingFunction; startValue: AnimatableValue; startTime: Timestamp; progress: number; diff --git a/src/reanimated2/helperTypes.ts b/src/reanimated2/helperTypes.ts index d278701afd8..258cdfacb4b 100644 --- a/src/reanimated2/helperTypes.ts +++ b/src/reanimated2/helperTypes.ts @@ -15,13 +15,9 @@ import type { import type { AnimatableValue, BaseAnimationBuilder, - EasingFactoryFn, - EasingFn, EntryExitAnimationFunction, LayoutAnimationFunction, SharedValue, - Value3D, - ValueRotation, } from '.'; import type { ReanimatedKeyframe } from './layoutReanimation/animationBuilder/Keyframe'; import type { SharedTransition } from './layoutReanimation/sharedTransitions'; @@ -150,20 +146,3 @@ export type useAnimatedPropsType = ( | AnimatedPropsAdapterFunction[] | null ) => Partial; - -// should one of them be deprecated? -export type EasingFunction = EasingFn; -export type EasingFunctionFactory = EasingFactoryFn; - -// deprecated? -export type SensorValue3D = SharedValue; - -// deprecated? -export type SensorValueRotation = SharedValue; - -// deprecated? -export interface InterpolatedNode { - __nodeId: number; -} - -// diff --git a/src/reanimated2/layoutReanimation/animationBuilder/ComplexAnimationBuilder.ts b/src/reanimated2/layoutReanimation/animationBuilder/ComplexAnimationBuilder.ts index 62fdb857e47..31dd48572a0 100644 --- a/src/reanimated2/layoutReanimation/animationBuilder/ComplexAnimationBuilder.ts +++ b/src/reanimated2/layoutReanimation/animationBuilder/ComplexAnimationBuilder.ts @@ -4,12 +4,12 @@ import type { BaseBuilderAnimationConfig, LayoutAnimationAndConfig, } from './commonTypes'; -import type { EasingFn } from '../../Easing'; +import type { EasingFunction } from '../../Easing'; import { BaseAnimationBuilder } from './BaseAnimationBuilder'; import type { StyleProps } from '../../commonTypes'; export class ComplexAnimationBuilder extends BaseAnimationBuilder { - easingV?: EasingFn; + easingV?: EasingFunction; rotateV?: string; type?: AnimationFunction; dampingV?: number; @@ -27,13 +27,13 @@ export class ComplexAnimationBuilder extends BaseAnimationBuilder { static easing( this: T, - easingFunction: EasingFn + easingFunction: EasingFunction ) { const instance = this.createInstance(); return instance.easing(easingFunction); } - easing(easingFunction: EasingFn): this { + easing(easingFunction: EasingFunction): this { this.easingV = easingFunction; return this; } diff --git a/src/reanimated2/layoutReanimation/animationBuilder/Keyframe.ts b/src/reanimated2/layoutReanimation/animationBuilder/Keyframe.ts index ed79d6ddd8d..0131e427e6b 100644 --- a/src/reanimated2/layoutReanimation/animationBuilder/Keyframe.ts +++ b/src/reanimated2/layoutReanimation/animationBuilder/Keyframe.ts @@ -1,4 +1,4 @@ -import type { EasingFn } from '../../Easing'; +import type { EasingFunction } from '../../Easing'; import { Easing } from '../../Easing'; import { withDelay, withSequence, withTiming } from '../../animation'; import type { @@ -11,7 +11,7 @@ import type { TransformProperty, StyleProps } from '../../commonTypes'; interface KeyframePoint { duration: number; value: number | string; - easing?: EasingFn; + easing?: EasingFunction; } interface ParsedKeyframesDefinition { initialValues: StyleProps; @@ -113,7 +113,7 @@ class InnerKeyframe implements IEntryExitAnimationBuilder { key: string; value: string | number; currentKeyPoint: number; - easing?: EasingFn; + easing?: EasingFunction; }): void => { if (!(key in parsedKeyframes)) { throw Error( diff --git a/src/reanimated2/layoutReanimation/animationBuilder/commonTypes.ts b/src/reanimated2/layoutReanimation/animationBuilder/commonTypes.ts index c203a135948..6da71bf4d1a 100644 --- a/src/reanimated2/layoutReanimation/animationBuilder/commonTypes.ts +++ b/src/reanimated2/layoutReanimation/animationBuilder/commonTypes.ts @@ -1,8 +1,8 @@ -import type { EasingFn } from '../../Easing'; +import type { EasingFunction } from '../../Easing'; import type { StyleProps } from '../../commonTypes'; export interface KeyframeProps extends StyleProps { - easing?: EasingFn; + easing?: EasingFunction; [key: string]: any; } @@ -96,7 +96,7 @@ export interface ILayoutAnimationBuilder { export interface BaseLayoutAnimationConfig { duration?: number; - easing?: EasingFn; + easing?: EasingFunction; type?: AnimationFunction; damping?: number; dampingRatio?: number; diff --git a/src/reanimated2/layoutReanimation/defaultTransitions/CurvedTransition.ts b/src/reanimated2/layoutReanimation/defaultTransitions/CurvedTransition.ts index 18ab0e52ada..64ea6891cfa 100644 --- a/src/reanimated2/layoutReanimation/defaultTransitions/CurvedTransition.ts +++ b/src/reanimated2/layoutReanimation/defaultTransitions/CurvedTransition.ts @@ -3,7 +3,7 @@ import type { LayoutAnimationFunction, } from '../animationBuilder/commonTypes'; import { BaseAnimationBuilder } from '../animationBuilder'; -import type { EasingFn } from '../../Easing'; +import type { EasingFunction } from '../../Easing'; import { Easing } from '../../Easing'; import { withTiming } from '../../animation'; @@ -11,10 +11,10 @@ export class CurvedTransition extends BaseAnimationBuilder implements ILayoutAnimationBuilder { - easingXV: EasingFn = Easing.in(Easing.ease); - easingYV: EasingFn = Easing.out(Easing.ease); - easingWidthV: EasingFn = Easing.in(Easing.exp); - easingHeightV: EasingFn = Easing.out(Easing.exp); + easingXV: EasingFunction = Easing.in(Easing.ease); + easingYV: EasingFunction = Easing.out(Easing.ease); + easingWidthV: EasingFunction = Easing.in(Easing.exp); + easingHeightV: EasingFunction = Easing.out(Easing.exp); static createInstance( this: T @@ -22,42 +22,42 @@ export class CurvedTransition return new CurvedTransition() as InstanceType; } - static easingX(easing: EasingFn): CurvedTransition { + static easingX(easing: EasingFunction): CurvedTransition { const instance = this.createInstance(); return instance.easingX(easing); } - easingX(easing: EasingFn): CurvedTransition { + easingX(easing: EasingFunction): CurvedTransition { this.easingXV = easing; return this; } - static easingY(easing: EasingFn): CurvedTransition { + static easingY(easing: EasingFunction): CurvedTransition { const instance = this.createInstance(); return instance.easingY(easing); } - easingY(easing: EasingFn): CurvedTransition { + easingY(easing: EasingFunction): CurvedTransition { this.easingYV = easing; return this; } - static easingWidth(easing: EasingFn): CurvedTransition { + static easingWidth(easing: EasingFunction): CurvedTransition { const instance = this.createInstance(); return instance.easingWidth(easing); } - easingWidth(easing: EasingFn): CurvedTransition { + easingWidth(easing: EasingFunction): CurvedTransition { this.easingWidthV = easing; return this; } - static easingHeight(easing: EasingFn): CurvedTransition { + static easingHeight(easing: EasingFunction): CurvedTransition { const instance = this.createInstance(); return instance.easingHeight(easing); } - easingHeight(easing: EasingFn): CurvedTransition { + easingHeight(easing: EasingFunction): CurvedTransition { this.easingHeightV = easing; return this; } From 3a960952b6c9e7e5f01813d9300b952cc0222af4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomasz=20=C5=BBelawski?= Date: Mon, 31 Jul 2023 16:54:12 +0200 Subject: [PATCH 5/7] self-review --- src/reanimated2/hook/useAnimatedStyle.ts | 4 +--- src/reanimated2/js-reanimated/index.ts | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/reanimated2/hook/useAnimatedStyle.ts b/src/reanimated2/hook/useAnimatedStyle.ts index 1ec394ea93c..4e49723fb8a 100644 --- a/src/reanimated2/hook/useAnimatedStyle.ts +++ b/src/reanimated2/hook/useAnimatedStyle.ts @@ -399,9 +399,7 @@ function checkSharedValueUsage( } } -/** - * @deprecated should be deprecated? - */ +// What is this type??? export type AnimatedStyleProp = | AnimatedStyle | RegisteredStyle>; diff --git a/src/reanimated2/js-reanimated/index.ts b/src/reanimated2/js-reanimated/index.ts index dcc3a11c9d1..b223bf0ac71 100644 --- a/src/reanimated2/js-reanimated/index.ts +++ b/src/reanimated2/js-reanimated/index.ts @@ -1,7 +1,7 @@ import JSReanimated from './JSReanimated'; import type { StyleProps } from '../commonTypes'; -import { isWeb } from '../PlatformChecker'; import type { AnimatedStyle } from '../helperTypes'; +import { isWeb } from '../PlatformChecker'; // eslint-disable-next-line @typescript-eslint/no-explicit-any let createReactDOMStyle: (style: any) => any; From e2207066a4d5b13de72829b5f976ca277ba32df0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomasz=20=C5=BBelawski?= Date: Fri, 4 Aug 2023 10:41:20 +0200 Subject: [PATCH 6/7] add list types to Animated --- src/Animated.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/Animated.ts b/src/Animated.ts index f8e998a806e..2be1167c273 100644 --- a/src/Animated.ts +++ b/src/Animated.ts @@ -15,6 +15,8 @@ import { addWhitelistedNativeProps as _addWhitelistedNativeProps, addWhitelistedUIProps as _addWhitelistedUIProps, } from './ConfigHelper'; +import type { AnimatedScrollViewProps as _AnimatedScrollViewProps } from './reanimated2/component/ScrollView'; +import type { FlatListPropsWithLayout as _FlatListPropsWithLayout } from './reanimated2/component/FlatList'; export { default as createAnimatedComponent } from './createAnimatedComponent'; export { AnimatedText as Text } from './reanimated2/component/Text'; @@ -75,3 +77,11 @@ export const addWhitelistedNativeProps = _addWhitelistedNativeProps; * @deprecated Please import `addWhitelistedUIProps` directly from `react-native-reanimated` instead of `Animated` namespace. * */ export const addWhitelistedUIProps = _addWhitelistedUIProps; +/** + * @deprecated Please import `AnimatedScrollViewProps` directly from `react-native-reanimated` instead of `Animated` namespace. + * */ +export type AnimatedScrollViewProps = _AnimatedScrollViewProps; +/** + * @deprecated Please import `FlatListPropsWithLayout` directly from `react-native-reanimated` instead of `Animated` namespace. + * */ +export type FlatListPropsWithLayout = _FlatListPropsWithLayout; From 1c00f11f9c9eddf8cde597ce049cb57437d0cc3e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tomasz=20=C5=BBelawski?= Date: Fri, 4 Aug 2023 11:22:52 +0200 Subject: [PATCH 7/7] change comment on `AnimatedStyleProp` --- src/reanimated2/hook/useAnimatedStyle.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/reanimated2/hook/useAnimatedStyle.ts b/src/reanimated2/hook/useAnimatedStyle.ts index 6dbd4bb0f83..d3bc0032712 100644 --- a/src/reanimated2/hook/useAnimatedStyle.ts +++ b/src/reanimated2/hook/useAnimatedStyle.ts @@ -399,8 +399,7 @@ function checkSharedValueUsage( } } -// What is this type??? -// Well we exported it before so let's keep it for now. +// This type is kept for backward compatibility. export type AnimatedStyleProp = | AnimatedStyle | RegisteredStyle>;