CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-react-native-animatable

Easy to use declarative transitions and animations for React Native

—

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