title: ReactNative PanResponder limit X position
body: <p>I'm building a Music Player and I'm focusing on the progress bar.
  I was able to react to swipe gestures, but I cant limit how far that gesture goes.</p>
  
  <p>This is what I've done so far. I've reduced everything to the minumal:</p>
  
  <pre class="lang-js prettyprint-override"><code>constructor(props) {
      super(props);
  
      this.state = {
        pan: new Animated.ValueXY()
      };
  }
  
  componentWillMount() {
      this._panResponder = PanResponder.create({
          onMoveShouldSetResponderCapture: () =&gt; true,
          onMoveShouldSetPanResponderCapture: () =&gt; true,
          onPanResponderGrant: (e, gestureState) =&gt; {
  
  
              // Set the initial value to the current state
              let x = (this.state.pan.x._value &lt; 0) ? 0 : this.state.pan.x._value;
  
  
              this.state.pan.setOffset({ x, y: 0 });
              this.state.pan.setValue({ x: 0, y: 0 });
  
  
          },
          onPanResponderMove: Animated.event([
              null, { dx: this.state.pan.x, dy: 0 },
          ]),
          onPanResponderRelease: (e, { vx, vy }) =&gt; {
              this.state.pan.flattenOffset();
          }
      });
  }
  
  render() {
      let { pan } = this.state;
  
      // Calculate the x and y transform from the pan value
      let [translateX, translateY] = [pan.x, pan.y];
      // Calculate the transform property and set it as a value for our style which we add below to the Animated.View component
      let imageStyle = { transform: [{ translateX }, { translateY }] };
  
      return (
          &lt;View style={styles.container}&gt;
              &lt;Animated.View style={{imageStyle}} {...this._panResponder.panHandlers} /&gt;
          &lt;/View&gt;
      );
  }
  </code></pre>
  
  <p>Here there is an image showing what the problem is.</p>
  
  <h2>Initial position:</h2>
  
  <p><a href="https://i.stack.imgur.com/VxwoF.png" rel="noreferrer"><img src="https://i.stack.imgur.com/VxwoF.png" alt="Initial position"></a></p>
  
  <h2>Wrong Position, limit exceeded:</h2>
  
  <p><a href="https://i.stack.imgur.com/UZJuB.png" rel="noreferrer"><img src="https://i.stack.imgur.com/UZJuB.png" alt="Wrong position"></a></p>
  
  <p>So the idea is to stop keeping moving once the limit (left as well as right) is reached. I tried checking if <code>_value &lt; 0</code>, but it didn't work since It seems to be an offset, not a position.</p>
  
  <p>Well any help will be appreciated.</p>