react-native-animatable

Standard set of easy to use animations and declarative transitions for React Native

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:

var Animatable = require('react-native-animatable');
MyCustomComponent = Animatable.createAnimatableComponent(MyCustomComponent);

Declarative Usage

Predefined Animations

<Animatable.Text animation="zoomInUp">Zoom me up, Scotty</Animatable.Text>

Looping

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>

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.

<TouchableOpacity onPress={() => this.setState({fontSize: (this.state.fontSize || 10) + 5 })}
  <Animatable.Text transition="fontSize" transitionValue={this.state.fontSize || 10}>Size me up, Scotty</Animatable.Text>
</TouchableOpacity>

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: 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 property to transition, for example opacity, rotate or fontSize.	None
transitionValue	Current value of the transition.	0

Imperative Usage

Predefined Animations

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>
    );
  }
};

Generic transitions

transition(property, fromValue, toValue[[, duration], easing])

Will transition given style property between fromValue and toValue. If no duration or easing is passed a spring animation will be used.

transitionTo(property, toValue[[, duration], easing])

This function will try to determine the current value of the style property and pass it along to transition() as fromValue. This requires access to the StyleSheet registry which has long been a private api, but soon this PR will expose it, in the meantime please polyfill like in the example below. If the property is already being transitioned either via a previous call to transition() or via the transition prop this it not neccessary.

// Polyfill StyleSheet.flatten if neccesary
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>
    );
  }
};

Demo / Example

See Example folder.

Animations

Animations are heavily inspired by Animated.css.

Attention Seekers

• bounce
• flash
• jello
• pulse
• 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

License

MIT License. © Joel Arvidsson 2015