or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

animated-components.mdanimation-functions.mdconfiguration-utilities.mdcore-reactive-system.mdcss-integration.mdevent-handling.mdindex.mdinterpolation-easing.mdlayout-animations.mdplatform-functions.mdscreen-transitions.mdtesting-utilities.mdworklet-functions.md
tile.json

tessl/npm-react-native-reanimated

More powerful alternative to Animated library for React Native with UI thread animations and advanced gesture handling.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-native-reanimated@4.1.x

To install, run

npx @tessl/cli install tessl/npm-react-native-reanimated@4.1.0

index.mddocs/

React Native Reanimated

React Native Reanimated is a comprehensive animation library that provides a more powerful and performant alternative to React Native's built-in Animated library. It enables developers to create smooth, complex animations that run on the UI thread for optimal performance, utilizing a declarative API with animated values, worklets, and gesture handling.

Package Information

  • Package Name: react-native-reanimated
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install react-native-reanimated
  • Platforms: iOS, Android, Web, macOS, tvOS

Core Imports

Default import (recommended):

import Animated from "react-native-reanimated";

Named imports:

import {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  withSpring,
  Easing
} from "react-native-reanimated";

CommonJS:

const Animated = require("react-native-reanimated").default;
const { useSharedValue, useAnimatedStyle, withTiming } = require("react-native-reanimated");

Basic Usage

import React from "react";
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withTiming,
  withSpring,
} from "react-native-reanimated";
import { View, Button } from "react-native";

export default function BasicExample() {
  const scale = useSharedValue(1);
  const opacity = useSharedValue(1);

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }],
    opacity: opacity.value,
  }));

  const handlePress = () => {
    scale.value = withSpring(scale.value === 1 ? 1.5 : 1);
    opacity.value = withTiming(opacity.value === 1 ? 0.5 : 1);
  };

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Animated.View
        style={[
          { width: 100, height: 100, backgroundColor: "blue" },
          animatedStyle,
        ]}
      />
      <Button title="Animate" onPress={handlePress} />
    </View>
  );
}

Architecture

React Native Reanimated is built around several key components:

  • Shared Values: Thread-safe values accessible from both JS and UI threads
  • Worklets: JavaScript functions that can execute on the UI thread for optimal performance
  • Animation Functions: Declarative animation utilities (withTiming, withSpring, etc.)
  • Animated Components: High-performance versions of React Native components
  • Layout Animations: Pre-built animations for component mounting, unmounting, and layout changes
  • Event Handlers: Optimized handlers for gestures, scrolling, and other user interactions

Capabilities

Core Reactive System

Foundation for all Reanimated animations using shared values and reactive updates.

function useSharedValue<T>(initialValue: T): SharedValue<T>;
function useAnimatedStyle<T>(
  updater: () => T,
  dependencies?: React.DependencyList
): AnimatedStyleHandle;
function useDerivedValue<T>(
  processor: () => T,
  dependencies?: React.DependencyList
): DerivedValue<T>;

Core Reactive System

Animation Functions

Declarative animation utilities for creating smooth, performant animations.

function withTiming<T extends AnimatableValue>(
  toValue: T,
  config?: WithTimingConfig,
  callback?: AnimationCallback
): T;
function withSpring<T extends AnimatableValue>(
  toValue: T,
  config?: WithSpringConfig,
  callback?: AnimationCallback
): T;
function withDecay(
  config: WithDecayConfig,
  callback?: AnimationCallback
): number;

Animation Functions

Animated Components

High-performance animated versions of React Native components with optimized rendering.

const Animated: {
  View: AnimatedComponent<typeof View>;
  Text: AnimatedComponent<typeof Text>;
  ScrollView: AnimatedComponent<typeof ScrollView>;
  Image: AnimatedComponent<typeof Image>;
  FlatList: AnimatedComponent<typeof FlatList>;
  createAnimatedComponent: <T>(component: T) => AnimatedComponent<T>;
};

Animated Components

Layout Animations

Pre-built animations for component lifecycle events and layout changes.

