When animating using native driver, trigger rerender on animation completion

Summary:
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.

In this diff, on completion of a natively driven animation, AnimatedProps.update() is called, which in turn calls the value update callback on AnimatedProps, which [triggers a rerender (via setState)](https://www.internalfb.com/code/fbsource/[566daad5db45807260a8af1f85385ca86aebf894]/xplat/js/react-native-github/packages/react-native/Libraries/Animated/useAnimatedProps.js?lines=80).

Alternative considered was using setNativeProps, but that approach was dropped as setNativeProps was only introduced to make migration easier and should not be used for new code, as per sammy-SC.

Changelog:
[General][Fixed] - When animating using native driver, trigger rerender on animation completion in order to update Pressability responder regions

Differential Revision: D46574511

fbshipit-source-id: 2d011dfc360a4f72a659573f8e33bfcbbf99117d

Author: genkikondo

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

@@ -11,9 +11,11 @@
 'use strict';
 
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
+import type AnimatedNode from '../nodes/AnimatedNode';
 import type AnimatedValue from '../nodes/AnimatedValue';
 
 import NativeAnimatedHelper from '../NativeAnimatedHelper';
+import AnimatedProps from '../nodes/AnimatedProps';
 
 export type EndResult = {finished: boolean, value?: number, ...};
 export type EndCallback = (result: EndResult) => void;
@@ -65,6 +67,21 @@ export default class Animation {
     onEnd && onEnd(result);
   }
 
+  __findAnimatedPropsNode(node: AnimatedNode): ?AnimatedProps {
+    if (node instanceof AnimatedProps) {
+      return node;
+    }
+
+    for (const child of node.__getChildren()) {
+      const result = this.__findAnimatedPropsNode(child);
+      if (result) {
+        return result;
+      }
+    }
+
+    return null;
+  }
+
   __startNativeAnimation(animatedValue: AnimatedValue): void {
     const startNativeAnimationWaitId = `${startNativeAnimationNextId}:startAnimation`;
     startNativeAnimationNextId += 1;
@@ -89,6 +106,13 @@ export default class Animation {
           if (value != null) {
             animatedValue.__onAnimatedValueUpdateReceived(value);
           }
+
+          // Once the JS side node is synced with the updated values, trigger an
+          // update on the AnimatedProps node to call any registered callbacks.
+          const animatedPropsNode = this.__findAnimatedPropsNode(animatedValue);
+          if (animatedPropsNode != null) {
+            animatedPropsNode.update();
+          }
         },
       );
     } catch (e) {

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

@@ -66,7 +66,9 @@ export default function useAnimatedProps<TProps: {...}, TInstance>(
       // changes), but `setNativeView` already optimizes for that.
       node.setNativeView(instance);
 
-      // NOTE: This callback is only used by the JavaScript animation driver.
+      // NOTE: When using the JS animation driver, this callback is called on
+      // every animation frame. When using the native driver, this callback is
+      // called when the animation completes.
       onUpdateRef.current = () => {
         if (
           process.env.NODE_ENV === 'test' ||