# react-native-animatable
> Easy to use declarative transitions and animations for React Native
Latest version **1.4.0** (published 2023-10-26) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-native-animatable
pnpm add react-native-animatable
yarn add react-native-animatable
bun add react-native-animatable
```
## Health
**Score 30/100 (F)** — status: abandoned.
Positive: has types; no vulnerabilities; has provenance; high quality score.
Warnings: low downloads; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.4.0 |
| Published | 2023-10-26 |
| First published | 2015-10-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 58.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 9930 |
| Author | Joel Arvidsson |
| Maintainers | oblador |
| Keywords | react-native, react-component, react-native-component, react, mobile, ios, android, ui, fade, bounce, slide, animatable, transition, animation |
## Links
- npm: https://www.npmjs.com/package/react-native-animatable
- Repository: https://github.com/oblador/react-native-animatable
- Issues: https://github.com/oblador/react-native-animatable/issues
- npm.io page: https://npm.io/package/react-native-animatable
## Dependencies (1)
- [prop-types](https://npm.io/package/prop-types.md) ^15.8.1
## Alternatives
- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads
## Recent versions
- 1.4.0 (latest) — 2023-10-26
- 1.3.3 — 2019-10-13
- 1.3.2 — 2019-03-20
- 1.3.1 — 2019-01-04
- 1.3.0 — 2018-05-31
- 1.2.4 — 2017-09-18
- 1.2.3 — 2017-07-24
- 1.2.2 — 2017-06-11
- 1.2.1 — 2017-06-03
- 1.2.0 — 2017-05-06
- 1.1.1 — 2017-03-19
- 1.1.0 — 2016-11-30
- 1.0.0 — 2016-11-24
- 0.6.1 — 2016-05-18
- 0.6.0 — 2016-05-07
- … 9 more at https://npm.io/package/react-native-animatable/versions
## README
# react-native-animatable
Declarative transitions and animations for React Native
[](https://github.com/oblador/react-native-animatable/actions/workflows/tests.yml) [](https://npmjs.com/package/react-native-animatable) [](https://npmjs.com/package/react-native-animatable)
## Installation
`$ npm install react-native-animatable --save`
## Usage
To animate things you must use the `createAnimatableComponent` composer similar to the `Animated.createAnimatedComponent`. The common components `View`, `Text` and `Image` are precomposed and exposed under the `Animatable` namespace. If you have your own component that you wish to animate, simply wrap it with a `Animatable.View` or compose it with:
```js
import * as Animatable from 'react-native-animatable';
MyCustomComponent = Animatable.createAnimatableComponent(MyCustomComponent);
```
### Declarative Usage
#### Animations
```html
Zoom me up, Scotty
```
#### Looping
To make looping animations simply set the `iterationCount` to `infinite`. Most animations except the attention seekers work best when setting `direction` to `alternate`.
```html
Up and down you go
❤️
```
#### Generic transitions
You can create your own simple transitions of a style property of your own choosing. The following example will increase the font size by 5 for every tap – all animated, all declarative! If you don't supply a `duration` property, a spring animation will be used.
*Note: If you are using colors, please use `rgba()` syntax.*
*Note: Transitions require `StyleSheet.flatten` available in React Native 0.15 or later. If you are running on anything lower, please polyfill as described under imperative usage.*
```html
this.setState({fontSize: (this.state.fontSize || 10) + 5 })}>
Size me up, Scotty
```
#### Properties
*Note: Other properties will be passed down to underlying component.*
| Prop | Description | Default |
|---|---|---|
|**`animation`**|Name of the animation, see below for available animations. |*None*|
|**`duration`**|For how long the animation will run (milliseconds). |`1000`|
|**`delay`**|Optionally delay animation (milliseconds). |`0`|
|**`direction`**|Direction of animation, especially useful for repeating animations. Valid values: `normal`, `reverse`, `alternate`, `alternate-reverse`. |`normal`|
|**`easing`**|Timing function for the animation. Valid values: custom function or `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`. |`ease`|
|**`iterationCount`**|How many times to run the animation, use `infinite` for looped animations. |`1`|
|**`iterationDelay`**|For how long to pause between animation iterations (milliseconds). |`0`|
|**`transition`**|What `style` property to transition, for example `opacity`, `rotate` or `fontSize`. Use array for multiple properties. |*None*|
|**`onAnimationBegin`**|A function that is called when the animation has been started. |*None*|
|**`onAnimationEnd`**|A function that is called when the animation has been completed successfully or cancelled. Function is called with an `endState` argument, refer to `endState.finished` to see if the animation completed or not. |*None*|
|**`onTransitionBegin`**|A function that is called when the transition of a style has been started. The function is called with a `property` argument to differentiate between styles. |*None*|
|**`onTransitionEnd`**|A function that is called when the transition of a style has been completed successfully or cancelled. The function is called with a `property` argument to differentiate between styles. |*None*|
|**`useNativeDriver`**|Whether to use native or JavaScript animation driver. Native driver can help with performance but cannot handle all types of styling. |`false`|
|**`isInteraction`**|Whether or not this animation creates an "interaction handle" on the InteractionManager. |`false` if `iterationCount` is less than or equal to one|
### Imperative Usage
#### Animations
All animations are exposed as functions on Animatable elements, they take an optional `duration` argument. They return a promise that is resolved when animation completes successfully or is cancelled.
```js
import * as Animatable from 'react-native-animatable';
class ExampleView extends Component {
handleViewRef = ref => this.view = ref;
bounce = () => this.view.bounce(800).then(endState => console.log(endState.finished ? 'bounce finished' : 'bounce cancelled'));
render() {
return (
Bounce me!
);
}
}
```
To stop any ongoing animations, just invoke `stopAnimation()` on that element.
You can also animate imperatively by using the `animate()` function on the element for custom animations, for example:
```
this.view.animate({ 0: { opacity: 0 }, 1: { opacity: 1 } });
```
#### Generic transitions
##### `transition(fromValues, toValues[[, duration], easing])`
Will transition between given styles. If no `duration` or `easing` is passed a spring animation will be used.
##### `transitionTo(toValues[[, duration], easing])`
This function will try to determine the current styles and pass it along to `transition()` as `fromValues`.
```js
import * as Animatable from 'react-native-animatable';
class ExampleView extends Component {
handleTextRef = ref => this.text = ref;
render() {
return (
this.text.transitionTo({ opacity: 0.2 })}>
Fade me!
);
}
}
```
## Custom Animations
Animations can be referred to by a global name or a definition object.
### Animation Definition Schema
An animation definition is a plain object that contains an optional `easing` property, an optional `style` property for static non-animated styles (useful for `perspective`, `backfaceVisibility`, `zIndex` etc) and a list of keyframes. The keyframes are refered to by a number between 0 to 1 or `from` and `to`. Inspect the source in the `definitions` folder to see more in depth examples.
A simple fade in animation:
```js
const fadeIn = {
from: {
opacity: 0,
},
to: {
opacity: 1,
},
};
```
```html
Fade me in
```
Combining multiple styles to create a zoom out animation:
```js
const zoomOut = {
0: {
opacity: 1,
scale: 1,
},
0.5: {
opacity: 1,
scale: 0.3,
},
1: {
opacity: 0,
scale: 0,
},
};
```
```html
Zoom me out
```
To make your animations globally available by referring to them by a name, you can register them with `initializeRegistryWithDefinitions`. This function can also be used to replace built in animations in case you want to tweak some value.
```js
Animatable.initializeRegistryWithDefinitions({
myFancyAnimation: {
from: { ... },
to: { ... },
}
});
```
## React Europe Talk
[](https://www.youtube.com/watch?v=3SITFIGz4xo)
The talk __*A Novel Approach to Declarative Animations in React Native*__ from React Europe 2017 about this library and animations/transitions in general is [available on YouTube](https://www.youtube.com/watch?v=3SITFIGz4xo).
## `MakeItRain` example
See [`Examples/MakeItRain`](https://github.com/oblador/react-native-animatable/tree/master/Examples/MakeItRain) folder for the example project from the talk.
[](https://github.com/oblador/react-native-animatable/tree/master/Examples/MakeItRain)
## `AnimatableExplorer` example
See [`Examples/AnimatableExplorer`](https://github.com/oblador/react-native-animatable/tree/master/Examples/AnimatableExplorer) folder for an example project demoing animations available out of the box and more.
## Animations
Animations are heavily inspired by [Animated.css](https://daneden.github.io/animate.css/).
### Attention Seekers
* `bounce`
* `flash`
* `jello`
* `pulse`
* `rotate`
* `rubberBand`
* `shake`
* `swing`
* `tada`
* `wobble`
### Bouncing Entrances
* `bounceIn`
* `bounceInDown`
* `bounceInUp`
* `bounceInLeft`
* `bounceInRight`
### Bouncing Exits
* `bounceOut`
* `bounceOutDown`
* `bounceOutUp`
* `bounceOutLeft`
* `bounceOutRight`
### Fading Entrances
* `fadeIn`
* `fadeInDown`
* `fadeInDownBig`
* `fadeInUp`
* `fadeInUpBig`
* `fadeInLeft`
* `fadeInLeftBig`
* `fadeInRight`
* `fadeInRightBig`
### Fading Exits
* `fadeOut`
* `fadeOutDown`
* `fadeOutDownBig`
* `fadeOutUp`
* `fadeOutUpBig`
* `fadeOutLeft`
* `fadeOutLeftBig`
* `fadeOutRight`
* `fadeOutRightBig`
### Flippers
* `flipInX`
* `flipInY`
* `flipOutX`
* `flipOutY`
### Lightspeed
* `lightSpeedIn`
* `lightSpeedOut`
### Sliding Entrances
* `slideInDown`
* `slideInUp`
* `slideInLeft`
* `slideInRight`
### Sliding Exits
* `slideOutDown`
* `slideOutUp`
* `slideOutLeft`
* `slideOutRight`
### Zooming Entrances
* `zoomIn`
* `zoomInDown`
* `zoomInUp`
* `zoomInLeft`
* `zoomInRight`
### Zooming Exits
* `zoomOut`
* `zoomOutDown`
* `zoomOutUp`
* `zoomOutLeft`
* `zoomOutRight`
## [Changelog](https://github.com/oblador/react-native-animatable/releases)
## License
[MIT License](http://opensource.org/licenses/mit-license.html). © Joel Arvidsson 2015
---
_Source: https://npm.io/package/react-native-animatable · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._