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