setOffset

Read documentation here http://facebook.github.io/react-native/docs/animated.html#setoffset.

setOffset is grouped in with other Animated.ValueXY methods, although it also exists on Animated.Value, because it is most typically used with ValueXY, PanResponder and the onPanResponderGrant calls.

setOffset allows us to set a base value on top of what our animated value is. For example if you set an offset of 100 and our Animated.Value is 50, then when the Animated.View requests the value it would be 150.

  componentWillMount: function() {
    this._animatedValue = new Animated.ValueXY()
    this._value = {x: 0, y: 0}

    this._animatedValue.addListener((value) => this._value = value);
	this._panResponder = PanResponder.create({
      onMoveShouldSetResponderCapture: () => true, //Tell iOS that we are allowing the movement
      onMoveShouldSetPanResponderCapture: () => true, // Same here, tell iOS that we allow dragging
      onPanResponderGrant: (e, gestureState) => {
        this._animatedValue.setOffset({x: this._value.x, y: this._value.y});
		this._animatedValue.setValue({x: 0, y: 0});
      },
      onPanResponderMove: Animated.event([
        null, {dx: this._animatedValue.x, dy: this._animatedValue.y}
      ]), // Creates a function to handle the movement and set offsets
      onPanResponderRelease: () => {
        this._animatedValue.flattenOffset(); // Flatten the offset so it resets the default positioning
      }
    });
  },


// To use

<Animated.View style={[styles.box, {transform: this._animatedValue.getTranslateTransform()}]} {...this._panResponder.panHandlers} />

In this context, setOffset is helping us accomplish in assigning the base offset to be the current position. We then clear the animated value and set it back to x: 0, y: 0. This allows us to utilize dx and dy, our delta movement, so that no jumps happen when the user presses on the box to move it.