react-native-reanimated

react-native-reanimated

Version 4.6.0
Published 8 days ago
4.84 MB
2 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 createWorkletRuntime

const createWorkletRuntime: any;

Deprecated
Please import [createWorkletRuntime directly from react-native-worklets](https://docs.swmansion.com/react-native-worklets/docs/threading/createWorkletRuntime/) instead of react-native-reanimated.

variable css

const css: {
    create: <
        T extends {
            [P in keyof T]: StyleWithPseudoValues<
                Omit<
                    any,
                    | keyof SingleCSSAnimationSettings
                    | keyof SingleCSSTransitionSettings
                    | 'animationName'
                    | 'transitionProperty'
                    | 'transition'
                >
            > &
                Partial<
                    AddArrayPropertyTypes<SingleCSSAnimationSettings> & {
                        animationName:
                            | 'none'
                            | AddArrayPropertyType<
                                  CSSKeyframesRule | CSSAnimationKeyframes<any>
                              >;
                    } & AddArrayPropertyTypes<SingleCSSTransitionSettings> & {
                            transitionProperty?: CSSTransitionProperty<any>;
                            transition?: string;
                        }
                >;
        }
    >(
        styles: T & {
            [x: string]: StyleWithPseudoValues<
                Omit<
                    any,
                    | keyof SingleCSSAnimationSettings
                    | keyof SingleCSSTransitionSettings
                    | 'animationName'
                    | 'transitionProperty'
                    | 'transition'
                >
            > &
                Partial<
                    AddArrayPropertyTypes<SingleCSSAnimationSettings> & {
                        animationName:
                            | 'none'
                            | AddArrayPropertyType<
                                  CSSKeyframesRule | CSSAnimationKeyframes<any>
                              >;
                    } & AddArrayPropertyTypes<SingleCSSTransitionSettings> & {
                            transitionProperty?: CSSTransitionProperty<any>;
                            transition?: string;
                        }
                >;
        }
    ) => T;
    keyframes: typeof keyframes;
};

variable dispatchCommand

const dispatchCommand: 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 executeOnUIRuntimeSync

const executeOnUIRuntimeSync: any;

Deprecated
Please use [runOnUISync from react-native-worklets](https://docs.swmansion.com/react-native-worklets/docs/threading/scheduleOnRN/) instead.
See the [migration guide](https://docs.swmansion.com/react-native-reanimated/docs/guides/migration-from-3.x/) for more details.

variable Extrapolate

const Extrapolate: typeof Extrapolation;

Deprecated
Please use Extrapolation instead

variable GentleSpringConfig

const GentleSpringConfig: {
    readonly damping: 120;
    readonly mass: 4;
    readonly stiffness: 900;
};

variable GentleSpringConfigWithDuration

const GentleSpringConfigWithDuration: {
    readonly duration: 550;
    readonly dampingRatio: 1;
};

variable isWorkletFunction

const isWorkletFunction: any;

Deprecated
Please import [isWorkletFunction directly from react-native-worklets](https://docs.swmansion.com/react-native-worklets/docs/utility/isWorkletFunction/) instead of react-native-reanimated.

variable Keyframe

const Keyframe: typeof ReanimatedKeyframe;

variable Layout

const Layout: typeof LinearTransition;

Deprecated
Please use LinearTransition instead.

variable makeShareableCloneRecursive

const makeShareableCloneRecursive: MakeShareableClone;

Deprecated
Please use [createSerializable from react-native-worklets](https://docs.swmansion.com/react-native-worklets/docs/memory/createSerializable/) instead.
See the [migration guide](https://docs.swmansion.com/react-native-reanimated/docs/guides/migration-from-3.x/) for more details.

variable Reanimated3DefaultSpringConfig

const Reanimated3DefaultSpringConfig: {
    readonly damping: 10;
    readonly mass: 1;
    readonly stiffness: 100;
};

variable Reanimated3DefaultSpringConfigWithDuration

const Reanimated3DefaultSpringConfigWithDuration: {
    readonly duration: 1333;
    readonly dampingRatio: 0.5;
};

variable reanimatedVersion

const reanimatedVersion: string;

We hardcode the version of Reanimated here in order to compare it with the version used to build the native part of the library in runtime. Remember to keep this in sync with the version declared in package.json

variable runOnJS

const runOnJS: any;

Deprecated
Please use [scheduleOnRN from react-native-worklets](https://docs.swmansion.com/react-native-worklets/docs/threading/scheduleOnRN/) instead.
See the [migration guide](https://docs.swmansion.com/react-native-reanimated/docs/guides/migration-from-3.x/) for more details.

variable runOnRuntime

const runOnRuntime: any;

Deprecated
Please use [scheduleOnRuntime from react-native-worklets](https://docs.swmansion.com/react-native-worklets/docs/threading/scheduleOnRuntime/) instead.
See the [migration guide](https://docs.swmansion.com/react-native-reanimated/docs/guides/migration-from-3.x/) for more details.

variable runOnUI

const runOnUI: any;

Deprecated
Please use [scheduleOnUI from react-native-worklets](https://docs.swmansion.com/react-native-worklets/docs/threading/scheduleOnUI/) instead.
See the [migration guide](https://docs.swmansion.com/react-native-reanimated/docs/guides/migration-from-3.x/) for more details.

variable ScreenTransition

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

variable SnappySpringConfig

const SnappySpringConfig: {
    readonly damping: 110;
    readonly mass: 4;
    readonly stiffness: 900;
    readonly overshootClamping: true;
};

variable SnappySpringConfigWithDuration

const SnappySpringConfigWithDuration: {
    readonly duration: 550;
    readonly dampingRatio: 0.92;
    readonly overshootClamping: true;
};

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 WigglySpringConfig

const WigglySpringConfig: {
    readonly damping: 90;
    readonly mass: 4;
    readonly stiffness: 900;
};

variable WigglySpringConfigWithDuration

const WigglySpringConfigWithDuration: {
    readonly duration: 550;
    readonly dampingRatio: 0.75;
};

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. Defaults to DecayConfig default values.
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. Defaults to GentleSpringConfig. You can use other predefined spring configurations, such as WigglySpringConfig, SnappySpringConfig, Reanimated3DefaultSpringConfig or create your own.
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. Defaults to TimingConfig default values.
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: () => void;

function advanceAnimationByTime

advanceAnimationByTime: () => void;

function cancelAnimation

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

Lets you cancel a running animation paired to a shared value. The cancellation is asynchronous.
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 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 contrastColor

contrastColor: (color: string | number) => 'white' | 'black';

Lets you pick a text color that stays readable on a given background, mirroring the CSS contrast-color() function.
Returns 'white' or 'black', whichever has the greater WCAG contrast ratio against color (white wins ties). Can be used in worklets, e.g. inside useAnimatedStyle.
Parameter color
Any color accepted by Reanimated ('#ff0000', 'rgb(...)', 'hsl(...)', named colors, numbers, etc.). Alpha is ignored. Invalid colors are treated as transparent black, so 'white' is returned.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/utilities/contrastColor

function convertToRGBA

convertToRGBA: (color: unknown) => ParsedColorArray;

function createAnimatedComponent

createAnimatedComponent: {
    <TInstance extends unknown>(
        Component: TInstance extends any ? never : TInstance,
        options?: Options<InitialComponentProps>
    ): AnimatedComponentType<Readonly<ComponentProps<TInstance>>, TInstance>;
    (
        Component: any,
        options?: Options<InitialComponentProps>
    ): AnimatedComponentType<
        ComponentProps<any>,
        any,
        { text?: SharedValueDisableContravariance<string> }
    >;
    <T = any>(
        Component: any,
        options?: Options<InitialComponentProps>
    ): AnimatedComponentType<FlatListProps<T>, ComponentRef<any>, object>;
};

Lets you create an Animated version of any React Native component.
Parameter Component
The component you want to make animatable.
Parameter options
Optional configuration object containing:
- setNativeProps: Function to set native props - jsProps: String array to select which props should be animated on JS
Returns
A component that Reanimated is capable of animating.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/core/createAnimatedComponent
text is the native prop backing TextInput's value. It's not part of TextInputProps, but Reanimated can update it directly, so the animated TextInput accepts it as a shared value. Static strings are still disallowed - use value or defaultValue for those. It's added only to the inline props (not to the base component props) so that useAnimatedProps, which supplies raw values, keeps accepting { text: string }.
Deprecated
Please use Animated.FlatList component instead of calling Animated.createAnimatedComponent(FlatList) manually.

function createAnimatedPropAdapter

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

function createCSSAnimatedComponent

createCSSAnimatedComponent: {
    <T = any>(Component: any): AnimatedComponentType<
        Readonly<FlatListProps<T>>,
        ComponentRef<typeof FlatList<T>>
    >;
    <TInstance extends ComponentType<any>>(
        Component: TInstance
    ): AnimatedComponentType<
        React.ComponentProps<TInstance>,
        ComponentRef<TInstance>
    >;
};

Deprecated
Please use Animated.FlatList component instead of calling Animated.createAnimatedComponent(FlatList) manually.
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

function cubicBezier

cubicBezier: (
    x1: number,
    y1: number,
    x2: number,
    y2: number
) => CubicBezierEasing;

function defineAnimation

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

function DynamicColorIOS

DynamicColorIOS: (tuple: DynamicColorIOSTuple) => OpaqueColorValue;

function enableLayoutAnimations

enableLayoutAnimations: (_flag: boolean, _isCallByUser?: boolean) => void;

Deprecated
This function no longer has any effect in Reanimated and will be removed in the future.

function finishScreenTransition

finishScreenTransition: (screenTransitionConfig: ScreenTransitionConfig) => void;

function getAnimatedStyle

getAnimatedStyle: () => void;

function getDynamicFeatureFlag

getDynamicFeatureFlag: (name: DynamicFlagName) => boolean;

function getRelativeCoords

getRelativeCoords: <TRef extends Partial<any>>(
    animatedRef: AnimatedRef<TRef>,
    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 getStaticFeatureFlag

getStaticFeatureFlag: (name: keyof StaticFeatureFlagsSchema) => boolean;

function getUseOfValueInStyleWarning

getUseOfValueInStyleWarning: () => string;

function getViewProp

getViewProp: <T>(
    viewTag: number,
    propName: string,
    component?: InternalHostInstance | null
) => Promise<T>;

function interpolate

interpolate: (
    value: 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 type
Determines what happens when the value goes beyond the input range. Defaults to ExtrapolationConfig with both extrapolateLeft and extrapolateRight set 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' | 'LAB',
        options?: InterpolationOptions
    ): string;
    (
        value: number,
        inputRange: readonly number[],
        outputRange: readonly number[],
        colorSpace?: 'RGB' | 'HSV' | 'LAB',
        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) => value is string;

function isConfigured

isConfigured: () => boolean;

Returns
false in Reanimated 4, true in Reanimated 3, doesn't exist in Reanimated 2 or 1
Deprecated
Please use the exported variable reanimatedVersion instead.

function isReanimated3

isReanimated3: () => boolean;

Returns
false in Reanimated 4, true in Reanimated 3, doesn't exist in Reanimated 2 or 1
Deprecated
Please use the exported variable reanimatedVersion instead.

function isSharedValue

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

function linear

linear: (...points: ControlPoint[]) => LinearEasing;

function makeMutable

makeMutable: <TValue>(initial: TValue) => Mutable<TValue>;

function measure

measure: <TRef extends unknown>(
    animatedRef: AnimatedRef<TRef>
) => MeasuredDimensions | null;

function PerformanceMonitor

PerformanceMonitor: ({ smoothingFrames }: PerformanceMonitorProps) => any;

A component that lets you measure fps values on JS and UI threads.
Parameter smoothingFrames
Determines amount of saved frames which will be used for fps value smoothing. Defaults to 20.

function PlatformColor

PlatformColor: (...names: string[]) => OpaqueColorValue;

Copied from: https://github.com/facebook/react-native/blob/v0.81.0/packages/react-native/Libraries/StyleSheet/PlatformColorValueTypes.d.ts

function processColor

processColor: {
    (value: string | number, context?: ValueProcessorContext): number;
    (value: unknown, context?: ValueProcessorContext): ProcessedColor;
};

Processes a color value and returns a normalized color representation.
Parameter value
The color value to process (string, number, or ColorValue)
Parameter context
Optional for target-specific processing context (e.g. CSS)
Returns
The processed color value - number for valid colors, false for transparent colors

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/device/ReducedMotionConfig

function scrollTo

scrollTo: <TRef extends unknown>(
    animatedRef: AnimatedRef<TRef>,
    x: number,
    y: number,
    animated: boolean
) => void;

function setDynamicFeatureFlag

setDynamicFeatureFlag: (name: DynamicFlagName, value: boolean) => void;

function setGestureState

setGestureState: (_handlerTag: number, _newState: number) => void;

function setNativeProps

setNativeProps: <TRef extends unknown>(
    animatedRef: AnimatedRef<TRef>,
    updates: StyleProps
) => void;

function setUpTests

setUpTests: () => void;

function SharedTransitionBoundary

SharedTransitionBoundary: ({
    isActive,
    children,
}: SharedTransitionBoundaryProps) => any;

function startMapper

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

function startScreenTransition

startScreenTransition: (screenTransitionConfig: ScreenTransitionConfig) => void;

function steps

steps: (stepsNumber: number, modifier?: StepsModifier) => StepsEasing;

function stopMapper

stopMapper: (mapperID: number) => void;

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
Deprecated
Please use react-native-keyboard-controller instead. See https://docs.swmansion.com/react-native-reanimated/docs/device/useAnimatedKeyboard#migration-guide

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: <TRef extends unknown = HostInstance>() => AnimatedRef<TRef>;

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 the reference object.
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
) => AnimatedStyleHandle<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 corresponding "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?: readonly 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 UnknownRecord>(
    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. Only relevant when using Reanimated without the Babel plugin on the Web.
Returns
An object containing a boolean indicating whether the dependencies have changed.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/advanced/useHandler

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 useScrollOffset

useScrollOffset: <TRef extends unknown>(
    animatedRef: Maybe<AnimatedRef<TRef>>,
    providedOffset?: SharedValue<number>
) => SharedValue<number>;

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

function useScrollViewOffset

useScrollViewOffset: <TRef extends unknown>(
    animatedRef: Maybe<AnimatedRef<TRef>>,
    providedOffset?: SharedValue<number>
) => SharedValue<number>;

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

function useSharedValue

useSharedValue: <Value>(
    initialValue: Value | (() => 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. You can also pass a function that returns the initial value; it is called once on mount. Useful when the initial value is expensive to compute.
**Warning:** Don't store functions (including worklets) inside shared values.
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 useTimestamp

useTimestamp: (isActive?: boolean) => SharedValue<number>;

Lets you access the current frame timestamp as a [Shared Value](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/glossary#shared-value).
For best performance, prefer to re-use a single useTimestamp timer instead of creating multiple ones.
Parameter isActive
Whether the timestamp should update. Defaults to true.
Returns
A shared value that updates every frame with the time elapsed since the first frame.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/advanced/useTimestamp

function withReanimatedTimer

withReanimatedTimer: () => 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<TransformsConfig<[Scale]>>
    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<TransformsConfig<[TranslateY]>>
    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<TransformsConfig<[TranslateX]>>
    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<TransformsConfig<[TranslateX]>>
    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<TransformsConfig<[TranslateY]>>
    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<TransformsConfig<[Scale]>>
    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<TransformsConfig<[TranslateY]>>
    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<TransformsConfig<[TranslateX]>>
    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<TransformsConfig<[TranslateX]>>
    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<TransformsConfig<[TranslateY]>>
    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<TValues = StyleProps> extends AnimationConfigBuilder {}

property initialValues

initialValues?: Partial<TValues>;

property targetValues

targetValues?: Partial<TValues>;

method withInitialValues

static withInitialValues: <TValues>(
    this: ComplexAnimationBuilderClass<TValues>,
    values: Partial<TValues>
) => ComplexAnimationBuilder<TValues>;

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

method withTargetValues

static withTargetValues: <TValues>(
    this: ComplexAnimationBuilderClass<TValues>,
    values: Partial<TValues>
) => ComplexAnimationBuilder<TValues>;

Lets you override the target properties 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 | EasingFunctionFactory;

property easingWidthV

easingWidthV: EasingFunction | EasingFunctionFactory;

property easingXV

easingXV: EasingFunction | EasingFunctionFactory;

property easingYV

easingYV: EasingFunction | EasingFunctionFactory;

property presetName

static presetName: string;

method createInstance

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

method easingHeight

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

method easingWidth

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

method easingX

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

method easingY

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

class EntryExitTransition

class EntryExitTransition
    extends BaseAnimationBuilder
    implements ILayoutAnimationBuilder {}

property build

build: () => LayoutAnimationFunction;

property enteringV

enteringV: BaseAnimationBuilder | typeof BaseAnimationBuilder;

property exitingV

exitingV: BaseAnimationBuilder | typeof 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<{
        opacity: number;
    }>
    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<
        {
            opacity: number;
        } & TransformsConfig<[TranslateY]>
    >
    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<
        {
            opacity: number;
        } & TransformsConfig<[TranslateX]>
    >
    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<
        {
            opacity: number;
        } & TransformsConfig<[TranslateX]>
    >
    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<
        {
            opacity: number;
        } & TransformsConfig<[TranslateY]>
    >
    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<{
        opacity: number;
    }>
    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<
        {
            opacity: number;
        } & TransformsConfig<[TranslateY]>
    >
    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: () => AnimationConfigFunction<ExitAnimationsValues>;

property presetName

static presetName: string;

method createInstance

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

class FadeOutLeft

class FadeOutLeft
    extends ComplexAnimationBuilder<
        {
            opacity: number;
        } & TransformsConfig<[TranslateX]>
    >
    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<
        {
            opacity: number;
        } & TransformsConfig<[TranslateX]>
    >
    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<
        {
            opacity: number;
        } & TransformsConfig<[TranslateY]>
    >
    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<TransformsConfig<[Perspective, RotateX]>>
    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<TransformsConfig<[Perspective, RotateY]>>
    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<
        TransformsConfig<[Perspective, RotateX, TranslateY]>
    >
    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<
        TransformsConfig<[Perspective, RotateX, TranslateY]>
    >
    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<
        TransformsConfig<[Perspective, RotateY, TranslateX]>
    >
    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<
        TransformsConfig<[Perspective, RotateY, TranslateX]>
    >
    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<TransformsConfig<[Perspective, RotateX]>>
    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<TransformsConfig<[Perspective, RotateY]>>
    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<
        TransformsConfig<[Perspective, RotateX, TranslateY]>
    >
    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<
        TransformsConfig<[Perspective, RotateX, TranslateY]>
    >
    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<
        TransformsConfig<[Perspective, RotateY, TranslateX]>
    >
    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<
        TransformsConfig<[Perspective, RotateY, TranslateX]>
    >
    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 getComponentViewTag

getComponentViewTag: () => number;

method getMaybeRefTrackedChild

getMaybeRefTrackedChild: () => ReactNode;

method getMaybeWrappedChildren

getMaybeWrappedChildren: () =>
    | string
    | number
    | bigint
    | boolean
    | import('react').ReactElement<
          unknown,
          string | import('react').JSXElementConstructor<any>
      >
    | Iterable<ReactNode>
    | Promise<
          | string
          | number
          | bigint
          | boolean
          | import('react').ReactPortal
          | import('react').ReactElement<
                unknown,
                string | import('react').JSXElementConstructor<any>
            >
          | Iterable<ReactNode>
          | null
          | undefined
      >
    | import('react').JSX.Element[]
    | null
    | undefined;

method render

render: () => ReactNode;

method setShouldAnimateExiting

setShouldAnimateExiting: () => void;

class LightSpeedInLeft

class LightSpeedInLeft
    extends ComplexAnimationBuilder<
        {
            opacity: number;
        } & TransformsConfig<[TranslateX, SkewX]>
    >
    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<
        {
            opacity: number;
        } & TransformsConfig<[TranslateX, SkewX]>
    >
    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<
        {
            opacity: number;
        } & TransformsConfig<[TranslateX, SkewX]>
    >
    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<
        {
            opacity: number;
        } & TransformsConfig<[TranslateX, SkewX]>
    >
    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 AnimationConfigBuilder
    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 NativeEventsManager

class NativeEventsManager implements INativeEventsManager {}

constructor

constructor(component: any, options?: ComponentOptions);

method attachEvents

attachEvents: () => void;

method detachEvents

detachEvents: () => void;

method updateEvents

updateEvents: (prevProps: AnimatedComponentProps<InitialComponentProps>) => void;

class PinwheelIn

class PinwheelIn
    extends ComplexAnimationBuilder<
        {
            opacity: number;
        } & TransformsConfig<[Scale, Rotate]>
    >
    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<
        {
            opacity: number;
        } & TransformsConfig<[Scale, Rotate]>
    >
    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 ReanimatedKeyframe

class ReanimatedKeyframe {}

constructor

constructor(definitions: ValidKeyframeProps);

method delay

delay: (delayMs: number) => ReanimatedKeyframe;

method duration

duration: (durationMs: number) => ReanimatedKeyframe;

method reduceMotion

reduceMotion: (reduceMotionV: ReduceMotion) => ReanimatedKeyframe;

method withCallback

withCallback: (callback: (finished: boolean) => void) => ReanimatedKeyframe;

class RollInLeft

class RollInLeft
    extends ComplexAnimationBuilder<TransformsConfig<[TranslateX, Rotate]>>
    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<TransformsConfig<[TranslateX, Rotate]>>
    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<TransformsConfig<[TranslateX, Rotate]>>
    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<TransformsConfig<[TranslateX, Rotate]>>
    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<
        {
            opacity: number;
        } & TransformsConfig<[Rotate, TranslateX, TranslateY]>
    >
    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<
        {
            opacity: number;
        } & TransformsConfig<[Rotate, TranslateX, TranslateY]>
    >
    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<
        {
            opacity: number;
        } & TransformsConfig<[Rotate, TranslateX, TranslateY]>
    >
    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<
        {
            opacity: number;
        } & TransformsConfig<[Rotate, TranslateX, TranslateY]>
    >
    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<
        {
            opacity: number;
        } & TransformsConfig<[Rotate, TranslateX, TranslateY]>
    >
    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<
        {
            opacity: number;
        } & TransformsConfig<[Rotate, TranslateX, TranslateY]>
    >
    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<
        {
            opacity: number;
        } & TransformsConfig<[Rotate, TranslateX, TranslateY]>
    >
    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<
        {
            opacity: number;
        } & TransformsConfig<[Rotate, TranslateX, TranslateY]>
    >
    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
    extends ComplexAnimationBuilder
    implements ILayoutAnimationBuilder {}

property build

build: () => LayoutAnimationFunction;

property presetName

static presetName: string;

method createInstance

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

class SlideInDown

class SlideInDown
    extends ComplexAnimationBuilder<{
        originY: number;
    }>
    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<{
        originX: number;
    }>
    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<{
        originX: number;
    }>
    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<{
        originY: number;
    }>
    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<{
        originY: number;
    }>
    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<{
        originX: number;
    }>
    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<{
        originX: number;
    }>
    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<{
        originY: number;
    }>
    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<TransformsConfig<[ScaleX]>>
    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<TransformsConfig<[ScaleY]>>
    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<TransformsConfig<[ScaleX]>>
    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<TransformsConfig<[ScaleY]>>
    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<TransformsConfig<[Scale]>>
    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<TransformsConfig<[TranslateY, Scale]>>
    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<TransformsConfig<[TranslateY, Scale]>>
    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<TransformsConfig<[TranslateY, Scale]>>
    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<TransformsConfig<[TranslateX, Scale]>>
    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<TransformsConfig<[TranslateX, Scale]>>
    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<TransformsConfig<[Scale, Rotate]>>
    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<TransformsConfig<[TranslateY, Scale]>>
    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<TransformsConfig<[Scale]>>
    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<TransformsConfig<[TranslateY, Scale]>>
    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<TransformsConfig<[TranslateY, Scale]>>
    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<TransformsConfig<[TranslateY, Scale]>>
    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<TransformsConfig<[TranslateX, Scale]>>
    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<TransformsConfig<[TranslateX, Scale]>>
    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<TransformsConfig<[Scale, Rotate]>>
    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<TransformsConfig<[TranslateY, Scale]>>
    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 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 | EasingFunctionFactory;

property energyThreshold

energyThreshold?: number;

property mass

mass?: number;

property overshootClamping

overshootClamping?: 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 CSSKeyframesRule

interface CSSKeyframesRule {}

property cssRules

readonly cssRules: CSSAnimationKeyframes;

property cssText

readonly cssText: string;

property length

readonly length: number;

property name

readonly name: string;

interface DecayAnimation

interface DecayAnimation extends Animation<DecayAnimation> {}

property current

current: AnimatableValue | undefined;

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 IEntryExitAnimationBuilder

interface IEntryExitAnimationBuilder {}

property build

build: () => EntryExitAnimationFunction;

interface ILayoutAnimationBuilder

interface ILayoutAnimationBuilder {}

property build

build: () => LayoutAnimationFunction;

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 KeyframeProps

interface KeyframeProps extends StyleProps {}

property easing

easing?: EasingFunction | EasingFunctionFactory;

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 SharedTransitionBoundaryProps

interface SharedTransitionBoundaryProps {}

property children

children?: React.ReactNode;

property isActive

isActive: boolean;

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?: (value: Value) => Value, 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 initialEnergy

initialEnergy: number;

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<TContext extends UnknownRecord> {}

property context

context: TContext;

property doDependenciesDiffer

doDependenciesDiffer: boolean;

Enums

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_NATIVE_ID = 5,
    SHARED_ELEMENT_TRANSITION_PROGRESS = 6,
    SHARED_ELEMENT_TRANSITION_PROGRESS_NATIVE_ID = 7,
}

member ENTERING

ENTERING = 1

member EXITING

EXITING = 2

member LAYOUT

LAYOUT = 3

member SHARED_ELEMENT_TRANSITION

SHARED_ELEMENT_TRANSITION = 4

member SHARED_ELEMENT_TRANSITION_NATIVE_ID

SHARED_ELEMENT_TRANSITION_NATIVE_ID = 5

member SHARED_ELEMENT_TRANSITION_PROGRESS

SHARED_ELEMENT_TRANSITION_PROGRESS = 6

member SHARED_ELEMENT_TRANSITION_PROGRESS_NATIVE_ID

SHARED_ELEMENT_TRANSITION_PROGRESS_NATIVE_ID = 7

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

Type Aliases

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 & {
        /**
         * Lets you animate component props.
         *
         * @see https://docs.swmansion.com/react-native-reanimated/docs/core/useAnimatedProps
         */
        animatedProps?: NestedArray<
            CSSStyle<ComponentPropsWithoutStyle<Partial<Props>>>
        >;
    } & SharedTransitionProps;

type AnimatedRef

type AnimatedRef<TRef extends InstanceOrElement = HostInstance> = {
    (ref?: AnimatedRefCurrent<TRef> | null): ShadowNodeWrapper | HTMLElement;
    current: AnimatedRefCurrent<TRef> | null;
    observe: (observer: AnimatedRefObserver) => ObserverUnsubscribe;
    getTag?: () => Maybe<number>;
};

type AnimatedScreenTransition

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

type AnimatedScrollViewProps

type AnimatedScrollViewProps = ComponentProps<typeof AnimatedScrollViewComponent> & {
    scrollViewOffset?: SharedValue<number>;
};

type AnimatedSensor

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

type AnimatedStyle

type AnimatedStyle<TStyle> =
    | CSSStyle<TStyle>
    | MaybeSharedValueRecursive<TStyle>
    | AnimatedStyleHandle<TStyle>;

type AnimatedTransform

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

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 CSSAnimationCallback

type CSSAnimationCallback = (event: CSSAnimationEvent) => void;

type CSSAnimationDelay

type CSSAnimationDelay = TimeUnit;

type CSSAnimationDirection

type CSSAnimationDirection =
    | 'normal'
    | 'reverse'
    | 'alternate'
    | 'alternate-reverse';

type CSSAnimationDuration

type CSSAnimationDuration = TimeUnit;

type CSSAnimationEvent

type CSSAnimationEvent = {
    /**
     * The name of the keyframes that fired the event (matches the `name` of a
     * `css.keyframes(...)` rule).
     */
    animationName: string;
    /**
     * The amount of time the animation had been running, in seconds, when the
     * event fired.
     */
    elapsedTime: number;
};

Payload for a CSS animation callback.

type CSSAnimationFillMode

type CSSAnimationFillMode = 'none' | 'forwards' | 'backwards' | 'both';

type CSSAnimationIterationCount

type CSSAnimationIterationCount = 'infinite' | number;

type CSSAnimationKeyframes

type CSSAnimationKeyframes<S extends object = DefaultStyle> = Record<
    CSSAnimationKeyframeSelector,
    CSSAnimationKeyframeBlock<S>
>;

type CSSAnimationKeyframeSelector

type CSSAnimationKeyframeSelector = string | number;

type CSSAnimationPlayState

type CSSAnimationPlayState = 'running' | 'paused';

type CSSAnimationProperties

type CSSAnimationProperties<S extends object = DefaultStyle> =
    CSSAnimationSettings & {
        animationName:
            | AddArrayPropertyType<CSSKeyframesRule | CSSAnimationKeyframes<S>>
            | 'none';
    };

type CSSAnimationSettings

type CSSAnimationSettings = AddArrayPropertyTypes<SingleCSSAnimationSettings>;

type CSSAnimationTimingFunction

type CSSAnimationTimingFunction = CSSTimingFunction;

type CSSCallbackProps

type CSSCallbackProps = Partial<CSSAnimationCallbacks & CSSTransitionCallbacks>;

type CSSGradientStop

type CSSGradientStop = {
    offset: NumberProp;
    color?: ColorValue | number;
    opacity?: NumberProp;
};

type CSSLinearGradientProps

type CSSLinearGradientProps = {
    x1?: NumberProp;
    x2?: NumberProp;
    y1?: NumberProp;
    y2?: NumberProp;
    gradientUnits?: Units;
    id?: string;
    gradient?: CSSGradientStop[];
};

type CSSPseudoSelectorKey

type CSSPseudoSelectorKey = Simplify<
    'default' | NativePseudoSelectorKey | WebPseudoSelectorKey
>;

type CSSRadialGradientProps

type CSSRadialGradientProps = {
    fx?: NumberProp;
    fy?: NumberProp;
    rx?: NumberProp;
    ry?: NumberProp;
    cx?: NumberProp;
    cy?: NumberProp;
    r?: NumberProp;
    gradientUnits?: Units;
    id?: string;
    gradient?: CSSGradientStop[];
};

type CSSStyle

type CSSStyle<TStyle = DefaultStyle> = TStyle extends object
    ? StyleWithPseudoValues<Omit<TStyle, keyof CSSConfigProps>> &
          CSSConfigProps<TStyle>
    : never;

type CSSTransitionCallback

type CSSTransitionCallback = (event: CSSTransitionEvent) => void;

type CSSTransitionDelay

type CSSTransitionDelay = TimeUnit;

type CSSTransitionDuration

type CSSTransitionDuration = TimeUnit;

type CSSTransitionEvent

type CSSTransitionEvent = {
    /** The transitioning property, camelCased (e.g. `opacity`). */
    propertyName: string;
    /**
     * The amount of time the transition had been running, in seconds, when the
     * event fired.
     */
    elapsedTime: number;
};

Payload for a CSS transition callback, dispatched once per transitioning property.

type CSSTransitionProperties

type CSSTransitionProperties<S extends object = DefaultStyle> =
    CSSTransitionSettings & {
        transitionProperty?: CSSTransitionProperty<S>;
        transition?: CSSTransitionShorthand;
    };

type CSSTransitionProperty

type CSSTransitionProperty<S extends object = DefaultStyle> =
    | 'all'
    | 'none'
    | keyof S
    | ('all' | keyof S)[];

type CSSTransitionSettings

type CSSTransitionSettings = AddArrayPropertyTypes<SingleCSSTransitionSettings>;

type CSSTransitionShorthand

type CSSTransitionShorthand = string;

type CSSTransitionTimingFunction

type CSSTransitionTimingFunction = CSSTimingFunction;

type EasingFunction

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

type EasingFunctionFactory

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

The Easing module implements common easing functions. This module is used by [Animate.timing()](docs/animate.html#timing) to convey physically believable motion in animations.
You can find a visualization of some common easing functions at http://easings.net/
### Predefined animations
The Easing module provides several predefined animations through the following methods:
- [back](docs/easing.html#back) provides a simple animation where the object goes slightly back before moving forward - [bounce](docs/easing.html#bounce) provides a bouncing animation - [ease](docs/easing.html#ease) provides a simple inertial animation - [elastic](docs/easing.html#elastic) provides a simple spring interaction
### Standard functions
Three standard easing functions are provided:
- [linear](docs/easing.html#linear) - [quad](docs/easing.html#quad) - [cubic](docs/easing.html#cubic)
The [poly](docs/easing.html#poly) function can be used to implement quartic, quintic, and other higher power functions.
### Additional functions
Additional mathematical functions are provided by the following methods:
- [bezier](docs/easing.html#bezier) provides a cubic bezier curve - [circle](docs/easing.html#circle) provides a circular function - [sin](docs/easing.html#sin) provides a sinusoidal function - [exp](docs/easing.html#exp) provides an exponential function
The following helpers are used to modify other easing functions.
- [in](docs/easing.html#in) runs an easing function forwards - [inOut](docs/easing.html#inout) makes any easing function symmetrical - [out](docs/easing.html#out) runs an easing function backwards

type EntryAnimationsValues

type EntryAnimationsValues = TargetLayoutAnimationValues & WindowDimensions;

type EntryExitAnimationFunction

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

type EntryOrExitLayoutType

type EntryOrExitLayoutType =
    | BaseAnimationBuilder
    | typeof BaseAnimationBuilder
    | EntryExitAnimationFunction
    | ReanimatedKeyframe;

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 = CurrentLayoutAnimationValues & 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: LayoutAnimationValues
) => LayoutAnimation;

type LayoutAnimationStartFunction

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

type LayoutAnimationsValues

type LayoutAnimationValues = CurrentLayoutAnimationValues &
    TargetLayoutAnimationValues &
    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 TransformArrayItem

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

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 = WorkletRuntimeFromWorklets;

Deprecated
Please import WorkletRuntime directly from react-native-worklets instead of react-native-reanimated.

Namespaces

namespace default

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

variable Image

const Image: AnimatedComponentType<ComponentProps<any>, ComponentRef<any>, object>;

variable Text

const Text: AnimatedComponentType<ComponentProps<any>, ComponentRef<any>, object>;

variable View

const View: AnimatedComponentType<ComponentProps<any>, ComponentRef<any>, object>;

function addWhitelistedNativeProps

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

Deprecated
This function is a no-op in Reanimated 4.

function addWhitelistedUIProps

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

Deprecated
This function is a no-op in Reanimated 4.

function createAnimatedComponent

createAnimatedComponent: {
    <TInstance extends unknown>(
        Component: TInstance extends any ? never : TInstance,
        options?: Options<InitialComponentProps>
    ): AnimatedComponentType<Readonly<ComponentProps<TInstance>>, TInstance>;
    (
        Component: any,
        options?: Options<InitialComponentProps>
    ): AnimatedComponentType<
        ComponentProps<any>,
        any,
        { text?: SharedValueDisableContravariance<string> }
    >;
    <T = any>(
        Component: any,
        options?: Options<InitialComponentProps>
    ): AnimatedComponentType<FlatListProps<T>, ComponentRef<any>, object>;
};

Lets you create an Animated version of any React Native component.
Parameter Component
The component you want to make animatable.
Parameter options
Optional configuration object containing:
- setNativeProps: Function to set native props - jsProps: String array to select which props should be animated on JS
Returns
A component that Reanimated is capable of animating.
See Also
- https://docs.swmansion.com/react-native-reanimated/docs/core/createAnimatedComponent
text is the native prop backing TextInput's value. It's not part of TextInputProps, but Reanimated can update it directly, so the animated TextInput accepts it as a shared value. Static strings are still disallowed - use value or defaultValue for those. It's added only to the inline props (not to the base component props) so that useAnimatedProps, which supplies raw values, keeps accepting { text: string }.
Deprecated
Please use Animated.FlatList component instead of calling Animated.createAnimatedComponent(FlatList) manually.

function FlatList

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

function ScrollView

ScrollView: ({
    scrollViewOffset,
    ref,
    ...restProps
}: AnimatedScrollViewProps) => React.JSX.Element;

type FlatList

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

type Image

type AnimatedImage = typeof AnimatedImage & AnimatedImageComplement;

type ScrollView

type AnimatedScrollView = AnimatedScrollViewComplement &
    typeof AnimatedScrollViewComponent;

type Text

type AnimatedText = typeof AnimatedText & AnimatedTextComplement;

type View

type AnimatedView = typeof AnimatedView & AnimatedViewComplement;

namespace react-native-web/dist/cjs/exports/StyleSheet/compiler/createReactDOMStyle.js

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

namespace react-native-web/dist/cjs/exports/StyleSheet/preprocess.js

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

Package Files (103)

Dependencies (2)

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 1 second ago.
Package analyzed in 15019 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 createWorkletRuntime

Deprecated

variable css

variable dispatchCommand

variable Easing

variable executeOnUIRuntimeSync

Deprecated

variable Extrapolate

Deprecated

variable GentleSpringConfig

variable GentleSpringConfigWithDuration

variable isWorkletFunction

Deprecated

variable Keyframe

variable Layout

Deprecated

variable makeShareableCloneRecursive

Deprecated

variable Reanimated3DefaultSpringConfig

variable Reanimated3DefaultSpringConfigWithDuration

variable reanimatedVersion

variable runOnJS

Deprecated

variable runOnRuntime

Deprecated

variable runOnUI

Deprecated

variable ScreenTransition

variable SnappySpringConfig

variable SnappySpringConfigWithDuration

variable useAnimatedProps

Parameter updater

Parameter dependencies

Parameter adapters

Returns

See Also

variable WigglySpringConfig

variable WigglySpringConfigWithDuration

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