How to animate a Single View one by one in react native? - reactjs

Question

Please have a look this image
I have an issue in the animation of the circle.
The flow is:
When user will click on button 1, the circle will animate from real position to position 1,
When clicking button2, a circle will move from position 1 to position 2,
and
When clicking on button2, a circle will animate back on the real position.
I need 1 sec. time while animate and I want to set circle position at particular Y position.
mean the first position on Y=400, second position on Y= 100.
Thanks in advance

Answer 1

You need to use the Animated library from react-native. Check out the library for more details on how to animate objects.
Meanwhile check the working example in Snack.io
Here's the code.
import React, { Component } from "react";
import { View, Text, StyleSheet, Animated, TouchableOpacity } from "react-native";
export default class App extends Component {
constructor() {
super();
this.state = {
posY: new Animated.Value(400)
};
}
moveBall = (yPos) => {
Animated.timing(this.state.posY, {
toValue: yPos,
duration: 1000
}).start()
};
renderRectangle = () => {
const animatedStyle = { top: this.state.posY };
return (
<Animated.View style={[styles.rectangle, animatedStyle]}>
</Animated.View>
);
};
render() {
return (
<View style={styles.container}>
<View style={{ flex: 0.9, alignItems: 'center' }}>
{this.renderRectangle()}
</View>
<View style={styles.buttonsContainer}>
<TouchableOpacity
style={styles.buttonStyle}
onPress={() => this.moveBall(250)}
>
<Text>Button 1</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.buttonStyle}
onPress={() => this.moveBall(100)}
>
<Text>Button 2</Text>
</TouchableOpacity>
<TouchableOpacity
style={styles.buttonStyle}
onPress={() => this.moveBall(400)}
>
<Text>Button 3</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
rectangle: {
backgroundColor: "#2c3e50",
width: 50,
height: 50,
borderRadius: 50,
position: 'absolute'
},
buttonsContainer: {
flex: 0.1,
flexDirection: 'row',
justifyContent: 'space-between',
paddingLeft: 20,
paddingRight: 20
},
buttonStyle: {
padding: 5,
height: 30,
backgroundColor: 'limegreen'
}
});