// Entry animations
const FadeIn: IEntryExitAnimationBuilder;
const SlideInLeft: IEntryExitAnimationBuilder;
const BounceIn: IEntryExitAnimationBuilder;

// Exit animations  
const FadeOut: IEntryExitAnimationBuilder;
const SlideOutRight: IEntryExitAnimationBuilder;
const BounceOut: IEntryExitAnimationBuilder;

// Layout transitions
const Layout: ILayoutAnimationBuilder;
const LinearTransition: ILayoutAnimationBuilder;

Layout Animations

Event Handling

Optimized handlers for user interactions, scrolling, and device events.

function useAnimatedScrollHandler<T>(
  handler: ScrollHandler<T>
): ScrollHandlerProcessed<T>;
function useAnimatedReaction<T>(
  prepare: () => T,
  react: (prepared: T) => void,
  dependencies?: React.DependencyList
): void;
function useAnimatedKeyboard(): AnimatedKeyboardInfo;

Event Handling

Interpolation and Easing

Mathematical functions for smooth value transitions and custom animation curves.

function interpolate(
  value: number,
  inputRange: readonly number[],
  outputRange: readonly number[],
  extrapolate?: ExtrapolationType
): number;
function interpolateColor(
  value: number,
  inputRange: readonly number[],
  outputRange: readonly string[],
  colorSpace?: ColorSpace
): string;

Interpolation and Easing

Worklet Functions

Functions for executing code on the UI thread and managing worklet runtimes.

function runOnUI<Args extends readonly unknown[], Return>(
  worklet: WorkletFunction<Args, Return>
): (...args: Args) => void;
function runOnJS<Args extends readonly unknown[], Return>(
  jsFunction: (...args: Args) => Return
): WorkletFunction<Args, void>;

Worklet Functions

Platform Functions

Utilities for measuring components, scrolling, and native platform integration.

function measure(ref: AnimatedRef<any>): MeasuredDimensions | null;
function scrollTo(
  ref: AnimatedRef<any>,
  x: number,
  y: number,
  animated: boolean
): void;

Platform Functions

CSS Integration

Web-compatible CSS animation and styling features that work across platforms.

const css: {
  create: <T extends NamedStyles<T>>(styles: T) => T;
  keyframes: (keyframes: CSSAnimationKeyframes) => CSSKeyframesRule;
};
function cubicBezier(x1: number, y1: number, x2: number, y2: number): CubicBezierEasing;
function steps(stepsNumber: number, modifier?: StepsModifier): StepsEasing;
function linear(...points: ControlPoint[]): LinearEasing;

CSS Integration

Screen Transitions

Gesture-driven screen navigation animations for React Native applications.

function startScreenTransition(config: ScreenTransitionConfig): void;
function finishScreenTransition(config: ScreenTransitionConfig): void;
const ScreenTransition: {
  SwipeRight: AnimatedScreenTransition;
  SwipeLeft: AnimatedScreenTransition;
  SwipeDown: AnimatedScreenTransition;
  SwipeUp: AnimatedScreenTransition;
};

Screen Transitions

Testing Utilities

Jest matchers and helper functions for testing animated components.

function setUpTests(framerateConfig?: { fps?: number }): void;
function getAnimatedStyle(component: ReactTestInstance): DefaultStyle;
function advanceAnimationByTime(time?: number): void; // Deprecated
function advanceAnimationByFrame(count: number): void; // Deprecated  
function withReanimatedTimer(animationTest: () => void): void; // Deprecated

Testing Utilities

Configuration and Utilities

Configuration functions, feature flags, and utility functions for customizing Reanimated.

function addWhitelistedNativeProps(props: string[]): void;
function addWhitelistedUIProps(props: string[]): void;
function configureReanimatedLogger(config: LoggerConfig): void;
function getStaticFeatureFlag(flag: string): boolean | undefined;
function setDynamicFeatureFlag(flag: string, value: boolean): void;
function createAnimatedPropAdapter<T>(adapter: (props: T) => T): AnimatedPropAdapter<T>;
const reanimatedVersion: string;

