or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

animation-registry.mdbuiltin-animations.mdcomponent-creation.mdcustom-animations.mddeclarative-animation.mdimperative-animation.mdindex.mdprebuilt-components.md
tile.json

tessl/npm-react-native-animatable

Easy to use declarative transitions and animations for React Native

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

To install, run

npx @tessl/cli install tessl/npm-react-native-animatable@1.4.0

index.mddocs/

React Native Animatable

React Native Animatable provides easy-to-use declarative transitions and animations for React Native applications. It offers a comprehensive set of pre-built animations, custom animation creation capabilities, and both declarative and imperative animation APIs with full TypeScript support.

Package Information

  • Package Name: react-native-animatable
  • Package Type: npm
  • Language: JavaScript (with TypeScript definitions)
  • Installation: npm install react-native-animatable --save

Core Imports

import * as Animatable from 'react-native-animatable';

ES6 destructuring:

import { View, Text, Image, createAnimatableComponent } from 'react-native-animatable';

CommonJS:

const Animatable = require('react-native-animatable');

Basic Usage

import * as Animatable from 'react-native-animatable';

// Declarative animation with pre-built animation
<Animatable.Text animation="zoomInUp" duration={1000}>
  Zoom me up, Scotty
</Animatable.Text>

// Custom animatable component
const AnimatedButton = Animatable.createAnimatableComponent(TouchableOpacity);

// Imperative animation with refs
class MyComponent extends Component {
  handleViewRef = ref => this.view = ref;
  
  bounce = () => {
    this.view.bounce(800).then(endState => 
      console.log(endState.finished ? 'bounce finished' : 'bounce cancelled')
    );
  };
  
  render() {
    return (
      <TouchableWithoutFeedback onPress={this.bounce}>
        <Animatable.View ref={this.handleViewRef}>
          <Text>Bounce me!</Text>
        </Animatable.View>
      </TouchableWithoutFeedback>
    );
  }
}

Architecture

React Native Animatable is built around several key components:

  • Pre-built Components: View, Text, and Image components with animation capabilities built-in
  • Component Factory: createAnimatableComponent HOC for making any React Native component animatable
  • Animation System: 50+ built-in animations organized into 11 categories (attention seekers, entrances, exits, etc.)
  • Custom Animations: createAnimation for defining custom keyframe-based animations
  • Animation Registry: Global registry system for registering and reusing named animations
  • Easing Functions: 23 built-in easing functions plus support for custom easing
  • Dual API: Both declarative (props-based) and imperative (method-based) animation control

Capabilities

Pre-built Components

Ready-to-use animated versions of core React Native components with full animation support.

const View: AnimatableComponent<ViewProps, ViewStyle>;
const Text: AnimatableComponent<TextProps, TextStyle>;
const Image: AnimatableComponent<ImageProps, ImageStyle>;

Pre-built Components

Component Creation

Create animatable versions of any React Native component using the higher-order component factory.

function createAnimatableComponent<P, S>(
  Component: ComponentClass<P> | FunctionComponent<P>
): AnimatableComponent<P, S>;

Component Creation

Built-in Animations

Comprehensive collection of 50+ pre-built animations across 11 categories, inspired by Animate.css.

