Feature Request: Add a handler for swipe released

[chimame]

Thanks for the great library. I would like to make these improvements. I will create a Pull Request if it is OK.

Suggestion

I would like to add a swipe release event handler or run onSwipeRequirementUnfulfilled on swipe released.

Problem

There is a process that can only swipe left and right. However, after two right swipes are executed, the process is not able to perform a right swipe, but only a left swipe.
In this case, I need to inform the user that the right swipe cannot be executed due to the limit. So we change preventSwipe to disable right swiping, and at the same time we use onSwipeRequirementFulfilled to indicate that right swiping is not possible when the right position is reached.

The problem is that I want to turn off the onSwipeRequirementFulfilled when I swipe release, but I can't turn it off because I can't handle the swipe release.
If I swipe back to the original position without releasing the swipe with a right swipe, onSwipeRequirementUnfulfilled can be executed, so I can turn it off, but if I swipe to a position where onSwipeRequirementUnfulfilled does not fire, I cannot turn it off. If the swipe is released at a swipe position where onSwipeRequirementUnfulfilled does not fire, it cannot be handled.

sample program has been created.

import React, { useState } from "react";
import { Text, View } from "react-native";
import TinderCard from "react-tinder-card";

const styles = {
  container: {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    width: "100%"
  },
  header: {
    color: "#000",
    fontSize: 30,
    marginBottom: 30
  },
  cardContainer: {
    width: "90%",
    maxWidth: 260,
    height: 300
  },
  card: {
    position: "absolute",
    backgroundColor: "#fff",
    width: "100%",
    maxWidth: 260,
    height: 300,
    shadowColor: "black",
    shadowOpacity: 0.2,
    shadowRadius: 20,
    borderRadius: 20,
    resizeMode: "cover"
  },
  cardImage: {
    width: "100%",
    height: "100%",
    overflow: "hidden",
    borderRadius: 20
  },
  cardTitle: {
    position: "absolute",
    top: "50%",
    margin: 10,
    fontSize: 20
  },
  infoText: {
    height: 28,
    justifyContent: "center",
    display: "flex",
    zIndex: -100
  }
};

const db = [
  {
    name: "Richard Hendricks"
  },
  {
    name: "Erlich Bachman"
  },
  {
    name: "Monica Hall"
  },
  {
    name: "Jared Dunn"
  },
  {
    name: "Dinesh Chugtai"
  }
];

function Simple() {
  const characters = db;
  const [lastDirection, setLastDirection] = useState();
  const [rightCount, setRightCount] = useState(0);
  const [direction, setDirection] = useState();

  const swiped = (direction, nameToDelete) => {
    console.log("removing: " + nameToDelete);
    setLastDirection(direction);
    setRightCount((value) => value + 1);
  };

  const outOfFrame = (name) => {
    console.log(name + " left the screen!");
  };

  const isRightLimit = rightCount > 2;

  return (
    <View style={styles.container}>
      <Text style={styles.header}>React Native Tinder Card</Text>
      <View style={styles.cardContainer}>
        {characters.map((character) => (
          <TinderCard
            key={character.name}
            preventSwipe={
              isRightLimit ? ["up", "down", "right"] : ["up", "down"]
            }
            swipeRequirementType="position"
            swipeThreshold={100}
            onSwipeRequirementFulfilled={(direction) => setDirection(direction)}
            onSwipeRequirementUnfulfilled={() => setDirection(undefined)}
            onSwipe={(dir) => swiped(dir, character.name)}
            onCardLeftScreen={() => outOfFrame(character.name)}
          >
            <View style={styles.card}>
              <Text style={styles.cardTitle}>{character.name}</Text>
            </View>
          </TinderCard>
        ))}
      </View>
      {isRightLimit && direction === "right" && (
        <Text>Swipe right is not executable</Text>
      )}
      {lastDirection ? (
        <Text style={styles.infoText}>You swiped {lastDirection}</Text>
      ) : (
        <Text style={styles.infoText} />
      )}
    </View>
  );
}

export default Simple;

Behavior can be seen here.

Improvement Proposal

1. Add a handler for swipe released and execute the passed handler during swipe released.
2. Call onSwipeRequirementUnfulfilled on swipe release.

I think the first idea is the most versatile, so I recommend the first idea.