diff --git a/src/Animated.ts b/src/Animated.ts index f597cb52473..2be1167c273 100644 --- a/src/Animated.ts +++ b/src/Animated.ts @@ -1,13 +1,87 @@ -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'; +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'; 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; +/** + * @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; 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/decay.ts b/src/reanimated2/animation/decay.ts index 1b3194b2833..a941cc4dc3f 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/timing.ts b/src/reanimated2/animation/timing.ts index 8e00c8b67b7..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,12 +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/component/FlatList.tsx b/src/reanimated2/component/FlatList.tsx index d4f2eedab0e..d923e275295 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 7033b22f61b..c1cbabb3494 100644 --- a/src/reanimated2/helperTypes.ts +++ b/src/reanimated2/helperTypes.ts @@ -23,21 +23,24 @@ import type { ReanimatedKeyframe } from './layoutReanimation/animationBuilder/Ke 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)[] | string | undefined ? T : never; -type AnimatedTransform = AdaptTransforms[]; +export type AnimatedTransform = AdaptTransforms[]; /** * @deprecated Please use `AnimatedStyle` type instead. @@ -62,7 +65,7 @@ type MaybeSharedValue = { [K in keyof S]: S[K] | Readonly>>; }; -type StylesOrDefault = 'style' extends keyof T +export type StylesOrDefault = 'style' extends keyof T ? MaybeSharedValue : Record; 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 5b3c186a017..d3bc0032712 100644 --- a/src/reanimated2/hook/useAnimatedStyle.ts +++ b/src/reanimated2/hook/useAnimatedStyle.ts @@ -399,8 +399,8 @@ function checkSharedValueUsage( } } -// TODO TYPESCRIPT This is a temporary type to get rid of .d.ts file. -type AnimatedStyleProp = +// This type is kept for backward compatibility. +export type AnimatedStyleProp = | AnimatedStyle | RegisteredStyle>; 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/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; } 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';