animate move x and y with soft move react native - react-native

Question

i want move a ball on x and y axis, but the animate not is soft,
the movement is tremulous, and if i move more fast it don't move on diagonally exact, but do a angle how i can move the ball with soft? here are the exemple:
https://snack.expo.io/HJvm5WI5N
the code is it:
import React from 'react';
import {Animated, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
export default class App extends React.Component {
constructor(props) {
super(props)
this.ball = new Animated.ValueXY({x: 30, y: 30})
}
moveBall = () => {
Animated.timing(this.ball, {
toValue: {x: 250, y: 350},
duration: 2000
}).start()
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this.moveBall}>
<Animated.View style={[styles.ball, this.ball.getLayout()]}>
<Text style={styles.text}>+</Text>
</Animated.View>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
ball: {
width: 60,
height: 60,
borderRadius: 30,
backgroundColor: 'red',
alignItems: 'center',
justifyContent: 'center',
},
text: {
fontWeight: 'bold',
color: 'white',
fontSize: 32
}
});

Answer 1

You can use useNativeDriver for better performance. Use it with translateX and translateY. Because you can't use useNativeDriver with left and right properties of style.
export default class App extends React.Component {
constructor(props) {
super(props);
this.ball = new Animated.Value(0);
}
moveBall = () => {
Animated.timing(this.ball, {
toValue: 1,
duration: 1000,
useNativeDriver: true,
}).start();
};
render() {
const xVal = this.ball.interpolate({
inputRange: [0, 1],
outputRange: [0, 250],
});
const yVal = this.ball.interpolate({
inputRange: [0, 1],
outputRange: [0, 350],
});
const animStyle = {
transform: [
{
translateY: yVal,
translateX: xVal,
},
],
};
return (
<View style={styles.container}>
<TouchableOpacity onPress={this.moveBall}>
<Animated.View style={[styles.ball, animStyle]}>
<Text style={styles.text}>+</Text>
</Animated.View>
</TouchableOpacity>
</View>
);
}
}
UPDATE
with hooks
const App = () => {
const ballAnimatedValue = useRef(new Animated.Value(0)).current;
const moveBall = () => {
Animated.timing(ballAnimatedValue, {
toValue: 1,
duration: 1000,
useNativeDriver: true,
}).start();
};
const xVal = ballAnimatedValue.interpolate({
inputRange: [0, 1],
outputRange: [0, 250],
});
const yVal = ballAnimatedValue.interpolate({
inputRange: [0, 1],
outputRange: [0, 350],
});
const animStyle = {
transform: [
{
translateY: yVal,
translateX: xVal,
},
],
};
return (
<View style={styles.container}>
<TouchableOpacity onPress={moveBall}>
<Animated.View style={[styles.ball, animStyle]}>
<Text style={styles.text}>+</Text>
</Animated.View>
</TouchableOpacity>
</View>
);
};