React-Native-Animatable

Sharing is caring!

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

react-native-animatable

Declarative transitions and 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 ViewText 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:

import * as Animatable from 'react-native-animatable';
MyCustomComponent = Animatable.createAnimatableComponent(MyCustomComponent);

Declarative Usage

Animations

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.

Up and down you go
❤️

Animatable looping demo

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.

 this.setState({fontSize: (this.state.fontSize || 10) + 5 })}>
  Size me up, Scotty

Properties

Note: Other properties will be passed down to underlying component.

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.

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.

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.

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

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.