Adjust animation batch numbers to be consistent when controlled by na…

…tive

Summary:
D27682424 (ea1ff37) updated how animated node batches are executed in Fabric. On Paper, these batches were controlled by native module in some places (batch was executed ~every 2 frames), but some animations were switching animation batching control to JS globally there as well.

This change updates two things:
- If batching is controlled by native, it makes sure batches are calculated correctly.
- At the same time, this change switches control for animation node batching to JS, aligning it with Fabric.

Changelog: [Internal]

Reviewed By: JoshuaGross, mdvacca

Differential Revision: D27939659

fbshipit-source-id: d6251bce2a303a4a007dc10297edc0175cc4b348

Libraries/Animated/__tests__/Animated-test.js

@@ -11,14 +11,9 @@
 import TestRenderer from 'react-test-renderer';
 import * as React from 'react';
 
-jest.mock('../../BatchedBridge/NativeModules', () => ({
-  NativeAnimatedModule: {},
-  PlatformConstants: {
-    getConstants() {
-      return {};
-    },
-  },
-}));
+jest.mock('../NativeAnimatedHelper', () => {
+  return jest.requireActual('../NativeAnimatedHelper');
+});
 
 let Animated = require('../Animated');
 describe('Animated tests', () => {

Libraries/Animated/__tests__/AnimatedNative-test.js

@@ -10,15 +10,9 @@
 
 jest
   .clearAllMocks()
-  .mock('../../BatchedBridge/NativeModules', () => ({
-    NativeAnimatedModule: {},
-    PlatformConstants: {
-      getConstants() {
-        return {};
-      },
-    },
-  }))
-  .mock('../NativeAnimatedModule')
+  .mock('../NativeAnimatedHelper', () => {
+    return jest.requireActual('../NativeAnimatedHelper');
+  })
   .mock('../../EventEmitter/NativeEventEmitter')
   // findNodeHandle is imported from ReactNative so mock that whole module.
   .setMock('../../Renderer/shims/ReactNative', {findNodeHandle: () => 1});

Libraries/Animated/createAnimatedComponent.js

@@ -121,19 +121,15 @@ function createAnimatedComponent<Props: {+[string]: mixed, ...}, Instance>(
     };
 
     _waitForUpdate = (): void => {
-      if (this._isFabric()) {
-        NativeAnimatedHelper.API.setWaitingForIdentifier(
-          this._animatedComponentId,
-        );
-      }
+      NativeAnimatedHelper.API.setWaitingForIdentifier(
+        this._animatedComponentId,
+      );
     };
 
     _markUpdateComplete = (): void => {
-      if (this._isFabric()) {
-        NativeAnimatedHelper.API.unsetWaitingForIdentifier(
-          this._animatedComponentId,
-        );
-      }
+      NativeAnimatedHelper.API.unsetWaitingForIdentifier(
+        this._animatedComponentId,
+      );
     };
 
     // The system is best designed when setNativeProps is implemented. It is

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

@@ -174,7 +174,7 @@ public void onHostResume() {
   }
 
   private void addOperation(UIThreadOperation operation) {
-    operation.setBatchNumber(mIsInBatch ? mCurrentBatchNumber : -1);
+    operation.setBatchNumber(getCurrentBatchNumber());
     mOperations.add(operation);
   }
 
@@ -184,7 +184,7 @@ private void addUnbatchedOperation(UIThreadOperation operation) {
   }
 
   private void addPreOperation(UIThreadOperation operation) {
-    operation.setBatchNumber(mIsInBatch ? mCurrentBatchNumber : -1);
+    operation.setBatchNumber(getCurrentBatchNumber());
     mPreOperations.add(operation);
   }
 
@@ -342,6 +342,13 @@ private void enqueueFrameCallback() {
             ReactChoreographer.CallbackType.NATIVE_ANIMATED_MODULE, mAnimatedFrameCallback);
   }
 
+  private long getCurrentBatchNumber() {
+    if (mBatchingControlledByJS && !mIsInBatch) {
+      return -1;
+    }
+    return mCurrentBatchNumber;
+  }
+
   @VisibleForTesting
   public void setNodesManager(NativeAnimatedNodesManager nodesManager) {
     mNodesManager.set(nodesManager);
@@ -426,13 +433,19 @@ private void decrementInFlightAnimationsForViewTag(final int viewTag) {
 
   @Override
   public void startOperationBatch() {
+    if (ANIMATED_MODULE_DEBUG) {
+      FLog.d(NAME, "Start JS operation batch " + mCurrentBatchNumber);
+    }
     mBatchingControlledByJS = true;
     mIsInBatch = true;
     mCurrentBatchNumber++;
   }
 
   @Override
   public void finishOperationBatch() {
+    if (ANIMATED_MODULE_DEBUG) {
+      FLog.d(NAME, "Finish JS operation batch " + mCurrentBatchNumber);
+    }
     mBatchingControlledByJS = true;
     mIsInBatch = false;
     mCurrentBatchNumber++;

jest/setup.js

@@ -332,6 +332,30 @@ jest
         doLeftAndRightSwapInRTL: true,
       }),
     },
+    NativeAnimatedModule: {
+      startOperationBatch: jest.fn(),
+      finishOperationBatch: jest.fn(),
+      createAnimatedNode: jest.fn(),
+      getValue: jest.fn(),
+      startListeningToAnimatedNodeValue: jest.fn(),
+      stopListeningToAnimatedNodeValue: jest.fn(),
+      connectAnimatedNodes: jest.fn(),
+      disconnectAnimatedNodes: jest.fn(),
+      startAnimatingNode: jest.fn(),
+      stopAnimation: jest.fn(),
+      setAnimatedNodeValue: jest.fn(),
+      setAnimatedNodeOffset: jest.fn(),
+      flattenAnimatedNodeOffset: jest.fn(),
+      extractAnimatedNodeOffset: jest.fn(),
+      connectAnimatedNodeToView: jest.fn(),
+      disconnectAnimatedNodeFromView: jest.fn(),
+      restoreDefaultValues: jest.fn(),
+      dropAnimatedNode: jest.fn(),
+      addAnimatedEventToView: jest.fn(),
+      removeAnimatedEventFromView: jest.fn(),
+      addListener: jest.fn(),
+      removeListeners: jest.fn(),
+    },
   }))
   .mock('../Libraries/NativeComponent/NativeComponentRegistry', () => {
     return {
@@ -365,4 +389,13 @@ jest
       __esModule: true,
       default: Component,
     };
+  })
+  .mock('../Libraries/Animated/NativeAnimatedHelper.js', () => {
+    const NativeAnimatedHelper = jest.requireActual(
+      '../Libraries/Animated/NativeAnimatedHelper.js',
+    );
+    return {
+      ...NativeAnimatedHelper,
+      shouldUseNativeDriver: jest.fn(false),
+    };
   });