implement Value.extractOffset in C++ Animated

packages/react-native/Libraries/Animated/__tests__/Animated-itest.js

@@ -279,3 +279,167 @@ test('moving box by 50 points with offset 10', () => {
   expect(finishValue?.value).toBe(50); // must not include offset.
   expect(finishValue?.offset).toBe(10);
 });
+
+describe('Value.flattenOffset', () => {
+  it('accumulates offset with onScroll value', () => {
+    const scrollViewRef = createRef<HostInstance>();
+    const viewRef = createRef<HostInstance>();
+    let _onScroll;
+
+    function PressableWithNativeDriver() {
+      _onScroll = useAnimatedValue(0);
+
+      return (
+        <View style={{flex: 1}}>
+          <Animated.View
+            ref={viewRef}
+            style={{
+              position: 'absolute',
+              width: 10,
+              height: 10,
+              transform: [{translateY: _onScroll}],
+            }}
+          />
+          <Animated.ScrollView
+            ref={scrollViewRef}
+            onScroll={Animated.event(
+              [
+                {
+                  nativeEvent: {
+                    contentOffset: {
+                      y: _onScroll,
+                    },
+                  },
+                },
+              ],
+              {useNativeDriver: true},
+            )}>
+            <View style={{height: 1000, width: 100}} />
+          </Animated.ScrollView>
+        </View>
+      );
+    }
+
+    const root = Fantom.createRoot();
+    Fantom.runTask(() => {
+      root.render(<PressableWithNativeDriver />);
+    });
+
+    const scrollViewelement = ensureInstance(
+      scrollViewRef.current,
+      ReactNativeElement,
+    );
+    const viewElement = ensureInstance(viewRef.current, ReactNativeElement);
+
+    Fantom.scrollTo(scrollViewelement, {
+      x: 0,
+      y: 10,
+    });
+
+    Fantom.runTask(() => {
+      _onScroll.setOffset(15);
+      _onScroll.flattenOffset();
+    });
+
+    Fantom.runTask(() => {
+      _onScroll.setOffset(15);
+    });
+
+    let transform =
+      // $FlowFixMe[incompatible-use]
+      Fantom.unstable_getDirectManipulationProps(viewElement).transform[0];
+
+    expect(transform.translateY).toBeCloseTo(40, 0.001);
+
+    // TODO: this shouldn't be neccessary.
+    Fantom.runWorkLoop();
+  });
+});
+
+describe('Value.extractOffset', () => {
+  it('sets the offset value to the base value and resets the base value to zero', () => {
+    const scrollViewRef = createRef<HostInstance>();
+    const viewRef = createRef<HostInstance>();
+    let _onScroll;
+
+    function PressableWithNativeDriver() {
+      _onScroll = useAnimatedValue(0);
+
+      return (
+        <View style={{flex: 1}}>
+          <Animated.View
+            ref={viewRef}
+            style={{
+              position: 'absolute',
+              width: 10,
+              height: 10,
+              transform: [{translateY: _onScroll}],
+            }}
+          />
+          <Animated.ScrollView
+            ref={scrollViewRef}
+            onScroll={Animated.event(
+              [
+                {
+                  nativeEvent: {
+                    contentOffset: {
+                      y: _onScroll,
+                    },
+                  },
+                },
+              ],
+              {useNativeDriver: true},
+            )}>
+            <View style={{height: 1000, width: 100}} />
+          </Animated.ScrollView>
+        </View>
+      );
+    }
+
+    const root = Fantom.createRoot();
+    Fantom.runTask(() => {
+      root.render(<PressableWithNativeDriver />);
+    });
+
+    const scrollViewelement = ensureInstance(
+      scrollViewRef.current,
+      ReactNativeElement,
+    );
+    const viewElement = ensureInstance(viewRef.current, ReactNativeElement);
+
+    Fantom.scrollTo(scrollViewelement, {
+      x: 0,
+      y: 10,
+    });
+
+    Fantom.runTask(() => {
+      _onScroll.setOffset(15);
+      // Sets offset to be 15 + 10 = 25 (this is not observable from JS).
+      _onScroll.extractOffset();
+    });
+
+    let transform =
+      // $FlowFixMe[incompatible-use]
+      Fantom.unstable_getDirectManipulationProps(viewElement).transform[0];
+
+    // Animated value is now 0 but offset is 25. The final value is 25.
+    expect(transform.translateY).toBeCloseTo(25, 0.001);
+
+    Fantom.runTask(() => {
+      // Sets offset 35, overriding the previous `setOffset`.
+      // Due to `extractOffset`, base value was restarted to 0.
+      _onScroll.setOffset(35);
+    });
+
+    transform =
+      // $FlowFixMe[incompatible-use]
+      Fantom.unstable_getDirectManipulationProps(viewElement).transform[0];
+
+    // `extractOffset` resets value back to 0.
+    // Previously we set offset to 35. The final value is 35.
+    expect(transform.translateY).toBeCloseTo(35, 0.001);
+
+    // TODO: this shouldn't be neccessary.
+    Fantom.runWorkLoop();
+  });
+});

packages/react-native/ReactCxxPlatform/react/renderer/animated/AnimatedModule.cpp

