How to do curve like animation in react native? - reactjs

Question

I know that the title is not very specific, i'm extremely sorry for that, actually I couldn't think a better title than it.
Now coming to my design, Below is the desired result. I want to do it with an CURVED like animation (just like the image). But the problem is its going like a straight diagonal line not curved one.
_startCoin function is called whenever i click a button and then animation is happening
And here is my code
const screenHeight = Math.round(Dimensions.get('window').height);
const screenWidth = Math.round(Dimensions.get('window').width);
export default class demoScreen extends Component {
state = {
ready: false,
CoinAdd: new Animated.Value(0),
};
_startCoin = () => {
return Animated.parallel([
Animated.timing(this.state.CoinAdd, {
toValue: 1,
duration: 1500,
useNativeDriver: true
})
]).start();
};
render() {
let { CoinAdd } = this.state;
return (
<View style={styles.container}>
<TouchableOpacity style={styles.btn2} onPress={() => this._startCoin()}>
<Text style={styles.textBtn}>Start Coin</Text>
</TouchableOpacity>
<Animated.View style={{
transform: [
{
translateY: CoinAdd.interpolate({
inputRange: [0, 1],
outputRange: [0, -((screenHeight/2)-50)]
})
},
{
translateX: CoinAdd.interpolate({
inputRange: [0, 1],
outputRange: [0, -((screenWidth/2))]
})
}
],
borderRadius: 12,
justifyContent: "center",
alignItems: 'center',
zIndex: 2
}}
>
<Image style={{position: "absolute", height: 30, width: 30, right: 0}} source={require('../../assets/coin.png')} />
</Animated.View>
);
}
}
Any kind of help would be appreciated. Thank you