Reanimated,Tinder swipe clone : how can I get the initial user information before swiping the cards?

Question

I got stuck here , I am using the third library :

yarn add 'react-native-reanimated'

And I am tried to make a tinder clone swiping cards as below:

In my case ,I need the information of the first card once the cards show before swiping it . I have no idea how to do ,could you please take a look at my code ?

CardStack.tsx:

import {  StyleSheet, useWindowDimensions, View } from 'react-native'
import React,{useEffect, useState} from 'react'
import Animated, { useSharedValue,useAnimatedStyle, withSpring, useAnimatedGestureHandler, useDerivedValue, interpolate, runOnJS } from 'react-native-reanimated';
import { PanGestureHandler } from 'react-native-gesture-handler';



const ROTATION =-40;
const SWIPE_VELOCITY =800;
const cardStack = (props:any) => {
   const {data,renderItem,onSwiped,onItemShow} = props;
   const [index,setIndex] =useState(0);
   const {width:screenWidth} = useWindowDimensions();
   const hiddenTranslateX = 2*screenWidth;
    
 const translateX = useSharedValue(0);
 const rotation = useDerivedValue(()=>
 interpolate(translateX.value,[0,hiddenTranslateX],[0,ROTATION])+'deg');
 const cardStyle = useAnimatedStyle(()=>({transform:[
    {translateX:translateX.value},
    {rotate:rotation.value},
    
 ]}));


  useEffect(()=>{
    translateX.value =0 ;
     
   
  },[index,translateX]);
 const gestureHandler = useAnimatedGestureHandler({
    onStart :_ =>{console.log("Start dragging"); },
    onActive : event =>{translateX.value = withSpring(event.translationX);},
    onEnd: event=>{
       if(Math.abs(event.velocityX)<SWIPE_VELOCITY){
          translateX.value = withSpring(0);
        
          return;
       }else{
         translateX.value = withSpring(
            event.velocityX>0?hiddenTranslateX:-hiddenTranslateX,{},()=>{
               runOnJS(setIndex)(index+1);
              
            });
       }
       runOnJS(onSwiped)(data[(index+1)%data.length])
     
    }
 });



  return (


   <View style={styles.root}>
      {/**first card*/}
 
    <PanGestureHandler onGestureEvent={gestureHandler}>
    <Animated.View
   
     style={[{width:"90%",height:"70%",backgroundColor:'white',position:'absolute',
     zIndex:3},styles.cards,cardStyle]}>
        {renderItem({item:data[index%data.length]})}
     
     </Animated.View>
    
     </PanGestureHandler>
   
    
   
    {/**second card*/}
   
   <PanGestureHandler>
    <Animated.View
   
    style={[{width:"90%",height:"70%",backgroundColor:'white',position:'absolute',
    zIndex:2},styles.cards]}>
 
 {renderItem({item:data[(index+1)%data.length]})}
    </Animated.View>
    </PanGestureHandler>
    

     
    

      {/**third card*/}
      <Animated.View
   
   style={[{width:"80%",height:"72%",backgroundColor:'white',position:'absolute',
   zIndex:1},styles.cards]}>

{renderItem({item:data[(index+1)%data.length]})}
   </Animated.View>

    {/**第三层 蓝*/}
    <Animated.View
   
   style={[{width:"70%",height:"74%",backgroundColor:'white',position:'absolute',
   zIndex:0},styles.cards]}>

{renderItem({item:data[(index+1)%data.length]})}
   </Animated.View>

   </View>

   
  )
}

export default cardStack

const styles = StyleSheet.create({

   root:{
      flex:1,
      justifyContent:'flex-end',
      alignItems:'center',
      backgroundColor:'#32a852',

   },
   cards:{
      borderRadius:10,
      bottom:30,
      shadowColor: "#000",
      shadowOffset: {
     width: 0,
     height: 2,
       },
      shadowOpacity: 0.25,
      shadowRadius: 3.84,
  
      elevation: 5,
  
   }
})

HomeScreen.tsx:

import { StyleSheet, View } from 'react-native'
import React from 'react'
import CardStack from './../component/CardStack';
import InnerCard from '../InnerCard';

const users = [
  {_id:1,image:"https://media.istockphoto.com/photos/bigeyed-naughty-obese-cat-behind-the-desk-with-red-hat-grey-color-picture-id1199279669?b=1&k=20&m=1199279669&s=170667a&w=0&h=munUsqGIlDAmKK0ouS12nHCuzDdoDfvNalw_hHvh6Ls=",userName:"BoBo"},
  {_id:2,image:"https://media.istockphoto.com/photos/the-beautiful-little-girl-in-dress-standing-and-posing-over-white-picture-id863697778?b=1&k=20&m=863697778&s=170667a&w=0&h=FycG7pgpiJEGzj74BfH7fI7niGuIoY54xI_04mJ_Hm4=",userName:"Jane"},
 
]

const HomeScreen = () => {
  const onItemShow = (user)=>{
    console.log("user ：",user);
  }
  return (
    <View style={{flex:1}}>
     <CardStack
      data ={users} 
     renderItem={({item})=><InnerCard user={item} />}
     onItemShow = {onItemShow}
      />
    </View>
  )
}

export default HomeScreen

const styles = StyleSheet.create({})