How to move down a object using button in react native? - reactjs

Question

Actually I want to do something like that (Image attached):
There have a box, and two buttons. If I press button 1 then the box moved left. And if I press button 2 then the box moved right.
I want, when the box move right and overcome the bar 1 then the box moved down on the bar 2.
But I have no idea how to do it.
Here is my code:
import React, {Component} from 'react';
import {
View,
Text,
StyleSheet,
Animated,
TouchableOpacity,
ScrollView,
Image,
} from 'react-native';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
left: 20,
};
}
moveRight = () => {
this.setState({left: this.state.left + 10}); // 10 is value of change.
};
moveLeft = () => {
this.setState({left: this.state.left - 10}); // 10 is value of change.
};
render() {
return (
<View style={styles.container}>
<Image
style={{left: this.state.left, height: 120, width: 120}}
source={require('./assets/box.png')}
/>
<Image
style={{height: 20, width: 180, marginTop: -12, marginLeft: 25}}
source={require('./assets/log.png')}
/>
<Image
style={{height: 20, width: 200, marginTop: 150, marginLeft: 185}}
source={require('./assets/log.png')}
/>
<View style={styles.buttonsContainer}>
<TouchableOpacity onPress={this.moveLeft}>
<Image
style={{height: 60, width: 60}}
source={require('./assets/left-button.png')}
/>
</TouchableOpacity>
<TouchableOpacity onPress={this.moveRight}>
<Image
style={{height: 60, width: 60}}
source={require('./assets/right-button.png')}
/>
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
textCenter: {
alignSelf: 'center',
textAlign: 'center',
},
levelHeading: {
fontWeight: 'bold',
fontSize: 35,
color: '#CC8A4F',
},
buttonsContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
marginTop: 200,
paddingLeft: 80,
paddingRight: 80,
},
});
Please help me!
Thanks!

Answer 1

import React, { useEffect } from "react";
import { Animated, Text, View, StyleSheet, Button } from "react-native";
const App = () => {
const moveAnimation = new Animated.ValueXY({ x: 10, y: 450 });
useEffect(() => {
moveAnimation;
}, []);
const _moveBallLeft = () => {
Animated.spring(moveAnimation, {
toValue: { x: 250, y: 450 },
}).start();
};
const _moveBallRight = () => {
Animated.spring(moveAnimation, {
toValue: { x: 10, y: 450 },
}).start();
};
return (
<View style={styles.container}>
<Animated.View style={[styles.tennisBall, moveAnimation.getLayout()]}>
<View style={styles.button}>
<Text style={styles.buttonText}>ball</Text>
</View>
</Animated.View>
<View
style={{
flexDirection: "row-reverse",
justifyContent: "space-evenly",
}}
>
<View style={{ alignSelf: "center" }}>
<Button title=">" onPress={_moveBallLeft}></Button>
</View>
<View style={{ alignSelf: "center", marginLeft: "2%" }}>
<Button title="<" onPress={_moveBallRight}></Button>
</View>
</View>
</View>
);
};
export default App;
const styles = StyleSheet.create({
container: {
flex: 2,
backgroundColor: "#ecf0f1",
},
tennisBall: {
display: "flex",
justifyContent: "center",
alignItems: "center",
backgroundColor: "greenyellow",
borderRadius: 100,
width: 100,
height: 100,
},
button: {
paddingTop: 24,
paddingBottom: 24,
},
buttonText: {
fontSize: 24,
color: "#333",
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>