title: React Native draggable component - allow dragging until certain x value is reached, then animate out?
body: <p>Alright, here's what Im trying to do in RN- I want to be able to drag these Card components on the x axis. When the card hits an x value threshold on the right or left side, draggability is taken away and the card animates the far left or far right static position.</p>
  <p><a href="https://i.stack.imgur.com/xnRiy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xnRiy.png" alt="enter image description here" /></a></p>
  <p>I have the &quot;outro&quot; scale down and translate animation working:</p>
  <pre><code>let animatedValue = new Animated.Value(0);
  Animated.timing(animatedValue, {
            toValue: 1,
            duration: 1000,
            easing: Easing.out(Easing.exp)
        }).start()
  </code></pre>
  <p>and styles</p>
  <pre><code>transform: [
              {
                  translateX: animatedValue.interpolate({
                      inputRange: [0, 1],
                      outputRange: [0, 120]
                  })
              },
              {
                  translateY: animatedValue.interpolate({
                      inputRange: [0, 1],
                      outputRange: [0, 10]
                  })
              },
              {
                  scaleX: animatedValue.interpolate({
                      inputRange: [0, 1],
                      outputRange: [1, 0.8]
                  })
              },
              {
                  scaleY: animatedValue.interpolate({
                      inputRange: [0, 1],
                      outputRange: [1, 0.8]
                  })
              }
          ]
  </code></pre>
  <p>and the dragging code I plan to take from <a href="https://www.youtube.com/watch?v=_5-6xVmcIUA" rel="nofollow noreferrer">https://www.youtube.com/watch?v=_5-6xVmcIUA</a></p>
  <p>I just dont know how to trigger this animation when a certain x value is reached on either end (reference the diagram), or whether this is the most efficient way of going about this.</p>
  <p>Ive looked into card swipe libraries and packages, but Id like to do this as minimally as possible.</p>
  <p>How can I trigger an animation/disallow dragging when a certain x limit is reached?</p>