Registry / react-native-animatable

react-native-animatable

library1.4.0jsnpmunverified

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.

npm install react-native-animatable

github ↗package ↗

INSTALL

IMPORT

SIG · REACT-NATIVE-ANIMA

react-native-animatable

javascriptv1.4.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Animatable

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

✗ import Animatable from 'react-native-animatable'

The module exports a namespace, not a default export. Using default import will result in undefined.

createAnimatableComponent

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

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

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

Animatable.View

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

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

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

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;

Debug

Known issues

breakingVersion 1.4.0 drops deprecated React TypeScript types.

fix

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

affects: >=1.4.0

gotchaimport Animatable from 'react-native-animatable' will be undefined.

fix

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

affects: all

gotchaTransitions require StyleSheet.flatten; not supported in React Native <0.15.

fix

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

affects: all

deprecatedReact.PropTypes usage removed in v1.2.3.

fix

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

affects: <1.2.3

gotchaiterationDelay is ignored when changing animation on the same component.

fix

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

affects: >=1.3.2

Errors

Common errors & fixes

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

Using default import instead of namespace import.

fix

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

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

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.

Stylesheet.flatten is not a function

React Native version <0.15 missing StyleSheet.flatten.

fix

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

Upgrade

Version history

1.4.0latest on npm

Audit

Dependencies

react-nativerequiredPeer dependency required for animation engine.

prop-typesoptionalUsed for runtime prop type checking (not needed if using TypeScript).

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/oblador/react-native-animatable ↗

packagehttps://www.npmjs.com/package/react-native-animatable ↗