To help you get started, we've collected the most common ways that react-native-animatable is being used within popular public projects.

tuantle / hypertoxin / src / components / views / layout-view-component.js View on Github

import { BlurView } from 'react-native-blur';

const {
    Component
} = React;

const {
    Dimensions,
    ScrollView,
    PanResponder,
    View
} = ReactNative;

const AnimatedView = Animatable.View;
const AnimatedBlurView = Animatable.createAnimatableComponent(BlurView);

const DEVICE_WIDTH = Dimensions.get(`window`).width;

const DEFAULT_ANIMATION_DURATION_MS = 300;

const DEFAULT_LAYOUT_VIEW_STYLE = {
    container: {
        flexShrink: 1,
        flexDirection: `column`,
        justifyContent: `center`,
        alignItems: `stretch`,
        maxWidth: DEVICE_WIDTH
        // overflow: `hidden`
    },
    horizontal: {
        flexShrink: 1,

View more ways to use react-native-animatable

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 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:

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
❤️

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

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.

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:

const fadeIn = {
  from: {
    opacity: 0,
  },
  to: {
    opacity: 1,
  },
};

Fade me in

Combining multiple styles to create a zoom out animation:

const zoomOut = {
  0: {
    opacity: 1,
    scale: 1,
  },
  0.5: {
    opacity: 1,
    scale: 0.3,
  },
  1: {
    opacity: 0,
    scale: 0,
  },
};

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.

Animatable.initializeRegistryWithDefinitions({
  myFancyAnimation: {
    from: { ... },
    to: { ... },
  }
});

React Europe Talk

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.

MakeItRain example

See Examples/MakeItRain folder for the example project from the talk.

AnimatableExplorer example

See Examples/AnimatableExplorer folder for an example project demoing animations available out of the box and more.

Animations

Animations are heavily inspired by Animated.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

License

MIT License. © Joel Arvidsson 2015