return final animation values to JS when animation completes (#37782)

Summary:
Pull Request resolved: #37782

Pull Request resolved: #36731

When using the native driver for animations that involve layout changes (ie. translateY and other transforms, but not styles such as opacity), because it bypasses Fabric, the new coordinates are not updated so the Pressability responder region/tap target is incorrect

**This diff:**
- Returning the final values from the native side, at the same place it sets the "finished" flag. This gets sent to JS in `animated/animations/Animation.js`. In this diff I'm passing the value when 'hasFinishedAnimations' is true, but in a follow up diff I will look into other cases such as cancelled animations

Next:
2. Update the Animated.Value to reflect the new values
3. Call the onEnd function if there is one set
4. Pass the new values down for layout calculations and the correct Pressability responder region

Changelog:
[General][Changed] - return animated values to JS for natively driven animations

Reviewed By: javache

Differential Revision: D44110833

fbshipit-source-id: ce8c09fbe20c0c155260ce9561a67f7dfba30515

packages/react-native/Libraries/Animated/AnimatedImplementation.js

@@ -378,7 +378,7 @@ const parallel = function (
       }
 
       animations.forEach((animation, idx) => {
-        const cb = function (endResult: EndResult | {finished: boolean}) {
+        const cb = function (endResult: EndResult) {
           hasEnded[idx] = true;
           doneCount++;
           if (doneCount === animations.length) {

packages/react-native/Libraries/Animated/NativeAnimatedModule.js

@@ -13,7 +13,7 @@ import type {TurboModule} from '../TurboModule/RCTExport';
 import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
 import shouldUseTurboAnimatedModule from './shouldUseTurboAnimatedModule';
 
-type EndResult = {finished: boolean, ...};
+type EndResult = {finished: boolean, value?: number, ...};
 type EndCallback = (result: EndResult) => void;
 type SaveValueCallback = (value: number) => void;
 

packages/react-native/Libraries/Animated/NativeAnimatedTurboModule.js

@@ -13,7 +13,7 @@ import type {TurboModule} from '../TurboModule/RCTExport';
 import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
 import shouldUseTurboAnimatedModule from './shouldUseTurboAnimatedModule';
 
-type EndResult = {finished: boolean, ...};
+type EndResult = {finished: boolean, value?: number, ...};
 type EndCallback = (result: EndResult) => void;
 type SaveValueCallback = (value: number) => void;
 

packages/react-native/Libraries/Animated/animations/Animation.js

@@ -15,7 +15,7 @@ import type AnimatedValue from '../nodes/AnimatedValue';
 
 import NativeAnimatedHelper from '../NativeAnimatedHelper';
 
-export type EndResult = {finished: boolean, ...};
+export type EndResult = {finished: boolean, value?: number, ...};
 export type EndCallback = (result: EndResult) => void;
 
 export type AnimationConfig = {

packages/react-native/ReactAndroid/src/main/java/com/facebook/react/animated/NativeAnimatedNodesManager.java

@@ -302,6 +302,7 @@ private void stopAnimationsForNode(AnimatedNode animatedNode) {
           // Invoke animation end callback with {finished: false}
           WritableMap endCallbackResponse = Arguments.createMap();
           endCallbackResponse.putBoolean("finished", false);
+          endCallbackResponse.putDouble("value", animation.mAnimatedValue.mValue);
           animation.mEndCallback.invoke(endCallbackResponse);
         } else if (mReactApplicationContext != null) {
           // If no callback is passed in, this /may/ be an animation set up by the single-op
@@ -310,6 +311,7 @@ private void stopAnimationsForNode(AnimatedNode animatedNode) {
           WritableMap params = Arguments.createMap();
           params.putInt("animationId", animation.mId);
           params.putBoolean("finished", false);
+          params.putDouble("value", animation.mAnimatedValue.mValue);
           mReactApplicationContext.emitDeviceEvent(
               "onNativeAnimatedModuleAnimationFinished", params);
         }
@@ -332,6 +334,7 @@ public void stopAnimation(int animationId) {
           // Invoke animation end callback with {finished: false}
           WritableMap endCallbackResponse = Arguments.createMap();
           endCallbackResponse.putBoolean("finished", false);
+          endCallbackResponse.putDouble("value", animation.mAnimatedValue.mValue);
           animation.mEndCallback.invoke(endCallbackResponse);
         } else if (mReactApplicationContext != null) {
           // If no callback is passed in, this /may/ be an animation set up by the single-op
@@ -340,6 +343,7 @@ public void stopAnimation(int animationId) {
           WritableMap params = Arguments.createMap();
           params.putInt("animationId", animation.mId);
           params.putBoolean("finished", false);
+          params.putDouble("value", animation.mAnimatedValue.mValue);
           mReactApplicationContext.emitDeviceEvent(
               "onNativeAnimatedModuleAnimationFinished", params);
         }
@@ -645,6 +649,7 @@ public void runUpdates(long frameTimeNanos) {
           if (animation.mEndCallback != null) {
             WritableMap endCallbackResponse = Arguments.createMap();
             endCallbackResponse.putBoolean("finished", true);
+            endCallbackResponse.putDouble("value", animation.mAnimatedValue.mValue);
             animation.mEndCallback.invoke(endCallbackResponse);
           } else if (mReactApplicationContext != null) {
             // If no callback is passed in, this /may/ be an animation set up by the single-op
@@ -653,6 +658,7 @@ public void runUpdates(long frameTimeNanos) {
             WritableMap params = Arguments.createMap();
             params.putInt("animationId", animation.mId);
             params.putBoolean("finished", true);
+            params.putDouble("value", animation.mAnimatedValue.mValue);
             mReactApplicationContext.emitDeviceEvent(
                 "onNativeAnimatedModuleAnimationFinished", params);
           }