Fix: Preserve native animated value after animated component unmount (#28841)

Summary:
After animation has been finished using Native driver there is no final value passed from the native to JS side. This causes a bug from #28114.

This PR solves this problem in the same way as `react-native-reanimated` library. When detaching it is calling native side to get the last value from Animated node and stores it on the JS side.

Preserving animated value even if animation was using `useNativeDriver: true`
Fixes #28114

## Changelog

<!-- Help reviewers and the release process by writing your own changelog entry. For an example, see:
https://github.com/facebook/react-native/wiki/Changelog
-->

[Internal] [Fixed] - Save native Animated node value on JS side in detach phase
Pull Request resolved: #28841

Test Plan: Unit tests for added getValue method passed. Green CI

Reviewed By: mdvacca

Differential Revision: D22211499

Pulled By: JoshuaGross

fbshipit-source-id: 9a3a98a9f9a8536fe2c8764f667cdabe1f6ba82a

Author: TMaszko

Libraries/Animated/src/NativeAnimatedHelper.js

@@ -38,6 +38,15 @@ const API = {
   enableQueue: function(): void {
     queueConnections = true;
   },
+  getValue: function(
+    tag: number,
+    saveValueCallback: (value: number) => void,
+  ): void {
+    invariant(NativeAnimatedModule, 'Native animated module is not available');
+    if (NativeAnimatedModule.getValue) {
+      NativeAnimatedModule.getValue(tag, saveValueCallback);
+    }
+  },
   disableQueue: function(): void {
     invariant(NativeAnimatedModule, 'Native animated module is not available');
     queueConnections = false;

Libraries/Animated/src/NativeAnimatedModule.js

@@ -15,6 +15,7 @@ import * as TurboModuleRegistry from '../../TurboModule/TurboModuleRegistry';
 
 type EndResult = {finished: boolean, ...};
 type EndCallback = (result: EndResult) => void;
+type SaveValueCallback = (value: number) => void;
 
 export type EventMapping = {|
   nativeEventPath: Array<string>,
@@ -28,6 +29,7 @@ export type AnimatingNodeConfig = Object;
 
 export interface Spec extends TurboModule {
   +createAnimatedNode: (tag: number, config: AnimatedNodeConfig) => void;
+  +getValue: (tag: number, saveValueCallback: SaveValueCallback) => void;
   +startListeningToAnimatedNodeValue: (tag: number) => void;
   +stopListeningToAnimatedNodeValue: (tag: number) => void;
   +connectAnimatedNodes: (parentTag: number, childTag: number) => void;

Libraries/Animated/src/__tests__/AnimatedNative-test.js

@@ -36,6 +36,7 @@ describe('Native Animated', () => {
 
   beforeEach(() => {
     Object.assign(NativeAnimatedModule, {
+      getValue: jest.fn(),
       addAnimatedEventToView: jest.fn(),
       connectAnimatedNodes: jest.fn(),
       connectAnimatedNodeToView: jest.fn(),
@@ -115,6 +116,26 @@ describe('Native Animated', () => {
       );
     });
 
+    it('should save value on unmount', () => {
+      NativeAnimatedModule.getValue = jest.fn((tag, saveCallback) => {
+        saveCallback(1);
+      });
+      const opacity = new Animated.Value(0);
+
+      opacity.__makeNative();
+
+      const root = TestRenderer.create(<Animated.View style={{opacity}} />);
+      const tag = opacity.__getNativeTag();
+
+      root.unmount();
+
+      expect(NativeAnimatedModule.getValue).toBeCalledWith(
+        tag,
+        expect.any(Function),
+      );
+      expect(opacity.__getValue()).toBe(1);
+    });
+
     it('should extract offset', () => {
       const opacity = new Animated.Value(0);
       opacity.__makeNative();

Libraries/Animated/src/nodes/AnimatedValue.js

@@ -86,6 +86,11 @@ class AnimatedValue extends AnimatedWithChildren {
   }
 
   __detach() {
+    if (this.__isNative) {
+      NativeAnimatedAPI.getValue(this.__getNativeTag(), value => {
+        this._value = value;
+      });
+    }
     this.stopAnimation();
     super.__detach();
   }

Libraries/FBReactNativeSpec/FBReactNativeSpec/FBReactNativeSpec-generated.mm

@@ -233,6 +233,10 @@ + (RCTManagedPointer *)JS_NativeAnimatedModule_EventMapping:(id)json
       return static_cast<ObjCTurboModule&>(turboModule).invokeObjCMethod(rt, VoidKind, "createAnimatedNode", @selector(createAnimatedNode:config:), args, count);
     }
 
+    static facebook::jsi::Value __hostFunction_NativeAnimatedModuleSpecJSI_getValue(facebook::jsi::Runtime& rt, TurboModule &turboModule, const facebook::jsi::Value* args, size_t count) {
+      return static_cast<ObjCTurboModule&>(turboModule).invokeObjCMethod(rt, VoidKind, "getValue", @selector(getValue:saveValueCallback:), args, count);
+    }
+
     static facebook::jsi::Value __hostFunction_NativeAnimatedModuleSpecJSI_startListeningToAnimatedNodeValue(facebook::jsi::Runtime& rt, TurboModule &turboModule, const facebook::jsi::Value* args, size_t count) {
       return static_cast<ObjCTurboModule&>(turboModule).invokeObjCMethod(rt, VoidKind, "startListeningToAnimatedNodeValue", @selector(startListeningToAnimatedNodeValue:), args, count);
     }
@@ -312,6 +316,9 @@ + (RCTManagedPointer *)JS_NativeAnimatedModule_EventMapping:(id)json
         methodMap_["createAnimatedNode"] = MethodMetadata {2, __hostFunction_NativeAnimatedModuleSpecJSI_createAnimatedNode};
 
 
+        methodMap_["getValue"] = MethodMetadata {2, __hostFunction_NativeAnimatedModuleSpecJSI_getValue};
+        
+        
         methodMap_["startListeningToAnimatedNodeValue"] = MethodMetadata {1, __hostFunction_NativeAnimatedModuleSpecJSI_startListeningToAnimatedNodeValue};
 
 

Libraries/FBReactNativeSpec/FBReactNativeSpec/FBReactNativeSpec.h

@@ -271,6 +271,8 @@ namespace JS {
 
 - (void)createAnimatedNode:(double)tag
                     config:(NSDictionary *)config;
+- (void)getValue:(double)tag
+saveValueCallback:(RCTResponseSenderBlock)saveValueCallback;
 - (void)startListeningToAnimatedNodeValue:(double)tag;
 - (void)stopListeningToAnimatedNodeValue:(double)tag;
 - (void)connectAnimatedNodes:(double)parentTag

Libraries/NativeAnimation/RCTNativeAnimatedModule.mm

@@ -216,6 +216,12 @@ - (void)setBridge:(RCTBridge *)bridge
   }];
 }
 
+RCT_EXPORT_METHOD(getValue:(double)nodeTag saveCallback:(RCTResponseSenderBlock)saveCallback) {
+  [self addOperationBlock:^(RCTNativeAnimatedNodesManager *nodesManager) {
+      [nodesManager getValue:[NSNumber numberWithDouble:nodeTag] saveCallback:saveCallback];
+  }];
+}
+
 #pragma mark -- Batch handling
 
 - (void)addOperationBlock:(AnimatedOperation)operation
@@ -300,7 +306,6 @@ - (void)uiManagerWillPerformMounting:(RCTUIManager *)uiManager
       operation(self->_nodesManager);
     }
   }];
-
   [uiManager addUIBlock:^(__unused RCTUIManager *manager, __unused NSDictionary<NSNumber *, UIView *> *viewRegistry) {
     for (AnimatedOperation operation in operations) {
       operation(self->_nodesManager);

Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.h

@@ -21,6 +21,9 @@
 
 - (BOOL)isNodeManagedByFabric:(nonnull NSNumber *)tag;
 
+- (void)getValue:(nonnull NSNumber *)nodeTag
+        saveCallback:(nullable RCTResponseSenderBlock)saveCallback;
+
 // graph
 
 - (void)createAnimatedNode:(nonnull NSNumber *)tag

Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.m

@@ -242,6 +242,17 @@ - (void)extractAnimatedNodeOffset:(nonnull NSNumber *)nodeTag
   [valueNode extractOffset];
 }
 
+- (void)getValue:(NSNumber *)nodeTag saveCallback:(RCTResponseSenderBlock)saveCallback
+{
+     RCTAnimatedNode *node = _animationNodes[nodeTag];
+     if (![node isKindOfClass:[RCTValueAnimatedNode class]]) {
+       RCTLogError(@"Not a value node.");
+       return;
+     }
+    RCTValueAnimatedNode *valueNode = (RCTValueAnimatedNode *)node;;
+    saveCallback(@[@(valueNode.value)]);
+}
+
 #pragma mark -- Drivers
 
 - (void)startAnimatingNode:(nonnull NSNumber *)animationId

RNTester/RNTesterUnitTests/RCTNativeAnimatedNodesManagerTests.m

@@ -864,6 +864,23 @@ - (void)testNativeAnimatedEventDoNotUpdate
   [_uiManager verify];
 }
 
+- (void) testGetValue
+{
+  __block NSInteger saveValueCallbackCalls = 0;
+  NSNumber *nodeTag = @100;
+  [_nodesManager createAnimatedNode:nodeTag
+                             config:@{@"type": @"value", @"value": @1, @"offset": @0}];
+  RCTResponseSenderBlock saveValueCallback = ^(NSArray *response) {
+    saveValueCallbackCalls++;
+    XCTAssertEqualObjects(response, @[@1]);
+  };
+  
+  XCTAssertEqual(saveValueCallbackCalls, 0);
+  
+  [_nodesManager getValue:nodeTag saveCallback:saveValueCallback];
+  XCTAssertEqual(saveValueCallbackCalls, 1);
+}
+
 /**
  * Creates a following graph of nodes:
  * Value(3, initialValue) ----> Style(4) ---> Props(5) ---> View(viewTag)

RNTester/js/examples/Animated/AnimatedExample.js

@@ -335,6 +335,115 @@ exports.examples = [
       );
     },
   },
+  {
+    title: 'Moving box example',
+    description: ('Click arrow buttons to move the box.' +
+      'Then hide the box and reveal it again.' +
+      'After that the box position will reset to initial position.': string),
+    render: (): React.Node => {
+      const containerWidth = 200;
+      const boxSize = 50;
+
+      const movingBoxStyles = StyleSheet.create({
+        container: {
+          display: 'flex',
+          alignItems: 'center',
+          flexDirection: 'column',
+          backgroundColor: '#fff',
+          padding: 30,
+        },
+        boxContainer: {
+          backgroundColor: '#d3d3d3',
+          height: boxSize,
+          width: containerWidth,
+        },
+        box: {
+          width: boxSize,
+          height: boxSize,
+          margin: 0,
+        },
+        buttonsContainer: {
+          marginTop: 20,
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'space-between',
+          width: containerWidth,
+        },
+      });
+      type Props = $ReadOnly<{||}>;
+      type State = {|boxVisible: boolean|};
+
+      class MovingBoxExample extends React.Component<Props, State> {
+        x: Animated.Value;
+        constructor(props) {
+          super(props);
+          this.x = new Animated.Value(0);
+          this.state = {
+            boxVisible: true,
+          };
+        }
+
+        render() {
+          const {boxVisible} = this.state;
+          const toggleText = boxVisible ? 'Hide' : 'Show';
+          return (
+            <View style={movingBoxStyles.container}>
+              {this.renderBox()}
+              <View style={movingBoxStyles.buttonsContainer}>
+                <RNTesterButton onPress={() => this.moveTo(0)}>
+                  {'<-'}
+                </RNTesterButton>
+                <RNTesterButton onPress={this.toggleVisibility}>
+                  {toggleText}
+                </RNTesterButton>
+                <RNTesterButton
+                  onPress={() => this.moveTo(containerWidth - boxSize)}>
+                  {'->'}
+                </RNTesterButton>
+              </View>
+            </View>
+          );
+        }
+
+        renderBox = () => {
+          if (this.state.boxVisible) {
+            const horizontalLocation = {transform: [{translateX: this.x}]};
+            return (
+              <View style={movingBoxStyles.boxContainer}>
+                <Animated.View
+                  style={[
+                    styles.content,
+                    movingBoxStyles.box,
+                    horizontalLocation,
+                  ]}
+                />
+              </View>
+            );
+          } else {
+            return (
+              <View style={movingBoxStyles.boxContainer}>
+                <Text>The box view is not being rendered</Text>
+              </View>
+            );
+          }
+        };
+
+        moveTo = x => {
+          Animated.timing(this.x, {
+            toValue: x,
+            duration: 1000,
+            useNativeDriver: true,
+          }).start();
+        };
+
+        toggleVisibility = () => {
+          const {boxVisible} = this.state;
+          this.setState({boxVisible: !boxVisible});
+        };
+      }
+      return <MovingBoxExample />;
+    },
+  },
   {
     title: 'Continuous Interactions',
     description: ('Gesture events, chaining, 2D ' +

ReactAndroid/src/main/java/com/facebook/fbreact/specs/NativeAnimatedModuleSpec.java

@@ -66,6 +66,9 @@ public abstract void removeAnimatedEventFromView(double viewTag, String eventNam
   public abstract void startAnimatingNode(double animationId, double nodeTag, ReadableMap config,
       Callback endCallback);
 
+  @ReactMethod
+  public abstract void getValue(double tag, Callback saveValueCallback);
+
   @ReactMethod
   public abstract void stopListeningToAnimatedNodeValue(double tag);
 

ReactAndroid/src/main/java/com/facebook/fbreact/specs/jni/FBReactNativeSpec-generated.cpp

@@ -186,6 +186,10 @@ namespace facebook {
       return static_cast<JavaTurboModule&>(turboModule).invokeJavaMethod(rt, VoidKind, "createAnimatedNode", "(DLcom/facebook/react/bridge/ReadableMap;)V", args, count);
     }
 
+    static facebook::jsi::Value __hostFunction_NativeAnimatedModuleSpecJSI_getValue(facebook::jsi::Runtime& rt, TurboModule &turboModule, const facebook::jsi::Value* args, size_t count) {
+      return static_cast<JavaTurboModule&>(turboModule).invokeJavaMethod(rt, VoidKind, "getValue", "(DLcom/facebook/react/bridge/Callback;)V", args, count);
+    }
+
     static facebook::jsi::Value __hostFunction_NativeAnimatedModuleSpecJSI_startListeningToAnimatedNodeValue(facebook::jsi::Runtime& rt, TurboModule &turboModule, const facebook::jsi::Value* args, size_t count) {
       return static_cast<JavaTurboModule&>(turboModule).invokeJavaMethod(rt, VoidKind, "startListeningToAnimatedNodeValue", "(D)V", args, count);
     }
@@ -265,6 +269,9 @@ namespace facebook {
         methodMap_["createAnimatedNode"] = MethodMetadata {2, __hostFunction_NativeAnimatedModuleSpecJSI_createAnimatedNode};
 
 
+        methodMap_["getValue"] = MethodMetadata {2, __hostFunction_NativeAnimatedModuleSpecJSI_getValue};
+        
+        
         methodMap_["startListeningToAnimatedNodeValue"] = MethodMetadata {1, __hostFunction_NativeAnimatedModuleSpecJSI_startListeningToAnimatedNodeValue};
 
 

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

@@ -774,4 +774,16 @@ public void addListener(String eventName) {
   public void removeListeners(double count) {
     // iOS only
   }
+
+  @Override
+  public void getValue(final double animatedValueNodeTagDouble, final Callback callback) {
+    final int animatedValueNodeTag = (int) animatedValueNodeTagDouble;
+    mOperations.add(
+        new UIThreadOperation() {
+          @Override
+          public void execute(NativeAnimatedNodesManager animatedNodesManager) {
+            animatedNodesManager.getValue(animatedValueNodeTag, callback);
+          }
+        });
+  }
 }

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

@@ -352,6 +352,15 @@ public void disconnectAnimatedNodeFromView(int animatedNodeTag, int viewTag) {
     propsAnimatedNode.disconnectFromView(viewTag);
   }
 
+  public void getValue(int tag, Callback callback) {
+    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");
+    }
+    callback.invoke(((ValueAnimatedNode) node).getValue());
+  }
+
   public void restoreDefaultValues(int animatedNodeTag) {
     AnimatedNode node = mAnimatedNodes.get(animatedNodeTag);
     // Restoring default values needs to happen before UIManager operations so it is

ReactAndroid/src/test/java/com/facebook/react/animated/NativeAnimatedNodeTraversalTest.java

@@ -860,6 +860,19 @@ public void testHandleStoppingAnimation() {
     verifyNoMoreInteractions(animationCallback);
   }
 
+  @Test
+  public void testGetValue() {
+    int tag = 1;
+    mNativeAnimatedNodesManager.createAnimatedNode(
+        tag, JavaOnlyMap.of("type", "value", "value", 1d, "offset", 0d));
+
+    Callback saveValueCallbackMock = mock(Callback.class);
+
+    mNativeAnimatedNodesManager.getValue(tag, saveValueCallbackMock);
+
+    verify(saveValueCallbackMock, times(1)).invoke(1d);
+  }
+
   @Test
   public void testInterpolationNode() {
     mNativeAnimatedNodesManager.createAnimatedNode(