How to make react native deck animation? - react-native

Question

I making a playing card game and i want to add an deck deal animation like this:
Deal Animation
i tried change top value for Animated.Image component but output:
https://pasteboard.co/HiMc6Af.gif
i need create a clone of this component and original component should not move. But i could not put clone component over original component.

Answer 1

import React from 'react';
import { View, Text, Animated, TouchableOpacity } from 'react-native';
export default class Test extends React.Component {
constructor(props) {
super(props);
this.state = {
gameStart: false,
top: new Animated.Value(-175 / 2),
};
}
componentDidMount() {}
shuffleCards(e) {
this.setState({
gameStart: true,
});
this.cycleAnimation();
}
cycleAnimation() {
Animated.loop(
Animated.sequence([
Animated.timing(this.state.top, {
toValue: -900,
duration: 300,
delay: 100,
}),
Animated.timing(this.state.top, {
toValue: -175 / 2,
duration: 1,
delay: 1,
}),
Animated.timing(this.state.top, {
toValue: 900,
duration: 300,
delay: 100,
}),
]),
{
iterations: 4,
},
).start();
}
render() {
return (
<View
style={{
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
}}>
<TouchableOpacity>
<Animated.Image
ref={'deck'}
resizeMode="stretch"
source={require('./assets/card/back.png')}
style={[
{
width: 100,
height: 175,
},
]}
/>
</TouchableOpacity>
<TouchableOpacity onPress={e => this.shuffleCards(e)}>
<Animated.Image
resizeMode="stretch"
source={require('./assets/card/back.png')}
style={[
{
width: 100,
height: 175,
position: 'absolute',
left: -100,
},
{ top: this.state.top },
]}
/>
</TouchableOpacity>
</View>
);
}
}