TutorialsCourses
Course Menu
React Native Animated for Beginners

Moving Square

Basic Square Animation

import React from "react";
import { StyleSheet, Text, View, Animated } from "react-native";

const SampleApp = React.createClass({
  componentWillMount: function () {
    this._animatedValue = new Animated.Value(0);
  },

  componentDidMount: function () {
    Animated.timing(this._animatedValue, {
      toValue: 300,
      duration: 500,
    }).start();
  },

  render: function () {
    return (
      <View style={styles.container}>
        <Animated.View
          style={[
            styles.box,
            { transform: [{ translateY: this._animatedValue }] },
          ]}
        />
      </View>
    );
  },
});

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  box: {
    backgroundColor: "red",
    position: "absolute",
    top: 100,
    left: 100,
    width: 100,
    height: 100,
  },
});