CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-native-reanimated

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

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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;
}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-native-reanimated@4.1.x
Publish Source
CLI
Badge
tessl/npm-react-native-reanimated badge