react-native-animatable

1.4.0 verified Sat Apr 25 auth: no javascript

A declarative animation and transition library for React Native, version 1.4.0 (released 2024). Provides pre-built animations (fade, bounce, slide, etc.) and custom transitions using a simple declarative API. Key differentiators: easy-to-use props like `animation`, `transition`, and `iterationCount`; supports both imperative and declarative usage; ships with TypeScript typings; works with React Native's `Animated` API. Compared to alternatives like `react-native-reanimated`, it offers a simpler learning curve and less boilerplate, but may have limited performance for complex animations.

Common errors

error Cannot read property 'default' of undefined (importing Animatable) ↓

cause Using default import instead of namespace import.

fix

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

error TypeError: undefined is not an object (evaluating 'this._runAnimation') ↓

cause Trying to call imperative method on a component that is not an Animatable component.

fix

Ensure the ref is attached to an Animatable.View or component wrapped with createAnimatableComponent.

error Stylesheet.flatten is not a function ↓

cause React Native version <0.15 missing StyleSheet.flatten.

fix

Update React Native to >=0.15 or add a polyfill.

Warnings

breaking Version 1.4.0 drops deprecated React TypeScript types. ↓

fix Update to TypeScript 4.9+ and React 18+ if using @types/react.

gotcha import Animatable from 'react-native-animatable' will be undefined. ↓

fix Use import * as Animatable from 'react-native-animatable'.

gotcha Transitions require StyleSheet.flatten; not supported in React Native <0.15. ↓

fix Use React Native >=0.15 or polyfill StyleSheet.flatten.

deprecated React.PropTypes usage removed in v1.2.3. ↓

fix Update to v1.2.3+ which uses the prop-types package.

gotcha iterationDelay is ignored when changing animation on the same component. ↓

fix Ensure animation prop is consistent or use key prop to remount.

Install

npm install react-native-animatable

yarn add react-native-animatable

pnpm add react-native-animatable

Imports

Animatable
wrong
```
import Animatable from 'react-native-animatable'
```
correct
```
import * as Animatable from 'react-native-animatable'
```
The module exports a namespace, not a default export. Using default import will result in undefined.

createAnimatableComponent

wrong

import { createAnimatableComponent } from 'react-native-animatable' // correct usage, but often developers mistakenly import from the wrong path

correct

import { createAnimatableComponent } from 'react-native-animatable'

This is a named export from the package, used to wrap custom components.

Animatable.View

wrong

import { View } from 'react-native-animatable'; // View is not a named export

correct

import * as Animatable from 'react-native-animatable'; ... <Animatable.View animation='fadeIn' />

Precomposed components are properties of the Animatable namespace, not top-level named exports.

Quickstart

Shows declarative animation and imperative control via ref. Uses TypeScript with ref typing.

import React, { useRef } from 'react';
import { Button, View } from 'react-native';
import * as Animatable from 'react-native-animatable';

const App = () => {
  const fadeRef = useRef(null);
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Animatable.Text ref={fadeRef} animation='fadeIn' duration={2000}>
        Hello Animatable!
      </Animatable.Text>
      <Button title='Fade Out' onPress={() => fadeRef.current?.fadeOut?.(800)} />
    </View>
  );
};

export default App;