Skip to content

Commit 4a227ce

Browse files
rozelefacebook-github-bot
rozele
authored and
facebook-github-bot
committed
Add platformConfig to native animations and nodes (#32736)
Summary: Pull Request resolved: #32736 The ability to pass an additional property bag to further configure NativeAnimated is useful for a few reasons, e.g., experimentation with multiple implementations of the NativeAnimated module. The specific use case this solves is on react-native-windows, where there are two underlying animation graph options, one "optimized" animation graph that uses UI.Composition, and another similar to the approach to iOS and Android that uses a frame rendering callback. The platform configuration can be supplied to the animation node when `useNativeDriver` is set to `true`, and we pass the platform configuration object to the connected AnimatedValue and all it's children. Changelog: [General][Added] - Option to supply `platformConfig` to NativeAnimated Reviewed By: yungsters Differential Revision: D32988285 fbshipit-source-id: ab8a7bbf197573fc9e9a4737c255f124321295ac
1 parent 5fa3807 commit 4a227ce

19 files changed

+124
-53
lines changed

‎Libraries/Animated/AnimatedEvent.js

+8-1
Original file line numberDiff line numberDiff line change
@@ -19,27 +19,31 @@ const invariant = require('invariant');
1919

2020
const {shouldUseNativeDriver} = require('./NativeAnimatedHelper');
2121

22+
import type {PlatformConfig} from './AnimatedPlatformConfig';
23+
2224
export type Mapping =
2325
| {[key: string]: Mapping, ...}
2426
| AnimatedValue
2527
| AnimatedValueXY;
2628
export type EventConfig = {
2729
listener?: ?Function,
2830
useNativeDriver: boolean,
31+
platformConfig?: PlatformConfig,
2932
};
3033

3134
function attachNativeEvent(
3235
viewRef: any,
3336
eventName: string,
3437
argMapping: $ReadOnlyArray<?Mapping>,
38+
platformConfig: ?PlatformConfig,
3539
): {detach: () => void} {
3640
// Find animated values in `argMapping` and create an array representing their
3741
// key path inside the `nativeEvent` object. Ex.: ['contentOffset', 'x'].
3842
const eventMappings = [];
3943

4044
const traverse = (value, path) => {
4145
if (value instanceof AnimatedValue) {
42-
value.__makeNative();
46+
value.__makeNative(platformConfig);
4347

4448
eventMappings.push({
4549
nativeEventPath: path,
@@ -147,6 +151,7 @@ class AnimatedEvent {
147151
_listeners: Array<Function> = [];
148152
_attachedEvent: ?{detach: () => void, ...};
149153
__isNative: boolean;
154+
__platformConfig: ?PlatformConfig;
150155

151156
constructor(argMapping: $ReadOnlyArray<?Mapping>, config: EventConfig) {
152157
this._argMapping = argMapping;
@@ -161,6 +166,7 @@ class AnimatedEvent {
161166
}
162167
this._attachedEvent = null;
163168
this.__isNative = shouldUseNativeDriver(config);
169+
this.__platformConfig = config.platformConfig;
164170
}
165171

166172
__addListener(callback: Function): void {
@@ -181,6 +187,7 @@ class AnimatedEvent {
181187
viewRef,
182188
eventName,
183189
this._argMapping,
190+
this.__platformConfig,
184191
);
185192
}
186193

‎Libraries/Animated/AnimatedPlatformConfig.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/**
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
*
4+
* This source code is licensed under the MIT license found in the
5+
* LICENSE file in the root directory of this source tree.
6+
*
7+
* @flow
8+
* @format
9+
*/
10+
11+
'use strict';
12+
13+
export type PlatformConfig = {};

‎Libraries/Animated/animations/Animation.js

+5-3
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
'use strict';
1212

1313
const NativeAnimatedHelper = require('../NativeAnimatedHelper');
14-
14+
import type {PlatformConfig} from '../AnimatedPlatformConfig';
1515
import type AnimatedValue from '../nodes/AnimatedValue';
1616

1717
export type EndResult = {finished: boolean, ...};
@@ -20,6 +20,7 @@ export type EndCallback = (result: EndResult) => void;
2020
export type AnimationConfig = {
2121
isInteraction?: boolean,
2222
useNativeDriver: boolean,
23+
platformConfig?: PlatformConfig,
2324
onComplete?: ?EndCallback,
2425
iterations?: number,
2526
};
@@ -65,12 +66,13 @@ class Animation {
6566
startNativeAnimationWaitId,
6667
);
6768
try {
68-
animatedValue.__makeNative();
69+
const config = this.__getNativeAnimationConfig();
70+
animatedValue.__makeNative(config.platformConfig);
6971
this.__nativeId = NativeAnimatedHelper.generateNewAnimationId();
7072
NativeAnimatedHelper.API.startAnimatingNode(
7173
this.__nativeId,
7274
animatedValue.__getNativeTag(),
73-
this.__getNativeAnimationConfig(),
75+
config,
7476
// $FlowFixMe[method-unbinding] added when improving typing for this parameters
7577
this.__debouncedOnEnd.bind(this),
7678
);

‎Libraries/Animated/animations/DecayAnimation.js

+5
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ const Animation = require('./Animation');
1414

1515
const {shouldUseNativeDriver} = require('../NativeAnimatedHelper');
1616

17+
import type {PlatformConfig} from '../AnimatedPlatformConfig';
1718
import type AnimatedValue from '../nodes/AnimatedValue';
1819
import type {AnimationConfig, EndCallback} from './Animation';
1920

@@ -44,19 +45,22 @@ class DecayAnimation extends Animation {
4445
_onUpdate: (value: number) => void;
4546
_animationFrame: any;
4647
_useNativeDriver: boolean;
48+
_platformConfig: ?PlatformConfig;
4749

4850
constructor(config: DecayAnimationConfigSingle) {
4951
super();
5052
this._deceleration = config.deceleration ?? 0.998;
5153
this._velocity = config.velocity;
5254
this._useNativeDriver = shouldUseNativeDriver(config);
55+
this._platformConfig = config.platformConfig;
5356
this.__isInteraction = config.isInteraction ?? !this._useNativeDriver;
5457
this.__iterations = config.iterations ?? 1;
5558
}
5659

5760
__getNativeAnimationConfig(): {|
5861
deceleration: number,
5962
iterations: number,
63+
platformConfig: ?PlatformConfig,
6064
type: $TEMPORARY$string<'decay'>,
6165
velocity: number,
6266
|} {
@@ -65,6 +69,7 @@ class DecayAnimation extends Animation {
6569
deceleration: this._deceleration,
6670
velocity: this._velocity,
6771
iterations: this.__iterations,
72+
platformConfig: this._platformConfig,
6873
};
6974
}
7075

‎Libraries/Animated/animations/SpringAnimation.js

+5
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ const invariant = require('invariant');
2020

2121
const {shouldUseNativeDriver} = require('../NativeAnimatedHelper');
2222

23+
import type {PlatformConfig} from '../AnimatedPlatformConfig';
2324
import type {AnimationConfig, EndCallback} from './Animation';
2425

2526
export type SpringAnimationConfig = {
@@ -92,6 +93,7 @@ class SpringAnimation extends Animation {
9293
_onUpdate: (value: number) => void;
9394
_animationFrame: any;
9495
_useNativeDriver: boolean;
96+
_platformConfig: ?PlatformConfig;
9597

9698
constructor(config: SpringAnimationConfigSingle) {
9799
super();
@@ -104,6 +106,7 @@ class SpringAnimation extends Animation {
104106
this._toValue = config.toValue;
105107
this._delay = config.delay ?? 0;
106108
this._useNativeDriver = shouldUseNativeDriver(config);
109+
this._platformConfig = config.platformConfig;
107110
this.__isInteraction = config.isInteraction ?? !this._useNativeDriver;
108111
this.__iterations = config.iterations ?? 1;
109112

@@ -162,6 +165,7 @@ class SpringAnimation extends Animation {
162165
initialVelocity: number,
163166
iterations: number,
164167
mass: number,
168+
platformConfig: ?PlatformConfig,
165169
overshootClamping: boolean,
166170
restDisplacementThreshold: number,
167171
restSpeedThreshold: number,
@@ -180,6 +184,7 @@ class SpringAnimation extends Animation {
180184
initialVelocity: this._initialVelocity ?? this._lastVelocity,
181185
toValue: this._toValue,
182186
iterations: this.__iterations,
187+
platformConfig: this._platformConfig,
183188
};
184189
}
185190

‎Libraries/Animated/animations/TimingAnimation.js

+4
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ const Animation = require('./Animation');
1717

1818
const {shouldUseNativeDriver} = require('../NativeAnimatedHelper');
1919

20+
import type {PlatformConfig} from '../AnimatedPlatformConfig';
2021
import type {AnimationConfig, EndCallback} from './Animation';
2122

2223
export type TimingAnimationConfig = {
@@ -65,6 +66,7 @@ class TimingAnimation extends Animation {
6566
_animationFrame: any;
6667
_timeout: any;
6768
_useNativeDriver: boolean;
69+
_platformConfig: ?PlatformConfig;
6870

6971
constructor(config: TimingAnimationConfigSingle) {
7072
super();
@@ -74,6 +76,7 @@ class TimingAnimation extends Animation {
7476
this._delay = config.delay ?? 0;
7577
this.__iterations = config.iterations ?? 1;
7678
this._useNativeDriver = shouldUseNativeDriver(config);
79+
this._platformConfig = config.platformConfig;
7780
this.__isInteraction = config.isInteraction ?? !this._useNativeDriver;
7881
}
7982

@@ -90,6 +93,7 @@ class TimingAnimation extends Animation {
9093
frames,
9194
toValue: this._toValue,
9295
iterations: this.__iterations,
96+
platformConfig: this._platformConfig,
9397
};
9498
}
9599

‎Libraries/Animated/nodes/AnimatedAddition.js

+5-4
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ const AnimatedNode = require('./AnimatedNode');
1515
const AnimatedValue = require('./AnimatedValue');
1616
const AnimatedWithChildren = require('./AnimatedWithChildren');
1717

18+
import type {PlatformConfig} from '../AnimatedPlatformConfig';
1819
import type {InterpolationConfigType} from './AnimatedInterpolation';
1920

2021
class AnimatedAddition extends AnimatedWithChildren {
@@ -27,10 +28,10 @@ class AnimatedAddition extends AnimatedWithChildren {
2728
this._b = typeof b === 'number' ? new AnimatedValue(b) : b;
2829
}
2930

30-
__makeNative() {
31-
this._a.__makeNative();
32-
this._b.__makeNative();
33-
super.__makeNative();
31+
__makeNative(platformConfig: ?PlatformConfig) {
32+
this._a.__makeNative(platformConfig);
33+
this._b.__makeNative(platformConfig);
34+
super.__makeNative(platformConfig);
3435
}
3536

3637
__getValue(): number {

‎Libraries/Animated/nodes/AnimatedDiffClamp.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ const AnimatedNode = require('./AnimatedNode');
1515
const AnimatedWithChildren = require('./AnimatedWithChildren');
1616

1717
import type {InterpolationConfigType} from './AnimatedInterpolation';
18+
import type {PlatformConfig} from '../AnimatedPlatformConfig';
1819

1920
class AnimatedDiffClamp extends AnimatedWithChildren {
2021
_a: AnimatedNode;
@@ -32,9 +33,9 @@ class AnimatedDiffClamp extends AnimatedWithChildren {
3233
this._value = this._lastValue = this._a.__getValue();
3334
}
3435

35-
__makeNative() {
36-
this._a.__makeNative();
37-
super.__makeNative();
36+
__makeNative(platformConfig: ?PlatformConfig) {
37+
this._a.__makeNative(platformConfig);
38+
super.__makeNative(platformConfig);
3839
}
3940

4041
interpolate(config: InterpolationConfigType): AnimatedInterpolation {

‎Libraries/Animated/nodes/AnimatedDivision.js

+5-4
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ const AnimatedValue = require('./AnimatedValue');
1616
const AnimatedWithChildren = require('./AnimatedWithChildren');
1717

1818
import type {InterpolationConfigType} from './AnimatedInterpolation';
19+
import type {PlatformConfig} from '../AnimatedPlatformConfig';
1920

2021
class AnimatedDivision extends AnimatedWithChildren {
2122
_a: AnimatedNode;
@@ -31,10 +32,10 @@ class AnimatedDivision extends AnimatedWithChildren {
3132
this._b = typeof b === 'number' ? new AnimatedValue(b) : b;
3233
}
3334

34-
__makeNative() {
35-
this._a.__makeNative();
36-
this._b.__makeNative();
37-
super.__makeNative();
35+
__makeNative(platformConfig: ?PlatformConfig) {
36+
this._a.__makeNative(platformConfig);
37+
this._b.__makeNative(platformConfig);
38+
super.__makeNative(platformConfig);
3839
}
3940

4041
__getValue(): number {

‎Libraries/Animated/nodes/AnimatedInterpolation.js

+5-3
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ const NativeAnimatedHelper = require('../NativeAnimatedHelper');
1919
const invariant = require('invariant');
2020
const normalizeColor = require('../../StyleSheet/normalizeColor');
2121

22+
import type {PlatformConfig} from '../AnimatedPlatformConfig';
23+
2224
type ExtrapolateType = 'extend' | 'identity' | 'clamp';
2325

2426
export type InterpolationConfigType = {
@@ -317,9 +319,9 @@ class AnimatedInterpolation extends AnimatedWithChildren {
317319
this._interpolation = createInterpolation(config);
318320
}
319321

320-
__makeNative() {
321-
this._parent.__makeNative();
322-
super.__makeNative();
322+
__makeNative(platformConfig: ?PlatformConfig) {
323+
this._parent.__makeNative(platformConfig);
324+
super.__makeNative(platformConfig);
323325
}
324326

325327
__getValue(): number | string {

‎Libraries/Animated/nodes/AnimatedModulo.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ const AnimatedNode = require('./AnimatedNode');
1515
const AnimatedWithChildren = require('./AnimatedWithChildren');
1616

1717
import type {InterpolationConfigType} from './AnimatedInterpolation';
18+
import type {PlatformConfig} from '../AnimatedPlatformConfig';
1819

1920
class AnimatedModulo extends AnimatedWithChildren {
2021
_a: AnimatedNode;
@@ -26,9 +27,9 @@ class AnimatedModulo extends AnimatedWithChildren {
2627
this._modulus = modulus;
2728
}
2829

29-
__makeNative() {
30-
this._a.__makeNative();
31-
super.__makeNative();
30+
__makeNative(platformConfig: ?PlatformConfig) {
31+
this._a.__makeNative(platformConfig);
32+
super.__makeNative(platformConfig);
3233
}
3334

3435
__getValue(): number {

‎Libraries/Animated/nodes/AnimatedMultiplication.js

+5-4
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ const AnimatedValue = require('./AnimatedValue');
1616
const AnimatedWithChildren = require('./AnimatedWithChildren');
1717

1818
import type {InterpolationConfigType} from './AnimatedInterpolation';
19+
import type {PlatformConfig} from '../AnimatedPlatformConfig';
1920

2021
class AnimatedMultiplication extends AnimatedWithChildren {
2122
_a: AnimatedNode;
@@ -27,10 +28,10 @@ class AnimatedMultiplication extends AnimatedWithChildren {
2728
this._b = typeof b === 'number' ? new AnimatedValue(b) : b;
2829
}
2930

30-
__makeNative() {
31-
this._a.__makeNative();
32-
this._b.__makeNative();
33-
super.__makeNative();
31+
__makeNative(platformConfig: ?PlatformConfig) {
32+
this._a.__makeNative(platformConfig);
33+
this._b.__makeNative(platformConfig);
34+
super.__makeNative(platformConfig);
3435
}
3536

3637
__getValue(): number {

0 commit comments

Comments
 (0)