Configuration and Utilities

Types

Core Types

interface SharedValue<T> {
  value: T;
  addListener: (listenerID: number, listener: (value: T) => void) => void;
  removeListener: (listenerID: number) => void;
  modify: (modifier: (value: T) => T) => void;
}

interface DerivedValue<T> {
  readonly value: T;
}

type AnimatableValue = number | string | number[];

interface AnimationCallback {
  (finished?: boolean, current?: AnimatableValue): void;
}

interface WithTimingConfig {
  duration?: number;
  easing?: EasingFunction;
  reduceMotion?: ReduceMotion;
}

interface WithSpringConfig {
  damping?: number;
  mass?: number;
  stiffness?: number;
  overshootClamping?: boolean;
  restDisplacementThreshold?: number;
  restSpeedThreshold?: number;
  velocity?: number | { x: number; y: number };
  reduceMotion?: ReduceMotion;
}

interface WithDecayConfig {
  deceleration?: number;
  velocity?: number;
  clamp?: readonly [number, number];
  velocityFactor?: number;
  rubberBandFactor?: number;
}

Animation Types

interface AnimationObject {
  __reanimatedWorkletInit?: boolean;
  __remoteFunction?: WorkletFunction;
  callback?: AnimationCallback;
  current?: AnimatableValue;
  finished?: boolean;
  strippedCurrent?: number;
  cancelled?: boolean;
  reduceMotion?: ReduceMotion;
}

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

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

type ExtrapolationType = Extrapolation;

enum ColorSpace {
  RGB = "rgb",
  HSV = "hsv"
}

Component Types

type AnimatedComponent<T> = T & {
  getAnimatedStyle?: () => any;
};

type AnimatedStyle<T = any> = {
  [K in keyof T]: T[K] | SharedValue<T[K]> | DerivedValue<T[K]>;
};

type AnimatedProps<T> = {
  [K in keyof T]: T[K] | SharedValue<T[K]> | DerivedValue<T[K]>;
};

interface AnimatedRef<T> {
  current: T | null;
  (component?: T | null): void;
}

Layout Animation Types

interface IEntryExitAnimationBuilder {
  duration(durationMs: number): IEntryExitAnimationBuilder;
  delay(delayMs: number): IEntryExitAnimationBuilder;
  springify(): IEntryExitAnimationBuilder;
  damping(dampingFactor: number): IEntryExitAnimationBuilder;
  mass(mass: number): IEntryExitAnimationBuilder;
  stiffness(stiffnessFactor: number): IEntryExitAnimationBuilder;
  overshootClamping(overshootClamping: number): IEntryExitAnimationBuilder;
  restDisplacementThreshold(restDisplacementThreshold: number): IEntryExitAnimationBuilder;
  restSpeedThreshold(restSpeedThreshold: number): IEntryExitAnimationBuilder;
  withCallback(callback: (finished: boolean) => void): IEntryExitAnimationBuilder;
  withInitialValues(values: StyleProps): IEntryExitAnimationBuilder;
  randomDelay(): IEntryExitAnimationBuilder;
  build(): LayoutAnimationFunction;
}

interface ILayoutAnimationBuilder {
  duration(durationMs: number): ILayoutAnimationBuilder;
  delay(delayMs: number): ILayoutAnimationBuilder;
  springify(): ILayoutAnimationBuilder;
  damping(dampingFactor: number): ILayoutAnimationBuilder;
  mass(mass: number): ILayoutAnimationBuilder;
  stiffness(stiffnessFactor: number): ILayoutAnimationBuilder;
  overshootClamping(overshootClamping: number): ILayoutAnimationBuilder;
  restDisplacementThreshold(restDisplacementThreshold: number): ILayoutAnimationBuilder;
  restSpeedThreshold(restSpeedThreshold: number): ILayoutAnimationBuilder;
  withCallback(callback: (finished: boolean) => void): ILayoutAnimationBuilder;
  randomDelay(): ILayoutAnimationBuilder;
  build(): LayoutAnimationFunction;
}