type Animation = 
  | 'bounce' | 'flash' | 'jello' | 'pulse' | 'rotate' | 'rubberBand' | 'shake' | 'swing' | 'tada' | 'wobble'
  | 'bounceIn' | 'bounceInDown' | 'bounceInUp' | 'bounceInLeft' | 'bounceInRight'
  | 'bounceOut' | 'bounceOutDown' | 'bounceOutUp' | 'bounceOutLeft' | 'bounceOutRight'
  | 'fadeIn' | 'fadeInDown' | 'fadeInDownBig' | 'fadeInUp' | 'fadeInUpBig' 
  | 'fadeInLeft' | 'fadeInLeftBig' | 'fadeInRight' | 'fadeInRightBig'
  | 'fadeOut' | 'fadeOutDown' | 'fadeOutDownBig' | 'fadeOutUp' | 'fadeOutUpBig'
  | 'fadeOutLeft' | 'fadeOutLeftBig' | 'fadeOutRight' | 'fadeOutRightBig'
  | 'flipInX' | 'flipInY' | 'flipOutX' | 'flipOutY'
  | 'lightSpeedIn' | 'lightSpeedOut'
  | 'slideInDown' | 'slideInUp' | 'slideInLeft' | 'slideInRight'
  | 'slideOutDown' | 'slideOutUp' | 'slideOutLeft' | 'slideOutRight'
  | 'zoomIn' | 'zoomInDown' | 'zoomInUp' | 'zoomInLeft' | 'zoomInRight'
  | 'zoomOut' | 'zoomOutDown' | 'zoomOutUp' | 'zoomOutLeft' | 'zoomOutRight';

Built-in Animations

Custom Animations

Create custom keyframe-based animations with full control over timing and styling.

function createAnimation(definition: CustomAnimation): object;

interface CustomAnimation {
  from?: StyleObject;
  to?: StyleObject;
  style?: StyleObject;
  easing?: Easing;
  [progress: number]: StyleObject;
}

Custom Animations

Animation Registry

Global registry system for registering, managing, and reusing named animations across your application.

function registerAnimation(name: string, animation: CustomAnimation): void;
function initializeRegistryWithDefinitions(animations: { [key: string]: CustomAnimation }): void;

Animation Registry

Declarative Animation

Props-based animation control with extensive configuration options for timing, easing, and behavior.

interface AnimatableProps {
  animation?: Animation | string | CustomAnimation;
  duration?: number;
  delay?: number;
  direction?: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse';
  easing?: Easing;
  iterationCount?: number | 'infinite';
  iterationDelay?: number;
  transition?: string | string[];
  useNativeDriver?: boolean;
  isInteraction?: boolean;
  onAnimationBegin?: () => void;
  onAnimationEnd?: (endState: { finished: boolean }) => void;
  onTransitionBegin?: (property: string) => void;
  onTransitionEnd?: (property: string) => void;
}

Declarative Animation

Imperative Animation

Method-based animation control for complex programmatic animations and transitions.

interface AnimatableComponent {
  animate(animation: Animation | CustomAnimation, duration?: number, iterationDelay?: number): Promise<{ finished: boolean }>;
  stopAnimation(): void;
  transition(fromValues: object, toValues: object, duration?: number, easing?: Easing): void;
  transitionTo(toValues: object, duration?: number, easing?: Easing): void;
  [animationName: string]: (duration?: number) => Promise<{ finished: boolean }>;
}

Imperative Animation

Types

type Easing = 
  | 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out'
  | 'ease-in-cubic' | 'ease-out-cubic' | 'ease-in-out-cubic'
  | 'ease-in-circ' | 'ease-out-circ' | 'ease-in-out-circ'
  | 'ease-in-expo' | 'ease-out-expo' | 'ease-in-out-expo'
  | 'ease-in-quad' | 'ease-out-quad' | 'ease-in-out-quad'
  | 'ease-in-quart' | 'ease-out-quart' | 'ease-in-out-quart'
  | 'ease-in-quint' | 'ease-out-quint' | 'ease-in-out-quint'
  | 'ease-in-sine' | 'ease-out-sine' | 'ease-in-out-sine'
  | 'ease-in-back' | 'ease-out-back' | 'ease-in-out-back'
  | ((t: number) => number);

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

interface AnimatableComponent<P, S> extends NativeMethods {
  animate(animation: Animation | CustomAnimation, duration?: number, iterationDelay?: number): Promise<{ finished: boolean }>;
  stopAnimation(): void;
  transition(fromValues: S, toValues: S, duration?: number, easing?: Easing): void;
  transitionTo(toValues: S, duration?: number, easing?: Easing): void;
  setNativeProps(nativeProps: object): void;
  [K in Animation]: (duration?: number) => Promise<{ finished: boolean }>;
}