React Native Animated API Example

App.js

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Easing,
  Animated,
  Button,
  ScrollView,
} from 'react-native';

export default class App extends Component {
  constructor() {
    super();
    this.animatedValue = new Animated.Value(0);
  }

  animate = easing => {
    this.animatedValue.setValue(0);
    Animated.timing(this.animatedValue, {
      toValue: 1,
      duration: 1000,
      easing,
    }).start();
  };

  render() {
    const marginLeft = this.animatedValue.interpolate({
      inputRange: [0, 1],
      outputRange: [0, 260],
    });
    return (
      <View style={styles.container}>
        <Animated.View style={[styles.block, { marginLeft }]} />
        <ScrollView>
          <Text style={{ textAlign: 'center' }}>
            Scroll up for more animations
          </Text>
          <Button
            style={styles.button}
            title="Bounce"
            onPress={() => this.animate(Easing.bounce)}
          />
          <Button
            style={styles.button}
            title="Cubic"
            onPress={() => this.animate(Easing.cubic)}
          />
          <Button
            style={styles.button}
            title="Back"
            onPress={() => this.animate(Easing.back(2))}
          />
          <Button
            style={styles.button}
            title="Elastic"
            onPress={() => this.animate(Easing.elastic(2))}
          />
          <Button
            style={styles.button}
            title="Ease"
            onPress={() => this.animate(Easing.ease)}
          />
          <Button
            style={styles.button}
            title="InOut"
            onPress={() => this.animate(Easing.inOut(Easing.quad))}
          />
          <Button
            style={styles.button}
            title="In"
            onPress={() => this.animate(Easing.in(Easing.quad))}
          />
          <Button
            style={styles.button}
            title="Out"
            onPress={() => this.animate(Easing.out(Easing.quad))}
          />
          <Button
            style={styles.button}
            title="Sin"
            onPress={() => this.animate(Easing.sin)}
          />
          <Button
            style={styles.button}
            title="Linear"
            onPress={() => this.animate(Easing.linear)}
          />
          <Button
            style={styles.button}
            title="Quad"
            onPress={() => this.animate(Easing.quad)}
          />
        </ScrollView>
      </View>
    );
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 60,
  },
  button: {
    height: 60,
    backgroundColor: '#ededed',
    borderRadius: 4,
    marginTop: 10,
    paddingTop: 20,
    fontSize: 18,
  },
  block: {
    width: 50,
    height: 50,
    backgroundColor: 'red',
  },
});