Add extractOffset to Animated

Summary:
`flattenOffset` has proven extremely useful, especially when dealing with pan responders and other gesture based animations, but I've also found a number of use cases for the inverse. This diff introduces `extractOffset`, which sets the offset value to the base value, and resets the base value to zero. A common use case would be to extractOffset onGrant and flattenOffset onRelease.
Closes #10721

Differential Revision: D4145744

fbshipit-source-id: dc2aa31652df0b31450556f611db43548180c7dd

Author: ryangomba

Libraries/Animated/src/AnimatedImplementation.js

@@ -763,6 +763,18 @@ class AnimatedValue extends AnimatedWithChildren {
     }
   }
 
+  /**
+   * Sets the offset value to the base value, and resets the base value to zero.
+   * The final output of the value is unchanged.
+   */
+  extractOffset(): void {
+    this._offset += this._value;
+    this._value = 0;
+    if (this.__isNative) {
+      NativeAnimatedAPI.extractAnimatedNodeOffset(this.__getNativeTag());
+    }
+  }
+
   /**
    * Adds an asynchronous listener to the value so you can observe updates from
    * animations.  This is useful because there is no way to

Libraries/Animated/src/NativeAnimatedHelper.js

@@ -73,6 +73,10 @@ const API = {
     assertNativeAnimatedModule();
     NativeAnimatedModule.flattenAnimatedNodeOffset(nodeTag);
   },
+  extractAnimatedNodeOffset: function(nodeTag: number): void {
+    assertNativeAnimatedModule();
+    NativeAnimatedModule.extractAnimatedNodeOffset(nodeTag);
+  },
   connectAnimatedNodeToView: function(nodeTag: number, viewTag: number): void {
     assertNativeAnimatedModule();
     NativeAnimatedModule.connectAnimatedNodeToView(nodeTag, viewTag);

Libraries/NativeAnimation/Nodes/RCTValueAnimatedNode.h

@@ -22,6 +22,7 @@
 
 - (void)setOffset:(CGFloat)offset;
 - (void)flattenOffset;
+- (void)extractOffset;
 
 @property (nonatomic, assign) CGFloat value;
 @property (nonatomic, weak) id<RCTValueAnimatedNodeObserver> valueObserver;

Libraries/NativeAnimation/Nodes/RCTValueAnimatedNode.m

@@ -35,6 +35,12 @@ - (void)flattenOffset
   _offset = 0;
 }
 
+- (void)extractOffset
+{
+  _offset += _value;
+  _value = 0;
+}
+
 - (CGFloat)value
 {
   return _value + _offset;

Libraries/NativeAnimation/RCTNativeAnimatedModule.m

@@ -225,6 +225,18 @@ - (dispatch_queue_t)methodQueue
   [valueNode flattenOffset];
 }
 
+RCT_EXPORT_METHOD(extractAnimatedNodeOffset:(nonnull NSNumber *)nodeTag)
+{
+  RCTAnimatedNode *node = _animationNodes[nodeTag];
+  if (![node isKindOfClass:[RCTValueAnimatedNode class]]) {
+    RCTLogError(@"Not a value node.");
+    return;
+  }
+
+  RCTValueAnimatedNode *valueNode = (RCTValueAnimatedNode *)node;
+  [valueNode extractOffset];
+}
+
 RCT_EXPORT_METHOD(connectAnimatedNodeToView:(nonnull NSNumber *)nodeTag
                   viewTag:(nonnull NSNumber *)viewTag)
 {

ReactAndroid/src/main/java/com/facebook/react/animated/NativeAnimatedModule.java

@@ -262,6 +262,16 @@ public void execute(NativeAnimatedNodesManager animatedNodesManager) {
     });
   }
 
+  @ReactMethod
+  public void extractAnimatedNodeOffset(final int tag) {
+    mOperations.add(new UIThreadOperation() {
+      @Override
+      public void execute(NativeAnimatedNodesManager animatedNodesManager) {
+        animatedNodesManager.extractAnimatedNodeOffset(tag);
+      }
+    });
+  }
+
   @ReactMethod
   public void startAnimatingNode(
       final int animationId,

ReactAndroid/src/main/java/com/facebook/react/animated/NativeAnimatedNodesManager.java

@@ -157,6 +157,15 @@ public void flattenAnimatedNodeOffset(int tag) {
     ((ValueAnimatedNode) node).flattenOffset();
   }
 
+  public void extractAnimatedNodeOffset(int tag) {
+    AnimatedNode node = mAnimatedNodes.get(tag);
+    if (node == null || !(node instanceof ValueAnimatedNode)) {
+      throw new JSApplicationIllegalArgumentException("Animated node with tag " + tag +
+        " does not exists or is not a 'value' node");
+    }
+    ((ValueAnimatedNode) node).extractOffset();
+  }
+
   public void startAnimatingNode(
     int animationId,
     int animatedNodeTag,

ReactAndroid/src/main/java/com/facebook/react/animated/ValueAnimatedNode.java

@@ -40,6 +40,11 @@ public void flattenOffset() {
     mOffset = 0;
   }
 
+  public void extractOffset() {
+    mOffset += mValue;
+    mValue = 0;
+  }
+
   public void onValueUpdate() {
     if (mValueListener == null) {
       return;