Adjust animation batch numbers to be consistent when controlled by native

Summary:
D27682424 (https://github.com/facebook/react-native/commit/ea1ff374de2ece7d1698b14d4e1aa8075df22cdd) 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
This commit is contained in:
Andrei Shikov
2021-04-23 15:07:35 -07:00
committed by Facebook GitHub Bot
parent de477a0df6
commit bda032af6e
5 changed files with 60 additions and 29 deletions
@@ -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', () => {
@@ -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});
+6 -10
View File
@@ -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
@@ -174,7 +174,7 @@ public class NativeAnimatedModule extends NativeAnimatedModuleSpec
}
private void addOperation(UIThreadOperation operation) {
operation.setBatchNumber(mIsInBatch ? mCurrentBatchNumber : -1);
operation.setBatchNumber(getCurrentBatchNumber());
mOperations.add(operation);
}
@@ -184,7 +184,7 @@ public class NativeAnimatedModule extends NativeAnimatedModuleSpec
}
private void addPreOperation(UIThreadOperation operation) {
operation.setBatchNumber(mIsInBatch ? mCurrentBatchNumber : -1);
operation.setBatchNumber(getCurrentBatchNumber());
mPreOperations.add(operation);
}
@@ -342,6 +342,13 @@ public class NativeAnimatedModule extends NativeAnimatedModuleSpec
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,6 +433,9 @@ public class NativeAnimatedModule extends NativeAnimatedModuleSpec
@Override
public void startOperationBatch() {
if (ANIMATED_MODULE_DEBUG) {
FLog.d(NAME, "Start JS operation batch " + mCurrentBatchNumber);
}
mBatchingControlledByJS = true;
mIsInBatch = true;
mCurrentBatchNumber++;
@@ -433,6 +443,9 @@ public class NativeAnimatedModule extends NativeAnimatedModuleSpec
@Override
public void finishOperationBatch() {
if (ANIMATED_MODULE_DEBUG) {
FLog.d(NAME, "Finish JS operation batch " + mCurrentBatchNumber);
}
mBatchingControlledByJS = true;
mIsInBatch = false;
mCurrentBatchNumber++;
+33
View File
@@ -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),
};
});