{"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.","language":"javascript","status":"active","last_verified":"Sat Apr 25","install":{"commands":["npm install react-native-animatable"],"cli":null},"imports":["import * as Animatable from 'react-native-animatable'","import { createAnimatableComponent } from 'react-native-animatable'","import * as Animatable from 'react-native-animatable'; ... <Animatable.View animation='fadeIn' />"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}