@@ -131,14 +131,14 @@ void AnimatedModule::setAnimatedNodeOffset(
 
 void AnimatedModule::flattenAnimatedNodeOffset(
     jsi::Runtime& /*rt*/,
-    Tag /*nodeTag*/) {
-  // TODO(T196512986): missing implementation
+    Tag nodeTag) {
+  operations_.push_back(FlattenAnimatedNodeOffsetOp({.nodeTag = nodeTag}));
 }
 
 void AnimatedModule::extractAnimatedNodeOffset(
     jsi::Runtime& /*rt*/,
-    Tag /*nodeTag*/) {
-  // TODO(T196513004): missing implementation
+    Tag nodeTag) {
+  operations_.push_back(ExtractAnimatedNodeOffsetOp({.nodeTag = nodeTag}));
 }
 
 void AnimatedModule::connectAnimatedNodeToView(
@@ -251,6 +251,10 @@ void AnimatedModule::executeOperation(const Operation& operation) {
           nodesManager_->setAnimatedNodeValue(op.nodeTag, op.value);
         } else if constexpr (std::is_same_v<T, SetAnimatedNodeOffsetOp>) {
           nodesManager_->setAnimatedNodeOffset(op.nodeTag, op.offset);
+        } else if constexpr (std::is_same_v<T, FlattenAnimatedNodeOffsetOp>) {
+          nodesManager_->flattenAnimatedNodeOffset(op.nodeTag);
+        } else if constexpr (std::is_same_v<T, ExtractAnimatedNodeOffsetOp>) {
+          nodesManager_->extractAnimatedNodeOffsetOp(op.nodeTag);
         } else if constexpr (std::is_same_v<T, ConnectAnimatedNodeToViewOp>) {
           nodesManager_->connectAnimatedNodeToView(op.nodeTag, op.viewTag);
         } else if constexpr (std::is_same_v<

packages/react-native/ReactCxxPlatform/react/renderer/animated/AnimatedModule.h

@@ -71,6 +71,14 @@ class AnimatedModule : public NativeAnimatedModuleCxxSpec<AnimatedModule>,
     double offset{};
   };
 
+  struct FlattenAnimatedNodeOffsetOp {
+    Tag nodeTag{};
+  };
+
+  struct ExtractAnimatedNodeOffsetOp {
+    Tag nodeTag{};
+  };
+
   struct ConnectAnimatedNodeToViewOp {
     Tag nodeTag{};
     Tag viewTag{};
@@ -115,6 +123,8 @@ class AnimatedModule : public NativeAnimatedModuleCxxSpec<AnimatedModule>,
       ConnectAnimatedNodeToViewOp,
       DisconnectAnimatedNodeFromViewOp,
       RestoreDefaultValuesOp,
+      FlattenAnimatedNodeOffsetOp,
+      ExtractAnimatedNodeOffsetOp,
       DropAnimatedNodeOp,
       AddAnimatedEventToViewOp,
       RemoveAnimatedEventFromViewOp>;

packages/react-native/ReactCxxPlatform/react/renderer/animated/NativeAnimatedNodesManager.cpp

@@ -254,6 +254,18 @@ void NativeAnimatedNodesManager::setAnimatedNodeOffset(Tag tag, double offset) {
   }
 }
 
+void NativeAnimatedNodesManager::flattenAnimatedNodeOffset(Tag tag) {
+  if (auto node = getAnimatedNode<ValueAnimatedNode>(tag)) {
+    node->flattenOffset();
+  }
+}
+
+void NativeAnimatedNodesManager::extractAnimatedNodeOffsetOp(Tag tag) {
+  if (auto node = getAnimatedNode<ValueAnimatedNode>(tag)) {
+    node->extractOffset();
+  }
+}
+
 void NativeAnimatedNodesManager::stopAnimationsForNode(Tag nodeTag) {
   std::vector<int> discardedAnimIds{};
 

packages/react-native/ReactCxxPlatform/react/renderer/animated/NativeAnimatedNodesManager.h

@@ -96,6 +96,10 @@ class NativeAnimatedNodesManager {
 
   void setAnimatedNodeValue(Tag tag, double value);
 
+  void flattenAnimatedNodeOffset(Tag tag);
+
+  void extractAnimatedNodeOffsetOp(Tag tag);
+
   void setAnimatedNodeOffset(Tag tag, double offset);
 
   // drivers

packages/react-native/ReactCxxPlatform/react/renderer/animated/nodes/ValueAnimatedNode.cpp

@@ -65,13 +65,15 @@ double ValueAnimatedNode::getValue() const noexcept {
 }
 
 void ValueAnimatedNode::flattenOffset() noexcept {
-  setRawValue(value_ + getOffset());
-  setOffset(0.0f);
+  value_ = value_ + offset_;
+  offset_ = 0;
+  onValueUpdate();
 }
 
 void ValueAnimatedNode::extractOffset() noexcept {
-  setOffset(value_ + getOffset());
-  setRawValue(0.0f);
+  offset_ += value_;
+  value_ = 0;
+  onValueUpdate();
 }
 
 void ValueAnimatedNode::onValueUpdate() noexcept {