Package Exports

react-native-animatable

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-animatable) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-native-animatable

Standard set of easy to use animations 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>;

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`
`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])`

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

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

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.

animatable-demo

Animations

Animations are heavily inspired by Animated.css.

Attention Seekers

animatable-attention

bounce
flash
jello
pulse
rubberBand
shake
swing
tada
wobble

Bouncing Entrances

animatable-bouncein

bounceIn
bounceInDown
bounceInUp
bounceInLeft
bounceInRight

Bouncing Exits

animatable-bounceout

bounceOut
bounceOutDown
bounceOutUp
bounceOutLeft
bounceOutRight

Fading Entrances

animatable-fadein

fadeIn
fadeInDown
fadeInDownBig
fadeInUp
fadeInUpBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig

Fading Exits

animatable-fadeout

fadeOut
fadeOutDown
fadeOutDownBig
fadeOutUp
fadeOutUpBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig

Flippers

animatable-flip

flipInX
flipInY
flipOutX
flipOutY

Lightspeed

animatable-lightspeed

lightSpeedIn
lightSpeedOut

Sliding Entrances

animatable-slidein

slideInDown
slideInUp
slideInLeft
slideInRight

Sliding Exits

animatable-slideout

slideOutDown
slideOutUp
slideOutLeft
slideOutRight

Zooming Entrances

animatable-zoomin

zoomIn
zoomInDown
zoomInUp
zoomInLeft
zoomInRight

Zooming Exits

animatable-zoomout

zoomOut
zoomOutDown
zoomOutUp
zoomOutLeft
zoomOutRight