Easy to use declarative transitions and a standard set of animations for React Native
$ npm install react-native-animatable --save
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:
var Animatable = require('react-native-animatable');
MyCustomComponent = Animatable.createAnimatableComponent(MyCustomComponent);
<Animatable.Text animation="zoomInUp">Zoom me up, Scotty</Animatable.Text>
To make looping animations simply set the iterationCount
to infinite
. Most animations except the attention seekers work best when setting direction
to alternate
.
<Animatable.Text animation="slideInDown" iterationCount={5} direction="alternate">Up and down you go</Animatable.Text>
<Animatable.Text animation="pulse" easing="ease-out" iterationCount="infinite" style={{ textAlign: 'center' }}>❤️</Animatable.Text>
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.
<TouchableOpacity onPress={() => this.setState({fontSize: (this.state.fontSize || 10) + 5 })}
<Animatable.Text transition="fontSize" style={{fontSize: this.state.fontSize || 10}}>Size me up, Scotty</Animatable.Text>
</TouchableOpacity>
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: linear , ease , ease-in , ease-out , ease-in-out . |
ease-in-out |
iterationCount |
How many times to run the animation, use infinite for looped animations. |
1 |
transition |
What style property to transition, for example opacity , rotate or fontSize . Use array for multiple properties. |
None |
All animations are exposed as functions on Animatable elements, they take an optional duration
argument.
var Animatable = require('react-native-animatable');
React.createClass({
render: function() {
return (
<TouchableWithoutFeedback onPress={() => this.refs.view.bounce(800);}>
<Animatable.View ref="view">
<Text>Bounce me!</Text>
</Animatable.View>
</TouchableWithoutFeedback>
);
}
};
To stop any ongoing animations, just invoke stopAnimation()
on that element.
Will transition between given styles. If no duration
or easing
is passed a spring animation will be used.
This function will try to determine the current styles and pass it along to transition()
as fromValues
.
// Polyfill StyleSheet.flatten if RN < 0.15
if(!StyleSheet.flatten) {
StyleSheet.flatten = require('flattenStyle');
}
var Animatable = require('react-native-animatable');
React.createClass({
render: function() {
return (
<TouchableWithoutFeedback onPress={() => this.refs.text.transitionTo({opacity: 0.2});}>
<Animatable.Text ref="text">Fade me!</Animatable.Text>
</TouchableWithoutFeedback>
);
}
};
See Example
folder.
Animations are heavily inspired by Animated.css.
bounce
flash
jello
pulse
rubberBand
shake
swing
tada
wobble
bounceIn
bounceInDown
bounceInUp
bounceInLeft
bounceInRight
bounceOut
bounceOutDown
bounceOutUp
bounceOutLeft
bounceOutRight
fadeIn
fadeInDown
fadeInDownBig
fadeInUp
fadeInUpBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutUp
fadeOutUpBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
flipInX
flipInY
flipOutX
flipOutY
lightSpeedIn
lightSpeedOut
slideInDown
slideInUp
slideInLeft
slideInRight
slideOutDown
slideOutUp
slideOutLeft
slideOutRight
zoomIn
zoomInDown
zoomInUp
zoomInLeft
zoomInRight
zoomOut
zoomOutDown
zoomOutUp
zoomOutLeft
zoomOutRight
MIT License. © Joel Arvidsson 2015