use methods like swipeBack or etc in a functional component

[art1373]

I know this is not an issue but rather a request for insight about how things work in this component.

I made a swiper component and I pass the config and the data via props. now, how can I use the ref of the parent to initiate children's swipe methods? because my Buttons live outside of the component parent.js

      <Swipe
        data={matchData}
        ref={swipeRef}
        infinite={true}
        stackScale={5}
        onSwiping={(e) => console.log(e)}
        onSwiped={(matchIndex) => {
          console.log(matchIndex);
        }}
        onSwipedAll={() => {
          console.log("onSwipedAll");
        }}
        stackSize={3}
        leftOverLayTitle="NOPE"
        rightOverLayTitle="LIKE"
      />
      <MatchHeading
        onCoinPress={() => navigation.navigate("BuyCoinScreen")}
        coinAmount={24}
      />

      <View style={styles.buttonsWrap}>
        <ButtonMatch
          color={Colors.lightGray}
          icon={Images.declineIcon}
          // onPress={() => Alert.alert("Swiped left!")}
          onPress={notifDrop}
        />
        <ButtonMatch
          color={Colors.greenSuperLike}
          icon={Images.starIcon}
          onPress={() => Alert.alert("super like")}
        />
        <ButtonMatch
          color={Colors.pinkLove}
          icon={Images.loveIcon}
          onPress={() => Alert.alert("Swiped right!")}
        />
      </View>

and the actual component

<Swiper
      cards={data}
      infinite={infinite}
      keyExtractor={(data) => data?.id?.toString()}
      renderCard={(item) => {
        return (
          <MatchInfo
            pic={item?.pic}
            name={item?.name}
            age={item?.age}
            description={item?.description}
            distance={item?.distance}
            metric={item?.metric}
          />
        );
      }}
      stackScale={stackScale}
      onSwiping={onSwiping}
      onSwiped={onSwiped}
      onSwipedAll={onSwipedAll}
      backgroundColor={Colors.transparent}
      marginTop={isIos ? hp(5.5) : null}
      cardIndex={0}
      stackSize={stackSize}
      disableTopSwipe
      disableBottomSwipe
      animateOverlayLabelsOpacity
      animateCardOpacity
      overlayLabels={{
        left: {
          title: leftOverLayTitle,
          style: {
            label: {
              ...Fonts.h1,
              color: Colors.white,
              top: hp(30),
            },
            wrapper: styles.leftWrapper,
          },
        },
        right: {
          title: rightOverLayTitle,
          style: {
            label: {
              ...Fonts.h1,
              color: Colors.white,
              top: hp(30),
            },
            wrapper: styles.rightWrapper,
          },
        },
      }}
    />
  );
};

[webraptor]

You can use these methods or the swipeBack one.

If this wasn't what you were looking for, please reopen the issue.

[newageoflight]

I would also like some clarification here. The documentation only shows how these methods can be employed within a class component. There is no indication as to how the methods of the Swiper e.g. swipeBack, can be called from inside a functional component that cannot invoke the this property.