{"id":18712,"library":"react-native-animatable","title":"react-native-animatable","description":"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.","status":"active","version":"1.4.0","language":"javascript","source_language":"en","source_url":"git://github.com/oblador/react-native-animatable","tags":["javascript","react-native","react-component","react-native-component","react","mobile","ios","android","ui","typescript"],"install":[{"cmd":"npm install react-native-animatable","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-animatable","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-animatable","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for animation engine.","package":"react-native","optional":false},{"reason":"Used for runtime prop type checking (not needed if using TypeScript).","package":"prop-types","optional":true}],"imports":[{"note":"The module exports a namespace, not a default export. Using default import will result in undefined.","wrong":"import Animatable from 'react-native-animatable'","symbol":"Animatable","correct":"import * as Animatable from 'react-native-animatable'"},{"note":"This is a named export from the package, used to wrap custom components.","wrong":"import { createAnimatableComponent } from 'react-native-animatable' // correct usage, but often developers mistakenly import from the wrong path","symbol":"createAnimatableComponent","correct":"import { createAnimatableComponent } from 'react-native-animatable'"},{"note":"Precomposed components are properties of the Animatable namespace, not top-level named exports.","wrong":"import { View } from 'react-native-animatable'; // View is not a named export","symbol":"Animatable.View","correct":"import * as Animatable from 'react-native-animatable'; ... <Animatable.View animation='fadeIn' />"}],"quickstart":{"code":"import React, { useRef } from 'react';\nimport { Button, View } from 'react-native';\nimport * as Animatable from 'react-native-animatable';\n\nconst App = () => {\n  const fadeRef = useRef(null);\n  return (\n    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>\n      <Animatable.Text ref={fadeRef} animation='fadeIn' duration={2000}>\n        Hello Animatable!\n      </Animatable.Text>\n      <Button title='Fade Out' onPress={() => fadeRef.current?.fadeOut?.(800)} />\n    </View>\n  );\n};\n\nexport default App;","lang":"typescript","description":"Shows declarative animation and imperative control via ref. Uses TypeScript with ref typing."},"warnings":[{"fix":"Update to TypeScript 4.9+ and React 18+ if using @types/react.","message":"Version 1.4.0 drops deprecated React TypeScript types.","severity":"breaking","affected_versions":">=1.4.0"},{"fix":"Use import * as Animatable from 'react-native-animatable'.","message":"import Animatable from 'react-native-animatable' will be undefined.","severity":"gotcha","affected_versions":"all"},{"fix":"Use React Native >=0.15 or polyfill StyleSheet.flatten.","message":"Transitions require StyleSheet.flatten; not supported in React Native <0.15.","severity":"gotcha","affected_versions":"all"},{"fix":"Update to v1.2.3+ which uses the prop-types package.","message":"React.PropTypes usage removed in v1.2.3.","severity":"deprecated","affected_versions":"<1.2.3"},{"fix":"Ensure animation prop is consistent or use key prop to remount.","message":"iterationDelay is ignored when changing animation on the same component.","severity":"gotcha","affected_versions":">=1.3.2"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"import * as Animatable from 'react-native-animatable'","cause":"Using default import instead of namespace import.","error":"Cannot read property 'default' of undefined (importing Animatable)"},{"fix":"Ensure the ref is attached to an Animatable.View or component wrapped with createAnimatableComponent.","cause":"Trying to call imperative method on a component that is not an Animatable component.","error":"TypeError: undefined is not an object (evaluating 'this._runAnimation')"},{"fix":"Update React Native to >=0.15 or add a polyfill.","cause":"React Native version <0.15 missing StyleSheet.flatten.","error":"Stylesheet.flatten is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}