react-native-reanimated

react-native-reanimated

Version 3.16.1
Published 18 days ago
3.38 MB
11 dependencies
MIT license

Install

npm i react-native-reanimated

yarn add react-native-reanimated

pnpm add react-native-reanimated

Overview

More powerful alternative to Animated library for React Native.

Index

Variables

variable dispatchCommand

let dispatchCommand: DispatchCommand;

Lets you synchronously call a command of a native component.
Parameter animatedRef
An [animated ref](https://docs.swmansion.com/react-native-reanimated/docs/core/useAnimatedRef#returns) connected to the component you'd want to call the command on.
Parameter commandName
The name of the command to dispatch (e.g. "focus" or "scrollToEnd").
Parameter args
An optional array of arguments for the command.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/advanced/dispatchCommand

variable Easing

const Easing: {
    linear: typeof linear;
    ease: typeof ease;
    quad: typeof quad;
    cubic: typeof cubic;
    poly: typeof poly;
    sin: typeof sin;
    circle: typeof circle;
    exp: typeof exp;
    elastic: typeof elastic;
    back: typeof back;
    bounce: typeof bounce;
    bezier: typeof bezier;
    bezierFn: typeof bezierFn;
    steps: typeof steps;
    in: typeof in_;
    out: typeof out;
    inOut: typeof inOut;
};

variable Extrapolate

const Extrapolate: typeof Extrapolation;

Deprecated
Please use Extrapolation instead

variable Keyframe

const Keyframe: typeof ReanimatedKeyframe;

variable Layout

const Layout: typeof LinearTransition;

Deprecated
Please use LinearTransition instead.

variable makeMutable

const makeMutable: <Value>(initial: Value) => Mutable<Value>;

variable measure

let measure: Measure;

Lets you synchronously get the dimensions and position of a view on the screen.
Parameter animatedRef
An [animated ref](https://docs.swmansion.com/react-native-reanimated/docs/core/useAnimatedRef#returns) connected to the component you'd want to get the measurements from.
Returns
An object containing component measurements or null when the measurement couldn't be performed- MeasuredDimensions.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/advanced/measure/

variable ScreenTransition

const ScreenTransition: {
    SwipeRight: AnimatedScreenTransition;
    SwipeLeft: AnimatedScreenTransition;
    SwipeDown: AnimatedScreenTransition;
    SwipeUp: AnimatedScreenTransition;
    Horizontal: AnimatedScreenTransition;
    Vertical: AnimatedScreenTransition;
    TwoDimensional: AnimatedScreenTransition;
    SwipeRightFade: AnimatedScreenTransition;
};

variable scrollTo

let scrollTo: ScrollTo;

Lets you synchronously scroll to a given position of a ScrollView.
Parameter animatedRef
An [animated ref](https://docs.swmansion.com/react-native-reanimated/docs/core/useAnimatedRef) attached to an Animated.ScrollView component.
Parameter x
The x position you want to scroll to.
Parameter y
The y position you want to scroll to.
Parameter animated
Whether the scrolling should be smooth or instant.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/scroll/scrollTo

variable setGestureState

let setGestureState: SetGestureState;

variable setNativeProps

let setNativeProps: SetNativeProps;

Lets you imperatively update component properties. You should always reach for [useAnimatedStyle](https://docs.swmansion.com/react-native-reanimated/docs/core/useAnimatedStyle) and [useAnimatedProps](https://docs.swmansion.com/react-native-reanimated/docs/core/useAnimatedProps) first when animating styles or properties.
Parameter animatedRef
An [animated ref](https://docs.swmansion.com/react-native-reanimated/docs/core/useAnimatedRef#returns) connected to the component you'd want to update.
Parameter updates
An object with properties you want to update.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/advanced/setNativeProps

variable useAnimatedProps

const useAnimatedProps: UseAnimatedProps;

Lets you create an animated props object which can be animated using shared values.
Parameter updater
A function returning an object with properties you want to animate.
Parameter dependencies
An optional array of dependencies. Only relevant when using Reanimated without the Babel plugin on the Web.
Parameter adapters
An optional function or array of functions allowing to adopt prop naming between JS and the native side.
Returns
An animated props object which has to be passed to animatedProps property of an Animated component that you want to animate.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/core/useAnimatedProps

variable useScrollViewOffset

const useScrollViewOffset: (
    animatedRef: AnimatedRef<any>,
    providedOffset?: SharedValue<number>
) => SharedValue<number>;

Lets you synchronously get the current offset of a ScrollView.
Parameter animatedRef
An [animated ref](https://docs.swmansion.com/react-native-reanimated/docs/core/useAnimatedRef) attached to an Animated.ScrollView component.
Returns
A shared value which holds the current offset of the ScrollView.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/scroll/useScrollViewOffset

variable withClamp

const withClamp: withClampType;

variable withDecay

const withDecay: withDecayType;

Lets you create animations that mimic objects in motion with friction.
Parameter config
The decay animation configuration - DecayConfig.
Parameter callback
A function called upon animation completion - AnimationCallback.
Returns
An [animation object](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animation-object) which holds the current state of the animation.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/animations/withDecay

variable withDelay

const withDelay: withDelayType;

An animation modifier that lets you start an animation with a delay.
Parameter delayMs
Duration (in milliseconds) before the animation starts.
Parameter nextAnimation
The animation to delay.
Parameter reduceMotion
Determines how the animation responds to the device's reduced motion accessibility setting. Default to ReduceMotion.System - ReduceMotion.
Returns
An [animation object](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animation-object) which holds the current state of the animation.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/animations/withDelay

variable withRepeat

const withRepeat: withRepeatType;

Lets you repeat an animation given number of times or run it indefinitely.
Parameter animation
An animation object you want to repeat.
Parameter numberOfReps
The number of times the animation is going to be repeated. Defaults to 2.
Parameter reverse
Whether the animation should run in reverse every other repetition. Defaults to false.
Parameter callback
A function called on animation complete.
Parameter reduceMotion
Determines how the animation responds to the device's reduced motion accessibility setting. Default to ReduceMotion.System - ReduceMotion.
Returns
An [animation object](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animation-object) which holds the current state of the animation.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/animations/withRepeat

variable withSpring

const withSpring: withSpringType;

Lets you create spring-based animations.
Parameter toValue
The value at which the animation will come to rest - AnimatableValue
Parameter config
The spring animation configuration - SpringConfig
Parameter callback
A function called on animation complete - AnimationCallback
Returns
An [animation object](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animation-object) which holds the current state of the animation
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/animations/withSpring

variable withTiming

const withTiming: withTimingType;

Lets you create an animation based on duration and easing.
Parameter toValue
The value on which the animation will come at rest - AnimatableValue.
Parameter config
The timing animation configuration - TimingConfig.
Parameter callback
A function called on animation complete - AnimationCallback.
Returns
An [animation object](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animation-object) which holds the current state of the animation.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/animations/withTiming

Functions

function advanceAnimationByFrame

advanceAnimationByFrame: (count: number) => void;

function advanceAnimationByTime

advanceAnimationByTime: (time?: number) => void;

function cancelAnimation

cancelAnimation: <T>(sharedValue: SharedValue<T>) => void;

Lets you cancel a running animation paired to a shared value.
Parameter sharedValue
The shared value of a running animation that you want to cancel.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/core/cancelAnimation

function clamp

clamp: (value: number, min: number, max: number) => number;

Lets you limit a value within a specified range.
Parameter value
A number that will be returned as long as the provided value is in range between min and max.
Parameter min
A number which will be returned when provided value is lower than min.
Parameter max
A number which will be returned when provided value is higher than max.
Returns
A number between min and max bounds.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/utilities/clamp/

function combineTransition

combineTransition: (
    exiting: BaseAnimationBuilder | typeof BaseAnimationBuilder,
    entering: BaseAnimationBuilder | typeof BaseAnimationBuilder
) => EntryExitTransition;

See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/layout-transitions
Deprecated
Please use EntryExitTransition.entering(entering).exiting(exiting) instead.

function configureReanimatedLogger

configureReanimatedLogger: (config: LoggerConfig) => void;

Updates Reanimated logger config with the user-provided configuration. Will affect Reanimated code executed after call to this function so it should be called before any Reanimated code is executed to take effect. Each call to this function will override the previous configuration (it's recommended to call it only once).
Parameter config
The new logger configuration to apply.

function convertToRGBA

convertToRGBA: (color: unknown) => ParsedColorArray;

function createAnimatedPropAdapter

createAnimatedPropAdapter: (
    adapter: AnimatedPropsAdapterFunction,
    nativeProps?: string[]
) => AnimatedPropsAdapterFunction;

function createWorkletRuntime

createWorkletRuntime: (name: string, initializer?: () => void) => WorkletRuntime;

Lets you create a new JS runtime which can be used to run worklets possibly on different threads than JS or UI thread.
Parameter name
A name used to identify the runtime which will appear in devices list in Chrome DevTools.
Parameter initializer
An optional worklet that will be run synchronously on the same thread immediately after the runtime is created.
Returns
WorkletRuntime which is a jsi::HostObject<reanimated::WorkletRuntime> - WorkletRuntime
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/threading/createWorkletRuntime

function defineAnimation

defineAnimation: <
    T extends StyleLayoutAnimation | AnimationObject<AnimatableValue>,
    U extends StyleLayoutAnimation | AnimationObject<AnimatableValue> = T
>(
    starting: AnimationToDecoration<T, U>,
    factory: () => T
) => T;

function enableLayoutAnimations

enableLayoutAnimations: (flag: boolean, isCallByUser?: boolean) => void;

function executeOnUIRuntimeSync

executeOnUIRuntimeSync: <Args extends unknown[], ReturnValue>(
    worklet: (...args: Args) => ReturnValue
) => (...args: Args) => ReturnValue;

function finishScreenTransition

finishScreenTransition: (screenTransitionConfig: ScreenTransitionConfig) => void;

function getAnimatedStyle

getAnimatedStyle: (component: ReactTestInstance) => DefaultStyle;

function getRelativeCoords

getRelativeCoords: (
    animatedRef: AnimatedRef<Component>,
    absoluteX: number,
    absoluteY: number
) => ComponentCoords | null;

Lets you determines the location on the screen, relative to the given view.
Parameter animatedRef
An [animated ref](https://docs.swmansion.com/react-native-reanimated/docs/core/useAnimatedRef#returns) connected to the component you'd want to get the coordinates from.
Parameter absoluteX
A number which is an absolute x coordinate.
Parameter absoluteY
A number which is an absolute y coordinate.
Returns
An object which contains relative coordinates - ComponentCoords.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/utilities/getRelativeCoords

function getUseOfValueInStyleWarning

getUseOfValueInStyleWarning: () => string;

function getViewProp

getViewProp: <T>(
    viewTag: number,
    propName: string,
    component?: React.Component
) => Promise<T>;

function interpolate

interpolate: (
    x: number,
    inputRange: readonly number[],
    outputRange: readonly number[],
    type?: ExtrapolationType
) => number;

Lets you map a value from one range to another using linear interpolation.
Parameter value
A number from the input range that is going to be mapped to the output range.
Parameter inputRange
An array of numbers specifying the input range of the interpolation.
Parameter outputRange
An array of numbers specifying the output range of the interpolation.
Parameter extrapolate
Determines what happens when the value goes beyond the input range. Defaults to Extrapolation.EXTEND - ExtrapolationType.
Returns
A mapped value within the output range.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/utilities/interpolate

function interpolateColor

interpolateColor: {
    (
        value: number,
        inputRange: readonly number[],
        outputRange: readonly string[],
        colorSpace?: 'RGB' | 'HSV',
        options?: InterpolationOptions
    ): string;
    (
        value: number,
        inputRange: readonly number[],
        outputRange: readonly number[],
        colorSpace?: 'RGB' | 'HSV',
        options?: InterpolationOptions
    ): number;
};

Lets you map a value from a range of numbers to a range of colors using linear interpolation.
Parameter value
A number from the input range that is going to be mapped to the color in the output range.
Parameter inputRange
An array of numbers specifying the input range of the interpolation.
Parameter outputRange
An array of output colors values (eg. "red", "#00FFCC", "rgba(255, 0, 0, 0.5)").
Parameter colorSpace
The color space to use for interpolation. Defaults to 'RGB'.
Parameter options
Additional options for interpolation - InterpolationOptions.
Returns
The color after interpolation from within the output range in rgba(r, g, b, a) format.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/utilities/interpolateColor

function isColor

isColor: (value: unknown) => boolean;

function isConfigured

isConfigured: () => boolean;

Returns
true in Reanimated 3, doesn't exist in Reanimated 2
Deprecated
This function was superseded by other checks. We keep it here for backward compatibility reasons. If you need to check if you are using Reanimated 3 or Reanimated 2 please use isReanimated3 function instead.

function isReanimated3

isReanimated3: () => boolean;

Returns
true in Reanimated 3, doesn't exist in Reanimated 2 or 1

function isSharedValue

isSharedValue: <T = unknown>(value: unknown) => value is SharedValue<T>;

function isWorkletFunction

isWorkletFunction: <
    Args extends unknown[] = unknown[],
    ReturnValue = unknown,
    BuildType extends WorkletBaseRelease | WorkletBaseDev = WorkletBaseDev
>(
    value: unknown
) => value is WorkletFunction<Args, ReturnValue> & BuildType;

This function allows you to determine if a given function is a worklet. It only works with Reanimated Babel plugin enabled. Unless you are doing something with internals of Reanimated you shouldn't need to use this function.
### Note
Do not call it before the worklet is declared, as it will always return false then. E.g.:
isWorkletFunction(myWorklet); // Will always return false. function myWorklet() { 'worklet'; }
### Maintainer note
This function works well on the JS thread performance-wise, since the JIT can inline it. However, on other threads it will not get optimized and we will get a function call overhead. We want to change it in the future, but it's not feasible at the moment.

function makeShareableCloneRecursive

makeShareableCloneRecursive: <T>(
    value: any,
    shouldPersistRemote?: boolean,
    depth?: number
) => ShareableRef<T>;

function PerformanceMonitor

PerformanceMonitor: ({
    smoothingFrames,
}: PerformanceMonitorProps) => React.JSX.Element;

A component that lets you measure fps values on JS and UI threads on both the Paper and Fabric architectures.
Parameter smoothingFrames
Determines amount of saved frames which will be used for fps value smoothing.

function processColor

processColor: (color: unknown) => number | null | undefined;

function ReducedMotionConfig

ReducedMotionConfig: ({ mode }: { mode: ReduceMotion }) => null;

A component that lets you overwrite default reduce motion behavior globally in your application.
Parameter mode
Determines default reduce motion behavior globally in your application. Configured with ReduceMotion enum.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/components/ReducedMotionConfig

function runOnJS

runOnJS: <Args extends unknown[], ReturnValue>(
    fun:
        | ((...args: Args) => ReturnValue)
        | RemoteFunction<Args, ReturnValue>
        | WorkletFunction<Args, ReturnValue>
) => (...args: Args) => void;

Lets you asynchronously run non-[workletized](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#to-workletize) functions that couldn't otherwise run on the [UI thread](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#ui-thread). This applies to most external libraries as they don't have their functions marked with "worklet"; directive.
Parameter fun
A reference to a function you want to execute on the JavaScript thread from the UI thread.
Returns
A function that accepts arguments for the function passed as the first argument.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/threading/runOnJS

function runOnRuntime

runOnRuntime: <Args extends unknown[], ReturnValue>(
    workletRuntime: WorkletRuntime,
    worklet: (...args: Args) => ReturnValue
) => WorkletFunction<Args, ReturnValue>;

function runOnUI

runOnUI: <Args extends unknown[], ReturnValue>(
    worklet: (...args: Args) => ReturnValue
) => (...args: Args) => void;

Lets you asynchronously run [workletized](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#to-workletize) functions on the [UI thread](https://docs.swmansion.com/react-native-reanimated/docs/threading/runOnUI).
This method does not schedule the work immediately but instead waits for other worklets to be scheduled within the same JS loop. It uses queueMicrotask to schedule all the worklets at once making sure they will run within the same frame boundaries on the UI thread.
Parameter fun
A reference to a function you want to execute on the [UI thread](https://docs.swmansion.com/react-native-reanimated/docs/threading/runOnUI) from the [JavaScript thread](https://docs.swmansion.com/react-native-reanimated/docs/threading/runOnUI).
Returns
A function that accepts arguments for the function passed as the first argument.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/threading/runOnUI

function setUpTests

setUpTests: (userFramerateConfig?: {}) => void;

function startMapper

startMapper: (
    worklet: () => void,
    inputs?: MapperRawInputs,
    outputs?: MapperOutputs
) => number;

function startScreenTransition

startScreenTransition: (screenTransitionConfig: ScreenTransitionConfig) => void;

function stopMapper

stopMapper: (mapperID: number) => void;

function useAnimatedGestureHandler

useAnimatedGestureHandler: <
    Event extends NativeEventWrapper<PropsUsedInUseAnimatedGestureHandler> = DefaultEvent,
    Context extends Record<string, unknown> = Record<string, unknown>
>(
    handlers: GestureHandlers<Event, Context>,
    dependencies?: unknown[]
) => (e: Event) => void;

Deprecated
UseAnimatedGestureHandler is an old API which is no longer supported.
Please check https://docs.swmansion.com/react-native-gesture-handler/docs/guides/upgrading-to-2/ for information about how to migrate to react-native-gesture-handler v2

function useAnimatedKeyboard

useAnimatedKeyboard: (options?: AnimatedKeyboardOptions) => AnimatedKeyboardInfo;

Lets you synchronously get the position and state of the keyboard.
Parameter options
An additional keyboard configuration options.
Returns
An object with the current keyboard height and state as [shared values](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#shared-value).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/device/useAnimatedKeyboard

function useAnimatedReaction

useAnimatedReaction: <PreparedResult>(
    prepare: () => PreparedResult,
    react: (prepared: PreparedResult, previous: PreparedResult | null) => void,
    dependencies?: unknown[]
) => void;

Lets you to respond to changes in a [shared value](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#shared-value). It's especially useful when comparing values previously stored in the shared value with the current one.
Parameter prepare
A function that should return a value to which you'd like to react.
Parameter react
A function that reacts to changes in the value returned by the prepare function.
Parameter dependencies
An optional array of dependencies. Only relevant when using Reanimated without the Babel plugin on the Web.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/advanced/useAnimatedReaction

function useAnimatedRef

useAnimatedRef: <TComponent extends Component>() => AnimatedRef<TComponent>;

Lets you get a reference of a view that you can use inside a worklet.
Returns
An object with a .current property which contains an instance of a component.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/core/useAnimatedRef

function useAnimatedScrollHandler

useAnimatedScrollHandler: <Context extends Record<string, unknown>>(
    handlers: ScrollHandler<Context> | ScrollHandlers<Context>,
    dependencies?: unknown[]
) => ScrollHandlerProcessed<Context>;

Lets you run callbacks on ScrollView events. Supports onScroll, onBeginDrag, onEndDrag, onMomentumBegin, and onMomentumEnd events.
These callbacks are automatically workletized and ran on the UI thread.
Parameter handlers
An object containing event handlers.
Parameter dependencies
An optional array of dependencies. Only relevant when using Reanimated without the Babel plugin on the Web.
Returns
An object you need to pass to onScroll prop on the Animated.ScrollView component.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/scroll/useAnimatedScrollHandler

function useAnimatedSensor

useAnimatedSensor: {
    (
        sensorType: SensorType.ROTATION,
        userConfig?: Partial<SensorConfig>
    ): AnimatedSensor<ValueRotation>;
    (
        sensorType:
            | SensorType.ACCELEROMETER
            | SensorType.GYROSCOPE
            | SensorType.GRAVITY
            | SensorType.MAGNETIC_FIELD,
        userConfig?: Partial<SensorConfig>
    ): AnimatedSensor<Value3D>;
};

Lets you create animations based on data from the device's sensors.
Parameter sensorType
Type of the sensor to use. Configured with SensorType enum.
Parameter config
The sensor configuration - SensorConfig.
Returns
An object containing the sensor measurements [shared value](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#shared-value) and a function to unregister the sensor
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/device/useAnimatedSensor

function useAnimatedStyle

useAnimatedStyle: <Style extends unknown>(
    updater: () => Style,
    dependencies?: DependencyList | null
) => Style;

Lets you create a styles object, similar to StyleSheet styles, which can be animated using shared values.
Parameter updater
A function returning an object with style properties you want to animate.
Parameter dependencies
An optional array of dependencies. Only relevant when using Reanimated without the Babel plugin on the Web.
Returns
An animated style object which has to be passed to the style property of an Animated component you want to animate.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/core/useAnimatedStyle

function useComposedEventHandler

useComposedEventHandler: <
    Event extends object,
    Context extends Record<string, unknown>
>(
    handlers: (EventHandlerProcessed<Event, Context> | null)[]
) => ComposedHandlerProcessed<Event, Context>;

Lets you compose multiple event handlers based on [useEvent](https://docs.swmansion.com/react-native-reanimated/docs/advanced/useEvent) hook.
Parameter handlers
An array of event handlers created using [useEvent](https://docs.swmansion.com/react-native-reanimated/docs/advanced/useEvent) hook.
Returns
An object you need to pass to a coresponding "onEvent" prop on an Animated component (for example handlers responsible for onScroll event go to onScroll prop).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/advanced/useComposedEventHandler

function useDerivedValue

useDerivedValue: <Value>(
    updater: () => Value,
    dependencies?: unknown[]
) => DerivedValue<Value>;

Lets you create new shared values based on existing ones while keeping them reactive.
Parameter updater
A function called whenever at least one of the shared values or state used in the function body changes.
Parameter dependencies
An optional array of dependencies. Only relevant when using Reanimated without the Babel plugin on the Web.
Returns
A new readonly shared value based on a value returned from the updater function
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/core/useDerivedValue

function useEvent

useEvent: <
    Event extends object,
    Context extends Record<string, unknown> = never
>(
    handler: EventHandler<Event, Context>,
    eventNames?: string[],
    rebuild?: boolean
) => EventHandlerProcessed<Event, Context>;

Lets you run a function whenever a specified native event occurs.
Parameter handler
A function that receives an event object with event data - EventHandler.
Parameter eventNames
An array of event names the handler callback will react to.
Parameter rebuild
Whether the event handler should be rebuilt. Defaults to false.
Returns
A function that will be called when the event occurs - EventHandlerProcessed.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/advanced/useEvent

function useFrameCallback

useFrameCallback: (
    callback: (frameInfo: FrameInfo) => void,
    autostart?: boolean
) => FrameCallback;

Lets you run a function on every frame update.
Parameter callback
A function executed on every frame update.
Parameter autostart
Whether the callback should start automatically. Defaults to true.
Returns
A frame callback object - FrameCallback.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/advanced/useFrameCallback

function useHandler

useHandler: <Event extends object, Context extends Record<string, unknown>>(
    handlers: GeneralHandlers<Event, Context>,
    dependencies?: unknown[]
) => UseHandlerContext<Context>;

Lets you find out whether the event handler dependencies have changed.
Parameter handlers
An object of event handlers.
Parameter dependencies
An optional array of dependencies.
Returns
An object containing a boolean indicating whether the dependencies have changed, and a boolean indicating whether the code is running on the web.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/advanced/useHandler

function useInterpolateConfig

useInterpolateConfig: (
    inputRange: readonly number[],
    outputRange: readonly (string | number)[],
    colorSpace?: ColorSpace,
    options?: InterpolationOptions
) => SharedValue<InterpolateConfig>;

function useReducedMotion

useReducedMotion: () => boolean;

Lets you query the reduced motion system setting.
Changing the reduced motion system setting doesn't cause your components to rerender.
Returns
A boolean indicating whether the reduced motion setting was enabled when the app started.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/device/useReducedMotion

function useSharedValue

useSharedValue: <Value>(initialValue: Value) => SharedValue<Value>;

Lets you define [shared values](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#shared-value) in your components.
Parameter initialValue
The value you want to be initially stored to a .value property.
Returns
A shared value with a single .value property initially set to the initialValue - SharedValue.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/core/useSharedValue

function useWorkletCallback

useWorkletCallback: <Args extends unknown[], ReturnValue>(
    worklet: (...args: Args) => ReturnValue,
    deps?: unknown[]
) => (...args: Args) => ReturnValue;

Deprecated
Use React.useCallback instead

function withReanimatedTimer

withReanimatedTimer: (animationTest: () => void) => void;

function withSequence

withSequence: {
    <T extends AnimatableValue>(_reduceMotion: ReduceMotion, ...animations: T[]): T;
    <T extends AnimatableValue>(...animations: T[]): T;
};

Lets you run animations in a sequence.
Parameter reduceMotion
Determines how the animation responds to the device's reduced motion accessibility setting. Default to ReduceMotion.System - ReduceMotion.
Parameter animations
Any number of animation objects to be run in a sequence.
Returns
An [animation object](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animation-object) which holds the current state of the animation/
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/animations/withSequence

Classes

class BaseAnimationBuilder

class BaseAnimationBuilder {}

property build

build: () => EntryExitAnimationFunction | LayoutAnimationFunction;

property callbackV

callbackV?: (finished: boolean) => void;

property createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

property delayV

delayV?: number;

property durationV

durationV?: number;

property randomizeDelay

randomizeDelay: boolean;

property reduceMotionV

reduceMotionV: ReduceMotion;

method build

static build: <T extends typeof BaseAnimationBuilder>(
    this: T
) => EntryExitAnimationFunction | LayoutAnimationFunction;

method delay

static delay: <T extends typeof BaseAnimationBuilder>(
    this: T,
    delayMs: number
) => InstanceType<T>;

Lets you adjust the delay before the animation starts (in milliseconds). Can be chained alongside other [layout animation modifiers](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#layout-animation-modifier).
Parameter delayMs
Delay before the animation starts (in milliseconds).

method duration

static duration: <T extends typeof BaseAnimationBuilder>(
    this: T,
    durationMs: number
) => InstanceType<T>;

Lets you adjust the animation duration. Can be chained alongside other [layout animation modifiers](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#layout-animation-modifier).
Parameter durationMs
Length of the animation (in milliseconds).

method getDelay

getDelay: () => number;

method getDelayFunction

getDelayFunction: () => AnimationFunction;

method getDuration

static getDuration: () => number;

method getReduceMotion

getReduceMotion: () => ReduceMotion;

method randomDelay

static randomDelay: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

Deprecated
Use .delay() with Math.random() instead

method reduceMotion

static reduceMotion: <T extends typeof BaseAnimationBuilder>(
    this: T,
    reduceMotion: ReduceMotion
) => InstanceType<T>;

Lets you adjust the behavior when the device's reduced motion accessibility setting is turned on. Can be chained alongside other [layout animation modifiers](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#layout-animation-modifier).
Parameter reduceMotion
Determines how the animation responds to the device's reduced motion accessibility setting. Default to ReduceMotion.System - ReduceMotion.

method withCallback

static withCallback: <T extends typeof BaseAnimationBuilder>(
    this: T,
    callback: (finished: boolean) => void
) => InstanceType<T>;

The callback that will fire after the animation ends. Can be chained alongside other [layout animation modifiers](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#layout-animation-modifier).
Parameter callback
Callback that will fire after the animation ends.

class BounceIn

class BounceIn
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Bounce entering animation. You can modify the behavior by chaining methods like .delay(300) or .duration(100).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#bounce

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

method getDuration

static getDuration: () => number;

class BounceInDown

class BounceInDown
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Bounce from bottom animation. You can modify the behavior by chaining methods like .delay(300) or .duration(100).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#bounce

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

method getDuration

static getDuration: () => number;

class BounceInLeft

class BounceInLeft
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Bounce from left animation. You can modify the behavior by chaining methods like .delay(300) or .duration(100).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#bounce

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

method getDuration

static getDuration: () => number;

class BounceInRight

class BounceInRight
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Bounce from right animation. You can modify the behavior by chaining methods like .delay(300) or .duration(100).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#bounce

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

method getDuration

static getDuration: () => number;

class BounceInUp

class BounceInUp
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Bounce from top animation. You can modify the behavior by chaining methods like .delay(300) or .duration(100).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#bounce

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

method getDuration

static getDuration: () => number;

class BounceOut

class BounceOut
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Bounce exiting animation. You can modify the behavior by chaining methods like .delay(300) or .duration(100).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#bounce

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

method getDuration

static getDuration: () => number;

class BounceOutDown

class BounceOutDown
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Bounce to bottom animation. You can modify the behavior by chaining methods like .delay(300) or .duration(100).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#bounce

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

method getDuration

static getDuration: () => number;

class BounceOutLeft

class BounceOutLeft
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Bounce to left animation. You can modify the behavior by chaining methods like .delay(300) or .duration(100).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#bounce

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

method getDuration

static getDuration: () => number;

class BounceOutRight

class BounceOutRight
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Bounce to right animation. You can modify the behavior by chaining methods like .delay(300) or .duration(100).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#bounce

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

method getDuration

static getDuration: () => number;

class BounceOutUp

class BounceOutUp
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Bounce to top animation. You can modify the behavior by chaining methods like .delay(300) or .duration(100).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#bounce

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

method getDuration

static getDuration: () => number;

class ComplexAnimationBuilder

class ComplexAnimationBuilder extends BaseAnimationBuilder {}

property createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

property dampingRatioV

dampingRatioV?: number;

property dampingV

dampingV?: number;

property easingV

easingV?: EasingFunction;

property initialValues

initialValues?: StyleProps;

property massV

massV?: number;

property overshootClampingV

overshootClampingV?: number;

property restDisplacementThresholdV

restDisplacementThresholdV?: number;

property restSpeedThresholdV

restSpeedThresholdV?: number;

property rotateV

rotateV?: string;

property stiffnessV

stiffnessV?: number;

property type

type?: AnimationFunction;

method damping

static damping: <T extends typeof ComplexAnimationBuilder>(
    this: T,
    damping: number
) => InstanceType<T>;

Lets you adjust the spring animation damping. Can be chained alongside other [layout animation modifiers](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#layout-animation-modifier).
Parameter value
Decides how quickly a spring stops moving. Higher damping means the spring will come to rest faster.

method dampingRatio

static dampingRatio: <T extends typeof ComplexAnimationBuilder>(
    this: T,
    dampingRatio: number
) => InstanceType<T>;

Lets you adjust the spring animation damping ratio. Can be chained alongside other [layout animation modifiers](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#layout-animation-modifier).
Parameter dampingRatio
How damped the spring is.

method easing

static easing: <T extends typeof ComplexAnimationBuilder>(
    this: T,
    easingFunction: EasingFunction
) => InstanceType<T>;

Lets you change the easing curve of the animation. Can be chained alongside other [layout animation modifiers](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#layout-animation-modifier).
Parameter easingFunction
An easing function which defines the animation curve.

method getAnimationAndConfig

getAnimationAndConfig: () => LayoutAnimationAndConfig;

method mass

static mass: <T extends typeof ComplexAnimationBuilder>(
    this: T,
    mass: number
) => InstanceType<T>;

Lets you adjust the spring animation mass. Can be chained alongside other [layout animation modifiers](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#layout-animation-modifier).
Parameter mass
The weight of the spring. Reducing this value makes the animation faster.

method overshootClamping

static overshootClamping: <T extends typeof ComplexAnimationBuilder>(
    this: T,
    overshootClamping: number
) => InstanceType<T>;

Lets you adjust overshoot clamping of the spring. Can be chained alongside other [layout animation modifiers](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#layout-animation-modifier).
Parameter overshootClamping
Whether a spring can bounce over the final position.

method restDisplacementThreshold

static restDisplacementThreshold: <T extends typeof ComplexAnimationBuilder>(
    this: T,
    restDisplacementThreshold: number
) => InstanceType<T>;

Lets you adjust the rest displacement threshold of the spring animation. Can be chained alongside other [layout animation modifiers](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#layout-animation-modifier).
Parameter restDisplacementThreshold
The displacement below which the spring will snap to the designated position without further oscillations.

method restSpeedThreshold

static restSpeedThreshold: <T extends typeof ComplexAnimationBuilder>(
    this: T,
    restSpeedThreshold: number
) => InstanceType<T>;

Lets you adjust the rest speed threshold of the spring animation. Can be chained alongside other [layout animation modifiers](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#layout-animation-modifier).
Parameter restSpeedThreshold
The speed in pixels per second from which the spring will snap to the designated position without further oscillations.

method rotate

static rotate: <T extends typeof ComplexAnimationBuilder>(
    this: T,
    degree: string
) => InstanceType<T>;

Lets you rotate the element. Can be chained alongside other [layout animation modifiers](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#layout-animation-modifier).
Parameter degree
The rotation degree.

method springify

static springify: <T extends typeof ComplexAnimationBuilder>(
    this: T,
    duration?: number
) => ComplexAnimationBuilder;

Enables the spring-based animation configuration. Can be chained alongside other [layout animation modifiers](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#layout-animation-modifier).
Parameter duration
An optional duration of the spring animation (in milliseconds).

method stiffness

static stiffness: <T extends typeof ComplexAnimationBuilder>(
    this: T,
    stiffness: number
) => InstanceType<T>;

Lets you adjust the stiffness of the spring animation. Can be chained alongside other [layout animation modifiers](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#layout-animation-modifier).
Parameter stiffness
How bouncy the spring is.

method withInitialValues

static withInitialValues: <T extends typeof ComplexAnimationBuilder>(
    this: T,
    values: StyleProps
) => InstanceType<T>;

Lets you override the initial config of the animation
Parameter values
An object containing the styles to override.

class CurvedTransition

class CurvedTransition
    extends BaseAnimationBuilder
    implements ILayoutAnimationBuilder {}

Layout transitions with a curved animation. You can modify the behavior by chaining methods like .duration(500) or .delay(500).
You pass it to the layout prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/layout-transitions#fading-transition

property build

build: () => LayoutAnimationFunction;

property easingHeightV

easingHeightV: EasingFunction;

property easingWidthV

easingWidthV: EasingFunction;

property easingXV

easingXV: EasingFunction;

property easingYV

easingYV: EasingFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

method easingHeight

static easingHeight: (easing: EasingFunction) => CurvedTransition;

method easingWidth

static easingWidth: (easing: EasingFunction) => CurvedTransition;

method easingX

static easingX: (easing: EasingFunction) => CurvedTransition;

method easingY

static easingY: (easing: EasingFunction) => CurvedTransition;

class EntryExitTransition

class EntryExitTransition
    extends BaseAnimationBuilder
    implements ILayoutAnimationBuilder {}

property build

build: () => LayoutAnimationFunction;

property enteringV

enteringV: typeof BaseAnimationBuilder | BaseAnimationBuilder;

property exitingV

exitingV: typeof BaseAnimationBuilder | BaseAnimationBuilder;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

method entering

static entering: (
    animation: BaseAnimationBuilder | typeof BaseAnimationBuilder
) => EntryExitTransition;

method exiting

static exiting: (
    animation: BaseAnimationBuilder | typeof BaseAnimationBuilder
) => EntryExitTransition;

class FadeIn

class FadeIn extends ComplexAnimationBuilder implements IEntryExitAnimationBuilder {}

Fade in animation. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#fade

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class FadeInDown

class FadeInDown
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Fade from bottom animation. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#fade

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class FadeInLeft

class FadeInLeft
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Fade from left animation. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#fade

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class FadeInRight

class FadeInRight
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Fade from right animation. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#fade

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class FadeInUp

class FadeInUp
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Fade from top animation. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#fade

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class FadeOut

class FadeOut
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Fade out animation. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#fade

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class FadeOutDown

class FadeOutDown
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Fade to bottom animation. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#fade

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class FadeOutLeft

class FadeOutLeft
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Fade to left animation. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#fade

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class FadeOutRight

class FadeOutRight
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Fade to right animation. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#fade

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class FadeOutUp

class FadeOutUp
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Fade to top animation. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#fade

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class FadingTransition

class FadingTransition
    extends BaseAnimationBuilder
    implements ILayoutAnimationBuilder {}

Fades out components from one position and shows them in another. You can modify the behavior by chaining methods like .duration(500) or .delay(500).
You pass it to the layout prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/layout-transitions#fading-transition

property build

build: () => LayoutAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class FlipInEasyX

class FlipInEasyX
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Eased rotate in on the X axis. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#flip

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class FlipInEasyY

class FlipInEasyY
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Eased rotate in on the Y axis. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#flip

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class FlipInXDown

class FlipInXDown
    extends ComplexAnimationBuilder
    implements IEntryAnimationBuilder {}

Rotate from bottom on the X axis. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#flip

property build

build: () => AnimationConfigFunction<EntryAnimationsValues>;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class FlipInXUp

class FlipInXUp extends ComplexAnimationBuilder implements IEntryAnimationBuilder {}

Rotate from top on the X axis. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#flip

property build

build: () => AnimationConfigFunction<EntryAnimationsValues>;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class FlipInYLeft

class FlipInYLeft
    extends ComplexAnimationBuilder
    implements IEntryAnimationBuilder {}

Rotate from left on the Y axis. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#flip

property build

build: () => AnimationConfigFunction<EntryAnimationsValues>;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class FlipInYRight

class FlipInYRight
    extends ComplexAnimationBuilder
    implements IEntryAnimationBuilder {}

Rotate from right on the Y axis. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#flip

property build

build: () => AnimationConfigFunction<EntryAnimationsValues>;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class FlipOutEasyX

class FlipOutEasyX
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Eased rotate on the X axis. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#flip

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class FlipOutEasyY

class FlipOutEasyY
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Eased rotate on the Y axis. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#flip

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class FlipOutXDown

class FlipOutXDown
    extends ComplexAnimationBuilder
    implements IExitAnimationBuilder {}

Rotate to bottom on the X axis. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#flip

property build

build: () => AnimationConfigFunction<ExitAnimationsValues>;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class FlipOutXUp

class FlipOutXUp extends ComplexAnimationBuilder implements IExitAnimationBuilder {}

Rotate to top animation on the X axis. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#flip

property build

build: () => AnimationConfigFunction<ExitAnimationsValues>;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class FlipOutYLeft

class FlipOutYLeft
    extends ComplexAnimationBuilder
    implements IExitAnimationBuilder {}

Rotate to left on the Y axis. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#flip

property build

build: () => AnimationConfigFunction<ExitAnimationsValues>;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class FlipOutYRight

class FlipOutYRight
    extends ComplexAnimationBuilder
    implements IExitAnimationBuilder {}

Rotate to right animation on the Y axis. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#flip

property build

build: () => AnimationConfigFunction<ExitAnimationsValues>;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class JumpingTransition

class JumpingTransition
    extends BaseAnimationBuilder
    implements ILayoutAnimationBuilder {}

Layout jumps - quite literally - from one position to another. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the layout prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/layout-transitions#jumping-transition

property build

build: () => LayoutAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class LayoutAnimationConfig

class LayoutAnimationConfig extends Component<LayoutAnimationConfigProps> {}

A component that lets you skip entering and exiting animations.
Parameter skipEntering
A boolean indicating whether children's entering animations should be skipped when LayoutAnimationConfig is mounted.
Parameter skipExiting
A boolean indicating whether children's exiting animations should be skipped when LayoutAnimationConfig is unmounted.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/layout-animation-config/

method componentWillUnmount

componentWillUnmount: () => void;

method getMaybeWrappedChildren

getMaybeWrappedChildren: () =>
    | string
    | number
    | boolean
    | React.ReactElement<any, string | React.JSXElementConstructor<any>>
    | Iterable<React.ReactNode>
    | React.JSX.Element[]
    | null
    | undefined;

method render

render: () => ReactNode;

method setShouldAnimateExiting

setShouldAnimateExiting: () => void;

class LightSpeedInLeft

class LightSpeedInLeft
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Entry from left animation with change in skew and opacity. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#lightspeed

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class LightSpeedInRight

class LightSpeedInRight
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Entry from right animation with change in skew and opacity. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#lightspeed

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class LightSpeedOutLeft

class LightSpeedOutLeft
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Exit to left animation with change in skew and opacity. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/#lightspeed

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class LightSpeedOutRight

class LightSpeedOutRight
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Exit to right animation with change in skew and opacity. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#lightspeed

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class LinearTransition

class LinearTransition
    extends ComplexAnimationBuilder
    implements ILayoutAnimationBuilder {}

Linearly transforms the layout from one position to another. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the layout prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/layout-transitions#linear-transition

property build

build: () => LayoutAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class PinwheelIn

class PinwheelIn
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Entry with change in rotation, scale, and opacity. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#pinwheel

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class PinwheelOut

class PinwheelOut
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Exit with change in rotation, scale, and opacity. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#pinwheel

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class RollInLeft

class RollInLeft
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Roll from left animation. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#roll

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class RollInRight

class RollInRight
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Roll from right animation. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#roll

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class RollOutLeft

class RollOutLeft
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Roll to left animation. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#roll

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class RollOutRight

class RollOutRight
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Roll to right animation. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#roll

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class RotateInDownLeft

class RotateInDownLeft
    extends ComplexAnimationBuilder
    implements IEntryAnimationBuilder {}

Rotate to bottom from left edge. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#rotate

property build

build: () => AnimationConfigFunction<EntryAnimationsValues>;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class RotateInDownRight

class RotateInDownRight
    extends ComplexAnimationBuilder
    implements IEntryAnimationBuilder {}

Rotate to bottom from right edge. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#rotate

property build

build: () => AnimationConfigFunction<EntryAnimationsValues>;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class RotateInUpLeft

class RotateInUpLeft
    extends ComplexAnimationBuilder
    implements IEntryAnimationBuilder {}

Rotate to top from left edge. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#rotate

property build

build: () => AnimationConfigFunction<EntryAnimationsValues>;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class RotateInUpRight

class RotateInUpRight
    extends ComplexAnimationBuilder
    implements IEntryAnimationBuilder {}

Rotate to top from right edge. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#rotate

property build

build: () => AnimationConfigFunction<EntryAnimationsValues>;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class RotateOutDownLeft

class RotateOutDownLeft
    extends ComplexAnimationBuilder
    implements IExitAnimationBuilder {}

Rotate to bottom from left edge. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#rotate

property build

build: () => AnimationConfigFunction<ExitAnimationsValues>;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class RotateOutDownRight

class RotateOutDownRight
    extends ComplexAnimationBuilder
    implements IExitAnimationBuilder {}

Rotate to bottom from right edge. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#rotate

property build

build: () => AnimationConfigFunction<ExitAnimationsValues>;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class RotateOutUpLeft

class RotateOutUpLeft
    extends ComplexAnimationBuilder
    implements IExitAnimationBuilder {}

Rotate to top from left edge. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#rotate

property build

build: () => AnimationConfigFunction<ExitAnimationsValues>;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class RotateOutUpRight

class RotateOutUpRight
    extends ComplexAnimationBuilder
    implements IExitAnimationBuilder {}

Rotate to top from right edge. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#rotate

property build

build: () => AnimationConfigFunction<ExitAnimationsValues>;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class SequencedTransition

class SequencedTransition
    extends BaseAnimationBuilder
    implements ILayoutAnimationBuilder {}

Transforms layout starting from the X-axis and width first, followed by the Y-axis and height. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the layout prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/layout-transitions#sequenced-transition

property build

build: () => LayoutAnimationFunction;

property presetName

static presetName: string;

property reversed

reversed: boolean;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

method reverse

static reverse: () => SequencedTransition;

class SharedTransition

class SharedTransition {}

A SharedTransition builder class.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/shared-element-transitions/overview
Modifiers
- @experimental

method custom

static custom: (customAnimationFactory: AnimationFactory) => SharedTransition;

Lets you create a custom shared transition animation. Other shared transition modifiers can be chained alongside this modifier.
Parameter customAnimationFactory
Callback function that have to return an object with styles for the custom shared transition.
Returns
A SharedTransition object. Styles returned from this function need to be to the sharedTransitionStyle prop.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/shared-element-transitions/overview
Modifiers
- @experimental

method defaultTransitionType

static defaultTransitionType: (
    transitionType: SharedTransitionType
) => SharedTransition;

Whether the transition is progress-bound or not. Other shared transition modifiers can be chained alongside this modifier.
Parameter transitionType
Type of the transition. Configured with SharedTransitionType enum.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/shared-element-transitions/overview
Modifiers
- @experimental

method duration

static duration: (duration: number) => SharedTransition;

Lets you change the duration of the shared transition. Other shared transition modifiers can be chained alongside this modifier.
Parameter duration
The duration of the shared transition animation in milliseconds.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/shared-element-transitions/overview
Modifiers
- @experimental

method getReduceMotion

getReduceMotion: () => ReduceMotion;

method progressAnimation

static progressAnimation: (
    progressAnimationCallback: CustomProgressAnimation
) => SharedTransition;

Lets you create a shared transition animation bound to the progress between navigation screens. Other shared transition modifiers can be chained alongside this modifier.
Parameter progressAnimationCallback
A callback called with the current progress value on every animation frame. It should return an object with styles for the shared transition.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/shared-element-transitions/overview
Modifiers
- @experimental

method reduceMotion

static reduceMotion: (reduceMotion: ReduceMotion) => SharedTransition;

Lets you adjust the behavior when the device's reduced motion accessibility setting is turned on. Other shared transition modifiers can be chained alongside this modifier.
Parameter reduceMotion
Determines how the animation responds to the device's reduced motion accessibility setting. Default to ReduceMotion.System - ReduceMotion.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/shared-element-transitions/overview
Modifiers
- @experimental

method registerTransition

registerTransition: (
    viewTag: number,
    sharedTransitionTag: string,
    isUnmounting?: boolean
) => void;

method unregisterTransition

unregisterTransition: (viewTag: number, isUnmounting?: boolean) => void;

class SlideInDown

class SlideInDown
    extends ComplexAnimationBuilder
    implements IEntryAnimationBuilder {}

Slide from bottom animation. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#slide

property build

build: () => AnimationConfigFunction<EntryAnimationsValues>;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class SlideInLeft

class SlideInLeft
    extends ComplexAnimationBuilder
    implements IEntryAnimationBuilder {}

Slide from left animation. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#slide

property build

build: () => AnimationConfigFunction<EntryAnimationsValues>;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class SlideInRight

class SlideInRight
    extends ComplexAnimationBuilder
    implements IEntryAnimationBuilder {}

Slide from right animation. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#slide

property build

build: () => AnimationConfigFunction<EntryAnimationsValues>;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class SlideInUp

class SlideInUp extends ComplexAnimationBuilder implements IEntryAnimationBuilder {}

Slide from top animation. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#slide

property build

build: () => AnimationConfigFunction<EntryAnimationsValues>;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class SlideOutDown

class SlideOutDown
    extends ComplexAnimationBuilder
    implements IExitAnimationBuilder {}

Slide to bottom animation. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#slide

property build

build: () => AnimationConfigFunction<ExitAnimationsValues>;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class SlideOutLeft

class SlideOutLeft
    extends ComplexAnimationBuilder
    implements IExitAnimationBuilder {}

Slide to left animation. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#slide

property build

build: () => AnimationConfigFunction<ExitAnimationsValues>;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class SlideOutRight

class SlideOutRight
    extends ComplexAnimationBuilder
    implements IExitAnimationBuilder {}

Slide to right animation. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#slide

property build

build: () => AnimationConfigFunction<ExitAnimationsValues>;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class SlideOutUp

class SlideOutUp extends ComplexAnimationBuilder implements IExitAnimationBuilder {}

Slide to top animation. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations#slide

property build

build: () => AnimationConfigFunction<ExitAnimationsValues>;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class StretchInX

class StretchInX
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Stretch animation on the X axis. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/#stretch

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class StretchInY

class StretchInY
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Stretch animation on the Y axis. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/#stretch

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class StretchOutX

class StretchOutX
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Stretch animation on the X axis. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/#stretch

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class StretchOutY

class StretchOutY
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Stretch animation on the Y axis. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/#stretch

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class ZoomIn

class ZoomIn extends ComplexAnimationBuilder implements IEntryExitAnimationBuilder {}

Scale from center animation. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/#zoom

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class ZoomInDown

class ZoomInDown
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Scale from bottom animation. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/#zoom

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class ZoomInEasyDown

class ZoomInEasyDown
    extends ComplexAnimationBuilder
    implements IEntryAnimationBuilder {}

Eased scale from bottom animation. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/#zoom

property build

build: () => AnimationConfigFunction<EntryAnimationsValues>;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class ZoomInEasyUp

class ZoomInEasyUp
    extends ComplexAnimationBuilder
    implements IEntryAnimationBuilder {}

Eased scale from top animation. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/#zoom

property build

build: () => AnimationConfigFunction<EntryAnimationsValues>;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class ZoomInLeft

class ZoomInLeft
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Scale from left animation. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/#zoom

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class ZoomInRight

class ZoomInRight
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Scale from right animation. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/#zoom

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class ZoomInRotate

class ZoomInRotate
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Scale from center with rotation. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/#zoom

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class ZoomInUp

class ZoomInUp
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Scale from top animation. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the entering prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/#zoom

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class ZoomOut

class ZoomOut
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Scale to center animation. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/#zoom

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class ZoomOutDown

class ZoomOutDown
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Scale to bottom animation. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/#zoom

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class ZoomOutEasyDown

class ZoomOutEasyDown
    extends ComplexAnimationBuilder
    implements IExitAnimationBuilder {}

Eased scale to bottom animation. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/#zoom

property build

build: () => AnimationConfigFunction<ExitAnimationsValues>;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class ZoomOutEasyUp

class ZoomOutEasyUp
    extends ComplexAnimationBuilder
    implements IExitAnimationBuilder {}

Eased scale to top animation. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/#zoom

property build

build: () => AnimationConfigFunction<ExitAnimationsValues>;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class ZoomOutLeft

class ZoomOutLeft
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Scale to left animation. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/#zoom

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class ZoomOutRight

class ZoomOutRight
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Scale to right animation. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/#zoom

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class ZoomOutRotate

class ZoomOutRotate
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Scale to center with rotation. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/#zoom

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

class ZoomOutUp

class ZoomOutUp
    extends ComplexAnimationBuilder
    implements IEntryExitAnimationBuilder {}

Scale to top animation. You can modify the behavior by chaining methods like .springify() or .duration(500).
You pass it to the exiting prop on [an Animated component](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#animated-component).
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/layout-animations/entering-exiting-animations/#zoom

property build

build: () => EntryExitAnimationFunction;

property presetName

static presetName: string;

method createInstance

static createInstance: <T extends typeof BaseAnimationBuilder>(
    this: T
) => InstanceType<T>;

Interfaces

interface AnimatedKeyboardOptions

interface AnimatedKeyboardOptions {}

property isNavigationBarTranslucentAndroid

isNavigationBarTranslucentAndroid?: boolean;

property isStatusBarTranslucentAndroid

isStatusBarTranslucentAndroid?: boolean;

interface AnimatedRef

interface AnimatedRef<T extends Component> {}

property current

current: T | null;

property getTag

getTag: () => number;

call signature

(component?: T): number | ShadowNodeWrapper | HTMLElement;

interface AnimatedScrollViewProps

interface AnimatedScrollViewProps extends AnimatedProps<ScrollViewProps> {}

property scrollViewOffset

scrollViewOffset?: SharedValue<number>;

interface Animation

interface Animation<T extends AnimationObject> extends AnimationObject {}

property onFrame

onFrame: (animation: T, timestamp: Timestamp) => boolean;

property onStart

onStart: (
    nextAnimation: T,
    current: AnimatableValue,
    timestamp: Timestamp,
    previousAnimation: Animation<any> | null | T
) => void;

interface AnimationObject

interface AnimationObject<T = AnimatableValue> {}

property callback

callback?: AnimationCallback;

property cancelled

cancelled?: boolean;

property current

current?: T;

property finished

finished?: boolean;

property onFrame

onFrame: (animation: any, timestamp: Timestamp) => boolean;

property onStart

onStart: (
    nextAnimation: any,
    current: any,
    timestamp: Timestamp,
    previousAnimation: any
) => void;

property reduceMotion

reduceMotion?: boolean;

property startValue

startValue?: AnimationObject<T>['current'];

property strippedCurrent

strippedCurrent?: number;

property toValue

toValue?: AnimationObject<T>['current'];

index signature

[key: string]: any;

interface BaseLayoutAnimationConfig

interface BaseLayoutAnimationConfig {}

property damping

damping?: number;

property dampingRatio

dampingRatio?: number;

property duration

duration?: number;

property easing

easing?: EasingFunction;

property mass

mass?: number;

property overshootClamping

overshootClamping?: number;

property restDisplacementThreshold

restDisplacementThreshold?: number;

property restSpeedThreshold

restSpeedThreshold?: number;

property stiffness

stiffness?: number;

property type

type?: AnimationFunction;

interface ComponentCoords

interface ComponentCoords {}

An object which contains relative coordinates.

property x

x: number;

property y

y: number;

interface DecayAnimation

interface DecayAnimation extends Animation<DecayAnimation> {}

property current

current: AnimatableValue;

property initialVelocity

initialVelocity: number;

property lastTimestamp

lastTimestamp: Timestamp;

property startTimestamp

startTimestamp: Timestamp;

property velocity

velocity: number;

interface DelayAnimation

interface DelayAnimation extends Animation<DelayAnimation>, HigherOrderAnimation {}

property current

current: AnimatableValue;

property previousAnimation

previousAnimation: DelayAnimation | null;

property started

started: boolean;

property startTime

startTime: Timestamp;

interface DerivedValue

interface DerivedValue<Value = unknown>
    extends Readonly<Omit<SharedValue<Value>, 'set'>> {}

property set

set: SharedValue<Value>['set'];

Deprecated
Derived values are readonly, don't use this method. It's here only to prevent breaking changes in TypeScript types. It will be removed in the future.

interface ExtrapolationConfig

interface ExtrapolationConfig {}

Allows to specify extrapolation for left and right edge of the interpolation.

property extrapolateLeft

extrapolateLeft?: Extrapolation | string;

property extrapolateRight

extrapolateRight?: Extrapolation | string;

interface GestureHandlers

interface GestureHandlers<
    Event extends NativeEventWrapper<PropsUsedInUseAnimatedGestureHandler>,
    Context extends Record<string, unknown>
> {}

property onActive

onActive?: GestureHandler<Event, Context>;

property onCancel

onCancel?: GestureHandler<Event, Context>;

property onEnd

onEnd?: GestureHandler<Event, Context>;

property onFail

onFail?: GestureHandler<Event, Context>;

property onFinish

onFinish?: GestureHandler<Event, Context>;

property onStart

onStart?: GestureHandler<Event, Context>;

index signature

[key: string]: GestureHandler<Event, Context> | undefined;

interface IEntryExitAnimationBuilder

interface IEntryExitAnimationBuilder {}

property build

build: () => EntryExitAnimationFunction;

interface ILayoutAnimationBuilder

interface ILayoutAnimationBuilder {}

property build

build: () => LayoutAnimationFunction;

interface InterpolateConfig

interface InterpolateConfig {}

property cache

cache: SharedValue<InterpolateRGB | InterpolateHSV | null>;

property colorSpace

colorSpace: ColorSpace;

property inputRange

inputRange: readonly number[];

property options

options: InterpolationOptions;

property outputRange

outputRange: readonly (string | number)[];

interface InterpolateHSV

interface InterpolateHSV {}

property a

a: number[];

property h

h: number[];

property s

s: number[];

property v

v: number[];

interface InterpolateRGB

interface InterpolateRGB {}

property a

a: number[];

property b

b: number[];

property g

g: number[];

property r

r: number[];

interface MeasuredDimensions

interface MeasuredDimensions {}

Parameter x
A number representing X coordinate relative to the parent component.
Parameter y
A number representing Y coordinate relative to the parent component.
Parameter width
A number representing the width of the component.
Parameter height
A number representing the height of the component.
Parameter pageX
A number representing X coordinate relative to the screen.
Parameter pageY
A number representing Y coordinate relative to the screen.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/advanced/measure#returns

property height

height: number;

property pageX

pageX: number;

property pageY

pageY: number;

property width

width: number;

property x

x: number;

property y

y: number;

interface RepeatAnimation

interface RepeatAnimation extends Animation<RepeatAnimation>, HigherOrderAnimation {}

property previousAnimation

previousAnimation?: RepeatAnimation;

property reps

reps: number;

property startValue

startValue: AnimatableValue;

property toValue

toValue?: AnimatableValue;

interface ScrollHandlers

interface ScrollHandlers<Context extends Record<string, unknown>> {}

property onBeginDrag

onBeginDrag?: ScrollHandler<Context>;

property onEndDrag

onEndDrag?: ScrollHandler<Context>;

property onMomentumBegin

onMomentumBegin?: ScrollHandler<Context>;

property onMomentumEnd

onMomentumEnd?: ScrollHandler<Context>;

property onScroll

onScroll?: ScrollHandler<Context>;

interface SequenceAnimation

interface SequenceAnimation
    extends Animation<SequenceAnimation>,
        HigherOrderAnimation {}

property animationIndex

animationIndex: number;

interface SharedTransitionAnimationsValues

interface SharedTransitionAnimationsValues extends LayoutAnimationsValues {}

property currentTransformMatrix

currentTransformMatrix: number[];

property targetTransformMatrix

targetTransformMatrix: number[];

interface SharedValue

interface SharedValue<Value = unknown> {}

A value that can be used both on the [JavaScript thread](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#javascript-thread) and the [UI thread](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#ui-thread).
Shared values are defined using [useSharedValue](https://docs.swmansion.com/react-native-reanimated/docs/core/useSharedValue) hook. You access and modify shared values by their .value property.

property addListener

addListener: (listenerID: number, listener: (value: Value) => void) => void;

property modify

modify: (
    modifier?: <T extends Value>(value: T) => T,
    forceUpdate?: boolean
) => void;

property removeListener

removeListener: (listenerID: number) => void;

property value

value: Value;

method get

get: () => Value;

method set

set: (value: Value | ((value: Value) => Value)) => void;

interface SpringAnimation

interface SpringAnimation extends Animation<SpringAnimation> {}

property current

current: AnimatableValue;

property lastTimestamp

lastTimestamp: Timestamp;

property omega0

omega0: number;

property omega1

omega1: number;

property startTimestamp

startTimestamp: Timestamp;

property startValue

startValue: number;

property toValue

toValue: AnimatableValue;

property velocity

velocity: number;

property zeta

zeta: number;

interface StyleLayoutAnimation

interface StyleLayoutAnimation extends HigherOrderAnimation {}

property callback

callback?: AnimationCallback;

property current

current: StyleProps;

property onFrame

onFrame: (animation: StyleLayoutAnimation, timestamp: Timestamp) => boolean;

property onStart

onStart: (
    nextAnimation: StyleLayoutAnimation,
    current: AnimatedStyle<any>,
    timestamp: Timestamp,
    previousAnimation: StyleLayoutAnimation
) => void;

property styleAnimations

styleAnimations: AnimatedStyle<any>;

interface StyleProps

interface StyleProps extends ViewStyle, TextStyle {}

property originX

originX?: number;

property originY

originY?: number;

index signature

[key: string]: any;

interface TimingAnimation

interface TimingAnimation extends Animation<TimingAnimation> {}

property current

current: AnimatableValue;

property easing

easing: EasingFunction;

property progress

progress: number;

property startTime

startTime: Timestamp;

property startValue

startValue: AnimatableValue;

property toValue

toValue: AnimatableValue;

property type

type: string;

interface UseHandlerContext

interface UseHandlerContext<Context extends Record<string, unknown>> {}

property context

context: Context;

property doDependenciesDiffer

doDependenciesDiffer: boolean;

property useWeb

useWeb: boolean;

Enums

enum ColorSpace

enum ColorSpace {
    RGB = 0,
    HSV = 1,
}

member HSV

HSV = 1

member RGB

RGB = 0

enum Extrapolation

enum Extrapolation {
    IDENTITY = 'identity',
    CLAMP = 'clamp',
    EXTEND = 'extend',
}

Extrapolation type.
Parameter IDENTITY
Returns the provided value as is.
Parameter CLAMP
Clamps the value to the edge of the output range.
Parameter EXTEND
Predicts the values beyond the output range.

member CLAMP

CLAMP = 'clamp'

member EXTEND

EXTEND = 'extend'

member IDENTITY

IDENTITY = 'identity'

enum InterfaceOrientation

enum InterfaceOrientation {
    ROTATION_0 = 0,
    ROTATION_90 = 90,
    ROTATION_180 = 180,
    ROTATION_270 = 270,
}

member ROTATION_0

ROTATION_0 = 0

member ROTATION_180

ROTATION_180 = 180

member ROTATION_270

ROTATION_270 = 270

member ROTATION_90

ROTATION_90 = 90

enum IOSReferenceFrame

enum IOSReferenceFrame {
    XArbitraryZVertical = 0,
    XArbitraryCorrectedZVertical = 1,
    XMagneticNorthZVertical = 2,
    XTrueNorthZVertical = 3,
    Auto = 4,
}

member Auto

Auto = 4

member XArbitraryCorrectedZVertical

XArbitraryCorrectedZVertical = 1

member XArbitraryZVertical

XArbitraryZVertical = 0

member XMagneticNorthZVertical

XMagneticNorthZVertical = 2

member XTrueNorthZVertical

XTrueNorthZVertical = 3

enum KeyboardState

enum KeyboardState {
    UNKNOWN = 0,
    OPENING = 1,
    OPEN = 2,
    CLOSING = 3,
    CLOSED = 4,
}

member CLOSED

CLOSED = 4

member CLOSING

CLOSING = 3

member OPEN

OPEN = 2

member OPENING

OPENING = 1

member UNKNOWN

UNKNOWN = 0

enum LayoutAnimationType

enum LayoutAnimationType {
    ENTERING = 1,
    EXITING = 2,
    LAYOUT = 3,
    SHARED_ELEMENT_TRANSITION = 4,
    SHARED_ELEMENT_TRANSITION_PROGRESS = 5,
}

member ENTERING

ENTERING = 1

member EXITING

EXITING = 2

member LAYOUT

LAYOUT = 3

member SHARED_ELEMENT_TRANSITION

SHARED_ELEMENT_TRANSITION = 4

member SHARED_ELEMENT_TRANSITION_PROGRESS

SHARED_ELEMENT_TRANSITION_PROGRESS = 5

enum ReanimatedLogLevel

enum ReanimatedLogLevel {
    warn = 1,
    error = 2,
}

member error

error = 2

member warn

warn = 1

enum ReduceMotion

enum ReduceMotion {
    System = 'system',
    Always = 'always',
    Never = 'never',
}

Parameter System
If the Reduce motion accessibility setting is enabled on the device, disable the animation. Otherwise, enable the animation.
Parameter Always
Disable the animation.
Parameter Never
Enable the animation.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/guides/accessibility

member Always

Always = 'always'

member Never

Never = 'never'

member System

System = 'system'

enum SensorType

enum SensorType {
    ACCELEROMETER = 1,
    GYROSCOPE = 2,
    GRAVITY = 3,
    MAGNETIC_FIELD = 4,
    ROTATION = 5,
}

member ACCELEROMETER

ACCELEROMETER = 1

member GRAVITY

GRAVITY = 3

member GYROSCOPE

GYROSCOPE = 2

member MAGNETIC_FIELD

MAGNETIC_FIELD = 4

member ROTATION

ROTATION = 5

enum SharedTransitionType

enum SharedTransitionType {
    ANIMATION = 'animation',
    PROGRESS_ANIMATION = 'progressAnimation',
}

Used to configure the .defaultTransitionType() shared transition modifier.
Modifiers
- @experimental

member ANIMATION

ANIMATION = 'animation'

member PROGRESS_ANIMATION

PROGRESS_ANIMATION = 'progressAnimation'

Type Aliases

type Adaptable

type Adaptable<T> = T | ReadonlyArray<T | ReadonlyArray<T>> | SharedValue<T>;

Deprecated
This type is no longer relevant.

type AdaptTransforms

type AdaptTransforms<T> = {
    [P in keyof T]: Adaptable<T[P]>;
};

Deprecated
This type is no longer relevant.

type AnimatableValue

type AnimatableValue = Animatable | AnimatableValueObject;

type AnimatableValueObject

type AnimatableValueObject = {
    [key: string]: Animatable;
};

type AnimatedKeyboardInfo

type AnimatedKeyboardInfo = {
    height: SharedValue<number>;
    state: SharedValue<KeyboardState>;
};

type AnimatedProps

type AnimatedProps<Props extends object> = RestProps<Props> &
    AnimatedStyleProps<Props> &
    LayoutProps &
    SharedTransitionProps & {
        /**
         * Lets you animate component props.
         *
         * @see https://docs.swmansion.com/react-native-reanimated/docs/core/useAnimatedProps
         */
        animatedProps?: Partial<AnimatedPropsProp<Props>>;
    };

type AnimatedScreenTransition

type AnimatedScreenTransition = {
    topScreenStyle: (
        event: PanGestureHandlerEventPayload,
        screenDimensions: MeasuredDimensions
    ) => Record<string, unknown>;
    belowTopScreenStyle: (
        event: PanGestureHandlerEventPayload,
        screenDimensions: MeasuredDimensions
    ) => Record<string, unknown>;
};

type AnimatedSensor

type AnimatedSensor<T extends Value3D | ValueRotation> = {
    sensor: SharedValue<T>;
    unregister: () => void;
    isAvailable: boolean;
    config: SensorConfig;
};

type AnimatedStyle

type AnimatedStyle<Style = DefaultStyle> = Style | MaybeSharedValueRecursive<Style>;

type AnimatedStyleProp

type AnimatedStyleProp<T> = AnimatedStyle<T> | RegisteredStyle<AnimatedStyle<T>>;

Deprecated
This type is no longer relevant.

type AnimatedTransform

type AnimatedTransform = MaybeSharedValueRecursive<TransformsStyle['transform']>;

type AnimateProps

type AnimateProps<Props extends object> = AnimatedProps<Props>;

Deprecated
Please use AnimatedProps type instead.

type AnimateStyle

type AnimateStyle<Style = DefaultStyle> = AnimatedStyle<Style>;

Deprecated
Please use AnimatedStyle type instead.

type AnimationCallback

type AnimationCallback = (finished?: boolean, current?: AnimatableValue) => void;

A function called upon animation completion. If the animation is cancelled, the callback will receive false as the argument; otherwise, it will receive true.

type EasingFactoryFn

type EasingFactoryFn = EasingFunctionFactory;

Deprecated
Please use EasingFunctionFactory type instead.

type EasingFn

type EasingFn = EasingFunction;

Deprecated
Please use EasingFunction type instead.

type EasingFunction

type EasingFunction = (t: number) => number;

type EasingFunctionFactory

type EasingFunctionFactory = {
    factory: () => EasingFunction;
};

type EntryAnimationsValues

type EntryAnimationsValues = TargetLayoutAnimationsValues & WindowDimensions;

type EntryExitAnimationFunction

type EntryExitAnimationFunction =
    | ((targetValues: EntryAnimationsValues) => LayoutAnimation)
    | ((targetValues: ExitAnimationsValues) => LayoutAnimation)
    | (() => LayoutAnimation);

type EventHandler

type EventHandler<
    Event extends object,
    Context extends Record<string, unknown> = never
> = (event: ReanimatedEvent<Event>, context?: Context) => void;

Worklet to provide as an argument to useEvent hook.

type EventHandlerProcessed

type EventHandlerProcessed<
    Event extends object,
    Context extends Record<string, unknown> = never
> = (event: Event, context?: Context) => void;

type ExitAnimationsValues

type ExitAnimationsValues = CurrentLayoutAnimationsValues & WindowDimensions;

type ExtrapolationType

type ExtrapolationType =
    | ExtrapolationConfig
    | Extrapolation
    | ExtrapolationAsString
    | undefined;

Configuration options for extrapolation.

type FlatListPropsWithLayout

type FlatListPropsWithLayout<T> = ReanimatedFlatListPropsWithLayout<T>;

type FrameCallback

type FrameCallback = {
    setActive: (isActive: boolean) => void;
    isActive: boolean;
    callbackId: number;
};

Parameter setActive
A function that lets you start the frame callback or stop it from running.
Parameter isActive
A boolean indicating whether a callback is running.
Parameter callbackId
A number indicating a unique identifier of the frame callback.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/advanced/useFrameCallback#returns

type FrameInfo

type FrameInfo = {
    timestamp: number;
    timeSincePreviousFrame: number | null;
    timeSinceFirstFrame: number;
};

type GoBackGesture

type GoBackGesture =
    | 'swipeRight'
    | 'swipeLeft'
    | 'swipeUp'
    | 'swipeDown'
    | 'verticalSwipe'
    | 'horizontalSwipe'
    | 'twoDimensionalSwipe';

type InterpolationOptions

type InterpolationOptions = {
    gamma?: number;
    useCorrectedHSVInterpolation?: boolean;
};

Options for color interpolation.
Parameter gamma
Gamma value used in gamma correction. Defaults to 2.2.
Parameter useCorrectedHSVInterpolation
Whether to reduce the number of colors the interpolation has to go through. Defaults to true.

type LayoutAnimation

type LayoutAnimation = {
    initialValues: StyleProps;
    animations: StyleProps;
    callback?: (finished: boolean) => void;
};

type LayoutAnimationFunction

type LayoutAnimationFunction = (
    targetValues: LayoutAnimationsValues
) => LayoutAnimation;

type LayoutAnimationStartFunction

type LayoutAnimationStartFunction = (
    tag: number,
    type: LayoutAnimationType,
    yogaValues: Partial<SharedTransitionAnimationsValues>,
    config: (arg: Partial<SharedTransitionAnimationsValues>) => LayoutAnimation
) => void;

type LayoutAnimationsValues

type LayoutAnimationsValues = CurrentLayoutAnimationsValues &
    TargetLayoutAnimationsValues &
    WindowDimensions;

type ParsedColorArray

type ParsedColorArray = [number, number, number, number];

type PerformanceMonitorProps

type PerformanceMonitorProps = {
    /**
     * Sets amount of previous frames used for smoothing at highest expectedFps.
     *
     * Automatically scales down at lower frame rates.
     *
     * Affects jumpiness of the FPS measurements value.
     */
    smoothingFrames?: number;
};

type ReanimatedEvent

type ReanimatedEvent<Event extends object> = ReanimatedPayload &
    (Event extends {
        nativeEvent: infer NativeEvent extends object;
    }
        ? NativeEvent
        : Event);

This utility type is to convert type of events that would normally be sent by React Native (they have nativeEvent field) to the type that is sent by Reanimated.

type ScreenTransitionConfig

type ScreenTransitionConfig = {
    stackTag: number;
    belowTopScreenId: number | ShadowNodeWrapper;
    topScreenId: number | ShadowNodeWrapper;
    screenTransition: AnimatedScreenTransition;
    sharedEvent: SharedValue<PanGestureHandlerEventPayload>;
    startingGesturePosition: SharedValue<PanGestureHandlerEventPayload>;
    onFinishAnimation?: () => void;
    isTransitionCanceled: boolean;
    goBackGesture: GoBackGesture;
    screenDimensions: MeasuredDimensions;
};

type ScrollEvent

type ReanimatedScrollEvent = ReanimatedEvent<RNNativeScrollEvent>;

type ScrollHandler

type ScrollHandler<
    Context extends Record<string, unknown> = Record<string, unknown>
> = (event: ReanimatedScrollEvent, context: Context) => void;

type ScrollHandlerProcessed

type ScrollHandlerProcessed<
    Context extends Record<string, unknown> = Record<string, unknown>
> = EventHandlerProcessed<RNNativeScrollEvent, Context>;

type SensorConfig

type SensorConfig = {
    interval: number | 'auto';
    adjustToInterfaceOrientation: boolean;
    iosReferenceFrame: IOSReferenceFrame;
};

type StylesOrDefault

type StylesOrDefault<T> = 'style' extends keyof T
    ? MaybeSharedValueRecursive<T['style']>
    : Record<string, unknown>;

Deprecated
This type is no longer relevant.

type TransformArrayItem

type TransformArrayItem = Extract<
    TransformsStyle['transform'],
    Array<unknown>
>[number];

type TransformStyleTypes

type TransformStyleTypes = TransformArrayItem;

Deprecated
Please use TransformArrayItem type instead.

type Value3D

type Value3D = {
    x: number;
    y: number;
    z: number;
    interfaceOrientation: InterfaceOrientation;
};

type ValueRotation

type ValueRotation = {
    qw: number;
    qx: number;
    qy: number;
    qz: number;
    yaw: number;
    pitch: number;
    roll: number;
    interfaceOrientation: InterfaceOrientation;
};

type WithDecayConfig

type WithDecayConfig = DecayConfig;

type WithSpringConfig

type WithSpringConfig = SpringConfig;

type WithTimingConfig

type WithTimingConfig = TimingConfig;

type WorkletRuntime

type WorkletRuntime = {
    __hostObjectWorkletRuntime: never;
    readonly name: string;
};

Namespaces

namespace default

module 'lib/typescript/Animated.d.ts' {}

Deprecated
Please import Extrapolate directly from react-native-reanimated instead of Animated namespace.

variable Image

const Image: any;

variable ScrollView

const ScrollView: React.ForwardRefExoticComponent<any>;

variable Text

const Text: any;

variable View

const View: any;

function addWhitelistedNativeProps

addWhitelistedNativeProps: (props: Record<string, boolean>) => void;

function addWhitelistedUIProps

addWhitelistedUIProps: (props: Record<string, boolean>) => void;

function createAnimatedComponent

createAnimatedComponent: {
    <P extends object>(
        component: FunctionComponent<P>,
        options?: Options<P>
    ): FunctionComponent<AnimateProps<P>>;
    <P extends object>(
        component: ComponentClass<P>,
        options?: Options<P>
    ): ComponentClass<AnimateProps<P>>;
    <P extends object>(component: ComponentType<P>, options?: Options<P>): any;
    (component: any, options?: Options<any>): ComponentClass<
        AnimateProps<FlatListProps<unknown>>
    >;
};

Lets you create an Animated version of any React Native component.
Parameter component
The component you want to make animatable.
Returns
A component that Reanimated is capable of animating.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/core/createAnimatedComponent
Deprecated
Please use Animated.FlatList component instead of calling Animated.createAnimatedComponent(FlatList) manually.

function FlatList

FlatList: <ItemT = any>(
    props: ReanimatedFlatListPropsWithLayout<ItemT> & {
        ref?: React.ForwardedRef<FlatList<any>> | undefined;
    }
) => React.ReactElement;

type Adaptable

type Adaptable<T> = _Adaptable<T>;

Deprecated
Please import Adaptable directly from react-native-reanimated instead of Animated namespace.

type AdaptTransforms

type AdaptTransforms<T> = _AdaptTransforms<T>;

Deprecated
Please import AdaptTransforms directly from react-native-reanimated instead of Animated namespace.

type AnimatedScrollViewProps

type AnimatedScrollViewProps = _AnimatedScrollViewProps;

Deprecated
Please import AnimatedScrollViewProps directly from react-native-reanimated instead of Animated namespace.

type AnimatedTransform

type AnimatedTransform = _AnimatedTransform;

Deprecated
Please import AnimatedTransform directly from react-native-reanimated instead of Animated namespace.

type AnimateProps

type AnimateProps<P extends object> = _AnimateProps<P>;

Deprecated
Please import AnimateProps directly from react-native-reanimated instead of Animated namespace.

type AnimateStyle

type AnimateStyle<S> = _AnimateStyle<S>;

Deprecated
Please import AnimateStyle directly from react-native-reanimated instead of Animated namespace.

type DerivedValue

type DerivedValue<T> = _DerivedValue<T>;

Deprecated
Please import DerivedValue directly from react-native-reanimated instead of Animated namespace.

type EasingFunction

type EasingFunction = _EasingFunction;

Deprecated
Please import EasingFunction directly from react-native-reanimated instead of Animated namespace.

type Extrapolate

type Extrapolate = typeof _Extrapolate;

Deprecated
Please import Extrapolate directly from react-native-reanimated instead of Animated namespace.

type FlatList

type ReanimatedFlatList<T> = typeof AnimatedFlatList & AnimatedFlatListComplement<T>;

type FlatListPropsWithLayout

type FlatListPropsWithLayout<T> = _FlatListPropsWithLayout<T>;

Deprecated
Please import FlatListPropsWithLayout directly from react-native-reanimated instead of Animated namespace.

type Image

type AnimatedImage = typeof AnimatedImage & AnimatedImageComplement;

type ScrollView

type AnimatedScrollView = AnimatedScrollViewComplement &
    typeof AnimatedScrollViewComponent;

type SharedValue

type SharedValue<T> = _SharedValue<T>;

Deprecated
Please import SharedValue directly from react-native-reanimated instead of Animated namespace.

type StylesOrDefault

type StylesOrDefault<S> = _StylesOrDefault<S>;

Deprecated
Please import StylesOrDefault directly from react-native-reanimated instead of Animated namespace.

type Text

type AnimatedText = typeof AnimatedText & AnimatedTextComplement;

type TransformStyleTypes

type TransformStyleTypes = _TransformStyleTypes;

Deprecated
Please import TransformStyleTypes directly from react-native-reanimated instead of Animated namespace.

type View

type AnimatedView = typeof AnimatedView & AnimatedViewComplement;

namespace react-native-web/dist/exports/StyleSheet/compiler/createReactDOMStyle

module 'react-native-web/dist/exports/StyleSheet/compiler/createReactDOMStyle' {}

namespace react-native-web/dist/exports/StyleSheet/preprocess

module 'react-native-web/dist/exports/StyleSheet/preprocess' {}

Package Files (90)

Dependencies (11)

Dev Dependencies (55)

Peer Dependencies (3)

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-native-reanimated.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-native-reanimated)

HTML

<a href="https://www.jsdocs.io/package/react-native-reanimated"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 17 days ago.
Package analyzed in 12463 ms.
Missing or incorrect documentation? Open an issue for this package.

react-native-reanimated

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Enums

Type Aliases

Namespaces

Variables

variable dispatchCommand

Parameter animatedRef

Parameter commandName

Parameter args

See Also

variable Easing

variable Extrapolate

Deprecated

variable Keyframe

variable Layout

Deprecated

variable makeMutable

variable measure

Parameter animatedRef

Returns

See Also

variable ScreenTransition

variable scrollTo

Parameter animatedRef

Parameter x

Parameter y

Parameter animated

See Also

variable setGestureState

variable setNativeProps

Parameter animatedRef

Parameter updates

See Also

variable useAnimatedProps

Parameter updater

Parameter dependencies

Parameter adapters

Returns

See Also

variable useScrollViewOffset

Parameter animatedRef

Returns

See Also

variable withClamp

variable withDecay

Parameter config

Parameter callback

Returns

See Also

variable withDelay

Parameter delayMs

Parameter nextAnimation

Parameter reduceMotion

Returns

See Also

variable withRepeat

Parameter animation

Parameter numberOfReps

Parameter reverse

Parameter callback

Parameter reduceMotion

Returns

See Also

variable withSpring

Parameter toValue

Parameter config

Parameter callback

Returns

See Also

variable withTiming

Parameter toValue

Parameter config

Parameter callback