Need Help Making Button Press Trigger Swipe Animation in React Native

Question

I am currently working on a React-Native application where I have implemented a SwipeableCard component using PanResponder to handle swipe gestures. The card responds appropriately when physically swiped by the user. I used the code I found here: https://aboutreact.com/react-native-swipeable-cardview-like-tinder/

Issue Details:

I'm facing challenges in extending this functionality to trigger the same swipe animations when a button is pressed. In my parent component (FeatureCard), I render the SwipeableCard and handle button presses. I want the button press to initiate the same swipe animation as if the user swiped the card either left or right.

Relevant code from the SwipeableCard component

const panResponder = PanResponder.create({
  // ... (PanResponder configuration)
  
  onPanResponderRelease: (evt, gestureState) => {
    // Swipe animation logic based on gestureState
    // ...
  },
});

return (
  <Animated.View
    {...panResponder.panHandlers}
    style={[
      styles.card,
      {
        backgroundColor: item.backgroundColor,
        opacity: cardOpacity,
        transform: [{ translateX: xPosition }, { rotate: rotateCard }],
      },
    ]}
  >
    {/* ... (card content) */}
  </Animated.View>
);

Relevant code from the FeatureCard component

// ...

  const [noMoreCard, setNoMoreCard] = useState(false);
  const [sampleCardArray, setSampleCardArray] = useState(DEMO_CONTENT);
  const [swipeDirection, setSwipeDirection] = useState('--');

  const removeCard = id => {
    ...
  };

  const lastSwipedDirection = swipeDirection => {
    ...
  };

  return (
    <View>
      <View style={styles.cardContainer}>
        {sampleCardArray.map((item, key) => (
          <SwipeableCard
            key={key}
            item={item}
            removeCard={() => removeCard(item.id)}
            swipedDirection={lastSwipedDirection}
          />
        ))}
        {noMoreCard ? (
          <Text style={{fontSize: 22, color: '#000'}}>No Cards Found.</Text>
        ) : null}
      </View>
      <View style={styles.buttonsContainer}>
        <ImageButton
          style={styles.button}
          source={require('/FalseButton.png')}
          onPress={() => {handleButton('Left')}}
        />
        <ImageButton
          style={styles.button}
          source={require('/TrueButton.png')}
          onPress={() => handleButton('Right')}
        />
      </View>
);

Direct State Update: I tried directly updating the state (swipeDirection) in the handleButton function and expected the existing animation logic to handle the update. Unfortunately, this did not trigger the animations as expected. I still think this is how it should be done but I'm vey unsure about the details. This works as in when I press a Button the card is removed, but the animation is missing and if I use the same button twice I need to refresh to see the change. I understand its because I'm only calling the removeCard() function, but what I actually want it calling the panResponder in the child component (I think?), but I don't know how to do that, or if I'm on the right track.

const handleButton = (direction) => {
  removeCard();
  setSwipeDirection(direction);
  // setSwipeDirection('--');
};

Simulation Attempt: I attempted to simulate the swipe animation by directly calling the functions responsible for handling swipe gestures. However, I don't know how to exactly do that, I tried different things but it got a bit messy, so I decided to ask.

I'm seeking guidance or alternative approaches to ensure that button presses trigger the same swipe animations as a user-initiated swipe. Any insights or suggestions would be greatly appreciated.