How can I animate a component to another component? - react-native

Question

I want to animate a card to the game table.
How can I move the component of the card to that of the game table?
Onpress
Result
I tried to with:
this.state.cards.find(c => c.id == id).ref.layout.animate({
from: { bottom: -20, bottom: 0 },
to: { bottom: 416, bottom: 196 },
But the .animate method is based on the x and y of the parent view and not on the x y of the screen.
Here is the part of my code:
<View style={styles.board}>
<ImageBackground source={require('../../assets/ornement.png')} resizeMode='contain' style={styles.ornement}>
<View onLayout={ref => this.test = ref}>
<Text style={boardStyle.message}>Test</Text>
</View>
<View style={boardStyle.boardContent} ref={event => this.view = event}>
{this.state.board.map((r, i) => <Image key={i} style={boardStyle.image} resizeMode='contain' source={CardUtils.PathOfimgCard(r.fullName)} />
)}
</View>
</ImageBackground>
</View>
<View style={styles.deck}>
{this.state.deck.map((r, i) =>
<Card onRef={(ref) => this.state.cards.push({ id: r.id, ref: ref })} key={i} ctx={r} action={this.play} select={this.state.cardSelect.find(c => c.id == r.id) != null} id={r.id} path={CardUtils.PathOfimgCard(r.fullName)} style={deckStyle} />
)}
</View>
The Card component:
<Animatable.View ref={event => this.layout = event} iterationCount={3} delay={5000} direction="alternate" style={this.props.style.touchZone} >
<TouchableOpacity onPress={() => this.props.action(this.props.id)} >
<View ref={event => this.view = event}>
<ImageBackground source={this.props.path} style={this.props.select ? this.props.style.active : this.props.style.image} resizeMode='contain' >
{!this.props.ctx.canPlay ? <Image style={[this.props.select ? this.props.style.active : this.props.style.image, styles.image]} resizeMode='contain' source={require('../../assets/black.png')} /> : <Image></Image>}
</ImageBackground>
</View>
</TouchableOpacity>
</Animatable.View>
thank you in advance