1 |
|
2 |
|
3 |
|
4 | declare module 'react-native-reanimated' {
|
5 | import { ComponentClass, ReactNode, Component } from 'react';
|
6 | import {
|
7 | ViewProps,
|
8 | TextProps,
|
9 | ImageProps,
|
10 | ScrollViewProps,
|
11 | StyleProp,
|
12 | ViewStyle,
|
13 | TextStyle,
|
14 | ImageStyle,
|
15 | TransformsStyle,
|
16 | View as ReactNativeView,
|
17 | Text as ReactNativeText,
|
18 | Image as ReactNativeImage,
|
19 | ScrollView as ReactNativeScrollView
|
20 | } from 'react-native';
|
21 | namespace Animated {
|
22 | type Nullable<T> = T | null | undefined;
|
23 |
|
24 | class AnimatedNode<T> {
|
25 | constructor(
|
26 | nodeConfig: object,
|
27 | inputNodes?: ReadonlyArray<AnimatedNode<any>>,
|
28 | );
|
29 | isNativelyInitialized(): boolean;
|
30 | /**
|
31 | * ' __value' is not available at runtime on AnimatedNode<T>. It is
|
32 | * necessary to have some discriminating property on a type to know that
|
33 | * an AnimatedNode<number> and AnimatedNode<string> are not compatible types.
|
34 | */
|
35 | ' __value': T;
|
36 | }
|
37 |
|
38 | class AnimatedClock extends AnimatedNode<number> {
|
39 | constructor();
|
40 | }
|
41 |
|
42 | export enum Extrapolate {
|
43 | EXTEND = 'extend',
|
44 | CLAMP = 'clamp',
|
45 | IDENTITY = 'identity',
|
46 | }
|
47 |
|
48 | interface InterpolationConfig {
|
49 | inputRange: ReadonlyArray<Adaptable<number>>;
|
50 | outputRange: ReadonlyArray<Adaptable<number>>;
|
51 | extrapolate?: Extrapolate;
|
52 | extrapolateLeft?: Extrapolate;
|
53 | extrapolateRight?: Extrapolate;
|
54 | }
|
55 | type Value = string | number | boolean;
|
56 | class AnimatedValue<T extends Value> extends AnimatedNode<T> {
|
57 | constructor(value?: T);
|
58 |
|
59 | setValue(value: Adaptable<T>): void;
|
60 |
|
61 | interpolate(config: InterpolationConfig): AnimatedNode<number>;
|
62 | }
|
63 |
|
64 | export type Mapping = { [key: string]: Mapping } | Adaptable<any>;
|
65 | export type Adaptable<T> =
|
66 | | T
|
67 | | AnimatedNode<T>
|
68 | | ReadonlyArray<T | AnimatedNode<T> | ReadonlyArray<T | AnimatedNode<T>>>;
|
69 | type BinaryOperator<T = number> = (
|
70 | left: Adaptable<number>,
|
71 | right: Adaptable<number>
|
72 | ) => AnimatedNode<T>;
|
73 | type UnaryOperator = (value: Adaptable<number>) => AnimatedNode<number>;
|
74 | type MultiOperator<T = number> = (
|
75 | a: Adaptable<number>,
|
76 | b: Adaptable<number>,
|
77 | ...others: Adaptable<number>[]
|
78 | ) => AnimatedNode<T>;
|
79 |
|
80 | export interface AnimationState {
|
81 | finished: AnimatedValue<number>;
|
82 | position: AnimatedValue<number>;
|
83 | time: AnimatedValue<number>;
|
84 | }
|
85 |
|
86 | export interface PhysicsAnimationState extends AnimationState {
|
87 | velocity: AnimatedValue<number>;
|
88 | }
|
89 |
|
90 | export type DecayState = PhysicsAnimationState;
|
91 |
|
92 | export interface DecayConfig {
|
93 | deceleration: Adaptable<number>;
|
94 | }
|
95 | export interface BackwardCompatibleWrapper {
|
96 | start: (callback?: (data: { finished: boolean }) => any) => void;
|
97 | stop: () => void;
|
98 | }
|
99 |
|
100 | export interface TimingState extends AnimationState {
|
101 | frameTime: AnimatedValue<number>;
|
102 | }
|
103 | export type EasingFunction = (value: Adaptable<number>) => AnimatedNode<number>;
|
104 | export interface TimingConfig {
|
105 | toValue: Adaptable<number>;
|
106 | duration: Adaptable<number>;
|
107 | easing: EasingFunction;
|
108 | }
|
109 |
|
110 | export type SpringState = PhysicsAnimationState;
|
111 |
|
112 | export interface SpringConfig {
|
113 | damping: Adaptable<number>;
|
114 | mass: Adaptable<number>;
|
115 | stiffness: Adaptable<number>;
|
116 | overshootClamping: Adaptable<number> | boolean;
|
117 | restSpeedThreshold: Adaptable<number>;
|
118 | restDisplacementThreshold: Adaptable<number>;
|
119 | toValue: Adaptable<number>;
|
120 | }
|
121 |
|
122 | interface SpringConfigWithOrigamiTensionAndFriction {
|
123 | tension: Adaptable<number>;
|
124 | mass: Adaptable<number>;
|
125 | friction: Adaptable<number>;
|
126 | overshootClamping: Adaptable<number> | boolean;
|
127 | restSpeedThreshold: Adaptable<number>;
|
128 | restDisplacementThreshold: Adaptable<number>;
|
129 | toValue: Adaptable<number>;
|
130 | }
|
131 |
|
132 | interface SpringConfigWithBouncinessAndSpeed {
|
133 | bounciness: Adaptable<number>;
|
134 | mass: Adaptable<number>;
|
135 | speed: Adaptable<number>;
|
136 | overshootClamping: Adaptable<number> | boolean;
|
137 | restSpeedThreshold: Adaptable<number>;
|
138 | restDisplacementThreshold: Adaptable<number>;
|
139 | toValue: Adaptable<number>;
|
140 | }
|
141 |
|
142 | type SpringUtils = {
|
143 | makeDefaultConfig: () => SpringConfig;
|
144 | makeConfigFromBouncinessAndSpeed: (prevConfig: SpringConfigWithBouncinessAndSpeed) => SpringConfig;
|
145 | makeConfigFromOrigamiTensionAndFriction: (prevConfig: SpringConfigWithOrigamiTensionAndFriction) => SpringConfig
|
146 | }
|
147 |
|
148 | export const SpringUtils: SpringUtils
|
149 |
|
150 | export type TransformStyleTypes = TransformsStyle['transform'] extends (readonly (infer T)[] | undefined) ? T : never
|
151 | export type AdaptTransforms<T> = { [P in keyof T]: Adaptable<T[P] extends string ? number | string : T[P]> }
|
152 | export type AnimatedTransform = (AdaptTransforms<TransformStyleTypes>)[]
|
153 |
|
154 | export type AnimateStyle<S extends object> = {
|
155 | [K in keyof S]: K extends 'transform' ? AnimatedTransform : (S[K] extends ReadonlyArray<any>
|
156 | ? ReadonlyArray<AnimateStyle<S[K][0]>>
|
157 | : S[K] extends object
|
158 | ? AnimateStyle<S[K]>
|
159 | :
|
160 | | S[K]
|
161 | | AnimatedNode<
|
162 |
|
163 | S[K] extends (string | undefined) ? S[K] | number : S[K]
|
164 | >)
|
165 | };
|
166 |
|
167 | export type AnimateProps<
|
168 | S extends object,
|
169 | P extends {
|
170 | style?: StyleProp<S>;
|
171 | }
|
172 | > = {
|
173 | [K in keyof P]: K extends 'style'
|
174 | ? StyleProp<AnimateStyle<S>>
|
175 | : P[K] | AnimatedNode<P[K]>
|
176 | };
|
177 |
|
178 | type CodeProps = {
|
179 | exec?: AnimatedNode<number>
|
180 | children?: () => AnimatedNode<number>
|
181 | };
|
182 |
|
183 |
|
184 | export class View extends Component<AnimateProps<ViewStyle, ViewProps>> {
|
185 | getNode(): ReactNativeView;
|
186 | }
|
187 | export class Text extends Component<AnimateProps<TextStyle, TextProps>> {
|
188 | getNode(): ReactNativeText;
|
189 | }
|
190 | export class Image extends Component<
|
191 | AnimateProps<ImageStyle, ImageProps>
|
192 | > {
|
193 | getNode(): ReactNativeImage;
|
194 | }
|
195 | export class ScrollView extends Component<
|
196 | AnimateProps<ViewStyle, ScrollViewProps>
|
197 | > {
|
198 | getNode(): ReactNativeScrollView;
|
199 | }
|
200 | export class Code extends Component<CodeProps> {}
|
201 | export function createAnimatedComponent(component: any): any;
|
202 |
|
203 |
|
204 | export {
|
205 | AnimatedClock as Clock,
|
206 | AnimatedNode as Node,
|
207 | AnimatedValue as Value,
|
208 | };
|
209 |
|
210 |
|
211 | export const add: MultiOperator;
|
212 | export const sub: MultiOperator;
|
213 | export const multiply: MultiOperator;
|
214 | export const divide: MultiOperator;
|
215 | export const pow: MultiOperator;
|
216 | export const modulo: MultiOperator;
|
217 | export const sqrt: UnaryOperator;
|
218 | export const log: UnaryOperator;
|
219 | export const sin: UnaryOperator;
|
220 | export const cos: UnaryOperator;
|
221 | export const tan: UnaryOperator;
|
222 | export const acos: UnaryOperator;
|
223 | export const asin: UnaryOperator;
|
224 | export const atan: UnaryOperator;
|
225 | export const exp: UnaryOperator;
|
226 | export const round: UnaryOperator;
|
227 | export const floor: UnaryOperator;
|
228 | export const ceil: UnaryOperator;
|
229 | export const lessThan: BinaryOperator<0 | 1>;
|
230 | export const eq: BinaryOperator<0 | 1>;
|
231 | export const greaterThan: BinaryOperator<0 | 1>;
|
232 | export const lessOrEq: BinaryOperator<0 | 1>;
|
233 | export const greaterOrEq: BinaryOperator<0 | 1>;
|
234 | export const neq: BinaryOperator<0 | 1>;
|
235 | export const and: MultiOperator<0 | 1>;
|
236 | export const or: MultiOperator<0 | 1>;
|
237 | export function proc<T extends (Adaptable<Value> | undefined)[]>(
|
238 | func: (...args: T) => AnimatedNode<number>
|
239 | ): typeof func;
|
240 | export function defined(value: Adaptable<any>): AnimatedNode<0 | 1>;
|
241 | export function not(value: Adaptable<any>): AnimatedNode<0 | 1>;
|
242 | export function set<T extends Value>(
|
243 | valueToBeUpdated: AnimatedValue<T>,
|
244 | sourceNode: Adaptable<T>,
|
245 | ): AnimatedNode<T>;
|
246 | export function concat(
|
247 | ...args: Array<Adaptable<string> | Adaptable<number>>,
|
248 | ): AnimatedNode<string>;
|
249 | export function cond<T1 extends Value = number, T2 extends Value = number>(
|
250 | conditionNode: Adaptable<number>,
|
251 | ifNode: Adaptable<T1>,
|
252 | elseNode?: Adaptable<T2>,
|
253 | ): AnimatedNode<T1 | T2>;
|
254 | export function block<T1 extends Value = number, T2 extends Value = any>(
|
255 | items: ReadonlyArray<Adaptable<T2>>,
|
256 | ): AnimatedNode<T1>;
|
257 | export function call<T>(
|
258 | args: ReadonlyArray<T | AnimatedNode<T>>,
|
259 | callback: (args: ReadonlyArray<T>) => void,
|
260 | ): AnimatedNode<0>;
|
261 | export function debug<T>(
|
262 | message: string,
|
263 | value: AnimatedNode<T>,
|
264 | ): AnimatedNode<T>;
|
265 | export function onChange(
|
266 | value: Adaptable<number>,
|
267 | action: Adaptable<number>,
|
268 | ): AnimatedNode<number>;
|
269 | export function startClock(clock: AnimatedClock): AnimatedNode<0>;
|
270 | export function stopClock(clock: AnimatedClock): AnimatedNode<0>;
|
271 | export function clockRunning(clock: AnimatedClock): AnimatedNode<0 | 1>;
|
272 |
|
273 |
|
274 | type EventArgFunc<T> = (arg: T) => AnimatedNode<number>;
|
275 | type EventMapping<T> = T extends object ? { [K in keyof T]?: EventMapping<T[K]> | EventArgFunc<T[K]> } : Adaptable<T> | EventArgFunc<T>;
|
276 | type EventMappingArray<T> = T extends Array<any> ? { [I in keyof T]: EventMapping<T[I]> } : [EventMapping<T>]
|
277 | export function event<T>(
|
278 | argMapping: T extends never ? ReadonlyArray<Mapping> : Readonly<EventMappingArray<T>>,
|
279 | config?: {},
|
280 | ): (...args: any[]) => void;
|
281 |
|
282 |
|
283 | export function abs(value: Adaptable<number>): AnimatedNode<number>;
|
284 | export function acc(value: Adaptable<number>): AnimatedNode<number>;
|
285 | export function color(
|
286 | r: Adaptable<number>,
|
287 | g: Adaptable<number>,
|
288 | b: Adaptable<number>,
|
289 | a?: Adaptable<number>,
|
290 | ): AnimatedNode<number>;
|
291 | export function diff(value: Adaptable<number>): AnimatedNode<number>;
|
292 | export function diffClamp(
|
293 | value: Adaptable<number>,
|
294 | minVal: Adaptable<number>,
|
295 | maxVal: Adaptable<number>,
|
296 | ): AnimatedNode<number>;
|
297 | export function interpolate(
|
298 | value: Adaptable<number>,
|
299 | config: InterpolationConfig,
|
300 | ): AnimatedNode<number>;
|
301 | export function interpolateColors(
|
302 | animationValue: Adaptable<number>,
|
303 | {
|
304 | inputRange,
|
305 | outputColorRange
|
306 | }: {
|
307 | inputRange: ReadonlyArray<Adaptable<number>>;
|
308 | outputColorRange: (string | number)[];
|
309 | }
|
310 | ): AnimatedNode<number>;
|
311 | export const max: BinaryOperator;
|
312 | export const min: BinaryOperator;
|
313 |
|
314 |
|
315 | export function decay(
|
316 | clock: AnimatedClock,
|
317 | state: DecayState,
|
318 | config: DecayConfig,
|
319 | ): AnimatedNode<number>;
|
320 | export function timing(
|
321 | clock: AnimatedClock,
|
322 | state: TimingState,
|
323 | config: TimingConfig,
|
324 | ): AnimatedNode<number>;
|
325 | export function spring(
|
326 | clock: AnimatedClock,
|
327 | state: SpringState,
|
328 | config: SpringConfig,
|
329 | ): AnimatedNode<number>;
|
330 |
|
331 | export function spring(
|
332 | node: AnimatedNode<number>,
|
333 | config: SpringConfig,
|
334 | ): BackwardCompatibleWrapper;
|
335 | export function timing(
|
336 | node: AnimatedNode<number>,
|
337 | config: TimingConfig,
|
338 | ): BackwardCompatibleWrapper;
|
339 | export function decay(
|
340 | node: AnimatedNode<number>,
|
341 | config: DecayConfig,
|
342 | ): BackwardCompatibleWrapper;
|
343 |
|
344 |
|
345 | export function useCode(
|
346 | exec: () => Nullable< AnimatedNode<number>[] | AnimatedNode<number> > | boolean,
|
347 | deps: Array<any>,
|
348 | ): void
|
349 | export function useValue<T extends Value>(
|
350 | initialValue: T
|
351 | ): AnimatedValue<T>;
|
352 |
|
353 | // configuration
|
354 | export function addWhitelistedNativeProps(props: { [key: string]: true }): void;
|
355 | export function addWhitelistedUIProps(props: { [key: string]: true }): void;
|
356 | }
|
357 |
|
358 | export default Animated;
|
359 |
|
360 | interface EasingStatic {
|
361 | linear: Animated.EasingFunction;
|
362 | ease: Animated.EasingFunction;
|
363 | quad: Animated.EasingFunction;
|
364 | cubic: Animated.EasingFunction;
|
365 | poly(n: Animated.Adaptable<number>): Animated.EasingFunction;
|
366 | sin: Animated.EasingFunction;
|
367 | circle: Animated.EasingFunction;
|
368 | exp: Animated.EasingFunction;
|
369 | elastic(bounciness?: Animated.Adaptable<number>): Animated.EasingFunction;
|
370 | back(s?: Animated.Adaptable<number>): Animated.EasingFunction;
|
371 | bounce: Animated.EasingFunction;
|
372 | bezier(
|
373 | x1: number,
|
374 | y1: number,
|
375 | x2: number,
|
376 | y2: number,
|
377 | ): Animated.EasingFunction;
|
378 | in(easing: Animated.EasingFunction): Animated.EasingFunction;
|
379 | out(easing: Animated.EasingFunction): Animated.EasingFunction;
|
380 | inOut(easing: Animated.EasingFunction): Animated.EasingFunction;
|
381 | }
|
382 | export const Easing: EasingStatic;
|
383 |
|
384 | export interface TransitioningViewProps extends ViewProps {
|
385 | transition: ReactNode;
|
386 | }
|
387 |
|
388 | export class TransitioningView extends Component<TransitioningViewProps> {
|
389 | animateNextTransition(): void;
|
390 | }
|
391 |
|
392 | export class Transitioning extends Component {
|
393 | static View: typeof TransitioningView;
|
394 | }
|
395 |
|
396 | export interface TransitionProps {
|
397 | delayMs?: number;
|
398 | durationMs?: number;
|
399 | interpolation?: 'linear' | 'easeIn' | 'easeOut' | 'easeInOut';
|
400 | propagation?: 'top' | 'bottom' | 'left' | 'right';
|
401 | }
|
402 |
|
403 | export interface TransitionInOutProps extends TransitionProps {
|
404 | type?: 'fade' | 'scale' | 'slide-top' | 'slide-bottom' | 'slide-right' | 'slide-left';
|
405 | }
|
406 |
|
407 | export class Transition extends Component {
|
408 | static In: ComponentClass<TransitionInOutProps>;
|
409 | static Out: ComponentClass<TransitionInOutProps>;
|
410 | static Change: ComponentClass<TransitionProps>;
|
411 | static Together: ComponentClass<{}>;
|
412 | static Sequence: ComponentClass<{}>;
|
413 | }
|
414 |
|
415 | export class Clock extends Animated.Clock {}
|
416 | export class Value<T extends string | number | boolean> extends Animated.Value<T> {}
|
417 | export class Node<T> extends Animated.Node<T> {}
|
418 | export const add: typeof Animated.add
|
419 | export const sub: typeof Animated.sub
|
420 | export const multiply: typeof Animated.multiply
|
421 | export const divide: typeof Animated.divide
|
422 | export const pow: typeof Animated.pow
|
423 | export const modulo: typeof Animated.modulo
|
424 | export const sqrt: typeof Animated.sqrt
|
425 | export const log: typeof Animated.log
|
426 | export const sin: typeof Animated.sin
|
427 | export const cos: typeof Animated.cos
|
428 | export const exp: typeof Animated.exp
|
429 | export const round: typeof Animated.round
|
430 | export const lessThan: typeof Animated.lessThan
|
431 | export const eq: typeof Animated.eq
|
432 | export const greaterThan: typeof Animated.greaterThan
|
433 | export const lessOrEq: typeof Animated.lessOrEq
|
434 | export const greaterOrEq: typeof Animated.greaterOrEq
|
435 | export const neq: typeof Animated.neq
|
436 | export const and: typeof Animated.and
|
437 | export const or: typeof Animated.or
|
438 | export const defined: typeof Animated.defined
|
439 | export const not: typeof Animated.not
|
440 | export const tan: typeof Animated.tan
|
441 | export const acos: typeof Animated.acos
|
442 | export const asin: typeof Animated.asin
|
443 | export const atan: typeof Animated.atan
|
444 | export const proc: typeof Animated.proc
|
445 | export const block: typeof Animated.block
|
446 | export const concat: typeof Animated.concat
|
447 | export const event: typeof Animated.event
|
448 | export const call: typeof Animated.call
|
449 | export const debug: typeof Animated.debug
|
450 | export const clockRunning: typeof Animated.clockRunning
|
451 | export const stopClock: typeof Animated.stopClock
|
452 | export const startClock: typeof Animated.startClock
|
453 | export const set: typeof Animated.set
|
454 | export const cond: typeof Animated.cond
|
455 | export const abs: typeof Animated.abs
|
456 | export const acc: typeof Animated.acc
|
457 | export const color: typeof Animated.color
|
458 | export const interpolateColors: typeof Animated.interpolateColors
|
459 | export const diff: typeof Animated.diff
|
460 | export const diffClamp: typeof Animated.diffClamp
|
461 | export const interpolate: typeof Animated.interpolate
|
462 | export const Extrapolate: typeof Animated.Extrapolate
|
463 | export const max: typeof Animated.max
|
464 | export const min: typeof Animated.min
|
465 | export const onChange: typeof Animated.onChange
|
466 | export const floor: typeof Animated.floor
|
467 | export const ceil: typeof Animated.ceil
|
468 | export const useCode: typeof Animated.useCode
|
469 | export const decay: typeof Animated.decay
|
470 | export const timing: typeof Animated.timing
|
471 | export const spring: typeof Animated.spring
|
472 | export const SpringUtils: typeof Animated.SpringUtils
|
473 | export const useValue: typeof Animated.useValue
|
474 | }
|