From 4a227ce2ab3f8c181150461ab28b831979093db0 Mon Sep 17 00:00:00 2001 From: Eric Rozell Date: Wed, 19 Jan 2022 19:44:02 -0800 Subject: [PATCH] Add platformConfig to native animations and nodes (#32736) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/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 --- Libraries/Animated/AnimatedEvent.js | 9 +++++++- Libraries/Animated/AnimatedPlatformConfig.js | 13 +++++++++++ Libraries/Animated/animations/Animation.js | 8 ++++--- .../Animated/animations/DecayAnimation.js | 5 +++++ .../Animated/animations/SpringAnimation.js | 5 +++++ .../Animated/animations/TimingAnimation.js | 4 ++++ Libraries/Animated/nodes/AnimatedAddition.js | 9 ++++---- Libraries/Animated/nodes/AnimatedDiffClamp.js | 7 +++--- Libraries/Animated/nodes/AnimatedDivision.js | 9 ++++---- .../Animated/nodes/AnimatedInterpolation.js | 8 ++++--- Libraries/Animated/nodes/AnimatedModulo.js | 7 +++--- .../Animated/nodes/AnimatedMultiplication.js | 9 ++++---- Libraries/Animated/nodes/AnimatedNode.js | 22 ++++++++++++++----- Libraries/Animated/nodes/AnimatedProps.js | 14 +++++++++--- Libraries/Animated/nodes/AnimatedStyle.js | 10 +++++---- .../Animated/nodes/AnimatedSubtraction.js | 9 ++++---- Libraries/Animated/nodes/AnimatedTracking.js | 12 +++++----- Libraries/Animated/nodes/AnimatedTransform.js | 8 ++++--- .../Animated/nodes/AnimatedWithChildren.js | 9 ++++---- 19 files changed, 124 insertions(+), 53 deletions(-) create mode 100644 Libraries/Animated/AnimatedPlatformConfig.js diff --git a/Libraries/Animated/AnimatedEvent.js b/Libraries/Animated/AnimatedEvent.js index 3bef0e6cf72e1f..9aa49926152a86 100644 --- a/Libraries/Animated/AnimatedEvent.js +++ b/Libraries/Animated/AnimatedEvent.js @@ -19,6 +19,8 @@ const invariant = require('invariant'); const {shouldUseNativeDriver} = require('./NativeAnimatedHelper'); +import type {PlatformConfig} from './AnimatedPlatformConfig'; + export type Mapping = | {[key: string]: Mapping, ...} | AnimatedValue @@ -26,12 +28,14 @@ export type Mapping = export type EventConfig = { listener?: ?Function, useNativeDriver: boolean, + platformConfig?: PlatformConfig, }; function attachNativeEvent( viewRef: any, eventName: string, argMapping: $ReadOnlyArray, + platformConfig: ?PlatformConfig, ): {detach: () => void} { // Find animated values in `argMapping` and create an array representing their // key path inside the `nativeEvent` object. Ex.: ['contentOffset', 'x']. @@ -39,7 +43,7 @@ function attachNativeEvent( const traverse = (value, path) => { if (value instanceof AnimatedValue) { - value.__makeNative(); + value.__makeNative(platformConfig); eventMappings.push({ nativeEventPath: path, @@ -147,6 +151,7 @@ class AnimatedEvent { _listeners: Array = []; _attachedEvent: ?{detach: () => void, ...}; __isNative: boolean; + __platformConfig: ?PlatformConfig; constructor(argMapping: $ReadOnlyArray, config: EventConfig) { this._argMapping = argMapping; @@ -161,6 +166,7 @@ class AnimatedEvent { } this._attachedEvent = null; this.__isNative = shouldUseNativeDriver(config); + this.__platformConfig = config.platformConfig; } __addListener(callback: Function): void { @@ -181,6 +187,7 @@ class AnimatedEvent { viewRef, eventName, this._argMapping, + this.__platformConfig, ); } diff --git a/Libraries/Animated/AnimatedPlatformConfig.js b/Libraries/Animated/AnimatedPlatformConfig.js new file mode 100644 index 00000000000000..fb0b52f3f1c8bd --- /dev/null +++ b/Libraries/Animated/AnimatedPlatformConfig.js @@ -0,0 +1,13 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @flow + * @format + */ + +'use strict'; + +export type PlatformConfig = {}; diff --git a/Libraries/Animated/animations/Animation.js b/Libraries/Animated/animations/Animation.js index 249a9a413e931b..f22c5e9e4adaa5 100644 --- a/Libraries/Animated/animations/Animation.js +++ b/Libraries/Animated/animations/Animation.js @@ -11,7 +11,7 @@ 'use strict'; const NativeAnimatedHelper = require('../NativeAnimatedHelper'); - +import type {PlatformConfig} from '../AnimatedPlatformConfig'; import type AnimatedValue from '../nodes/AnimatedValue'; export type EndResult = {finished: boolean, ...}; @@ -20,6 +20,7 @@ export type EndCallback = (result: EndResult) => void; export type AnimationConfig = { isInteraction?: boolean, useNativeDriver: boolean, + platformConfig?: PlatformConfig, onComplete?: ?EndCallback, iterations?: number, }; @@ -65,12 +66,13 @@ class Animation { startNativeAnimationWaitId, ); try { - animatedValue.__makeNative(); + const config = this.__getNativeAnimationConfig(); + animatedValue.__makeNative(config.platformConfig); this.__nativeId = NativeAnimatedHelper.generateNewAnimationId(); NativeAnimatedHelper.API.startAnimatingNode( this.__nativeId, animatedValue.__getNativeTag(), - this.__getNativeAnimationConfig(), + config, // $FlowFixMe[method-unbinding] added when improving typing for this parameters this.__debouncedOnEnd.bind(this), ); diff --git a/Libraries/Animated/animations/DecayAnimation.js b/Libraries/Animated/animations/DecayAnimation.js index 5f8223e77a16db..c53ff08ac0fea4 100644 --- a/Libraries/Animated/animations/DecayAnimation.js +++ b/Libraries/Animated/animations/DecayAnimation.js @@ -14,6 +14,7 @@ const Animation = require('./Animation'); const {shouldUseNativeDriver} = require('../NativeAnimatedHelper'); +import type {PlatformConfig} from '../AnimatedPlatformConfig'; import type AnimatedValue from '../nodes/AnimatedValue'; import type {AnimationConfig, EndCallback} from './Animation'; @@ -44,12 +45,14 @@ class DecayAnimation extends Animation { _onUpdate: (value: number) => void; _animationFrame: any; _useNativeDriver: boolean; + _platformConfig: ?PlatformConfig; constructor(config: DecayAnimationConfigSingle) { super(); this._deceleration = config.deceleration ?? 0.998; this._velocity = config.velocity; this._useNativeDriver = shouldUseNativeDriver(config); + this._platformConfig = config.platformConfig; this.__isInteraction = config.isInteraction ?? !this._useNativeDriver; this.__iterations = config.iterations ?? 1; } @@ -57,6 +60,7 @@ class DecayAnimation extends Animation { __getNativeAnimationConfig(): {| deceleration: number, iterations: number, + platformConfig: ?PlatformConfig, type: $TEMPORARY$string<'decay'>, velocity: number, |} { @@ -65,6 +69,7 @@ class DecayAnimation extends Animation { deceleration: this._deceleration, velocity: this._velocity, iterations: this.__iterations, + platformConfig: this._platformConfig, }; } diff --git a/Libraries/Animated/animations/SpringAnimation.js b/Libraries/Animated/animations/SpringAnimation.js index 3f3d22e9c7a753..a2622e863927bd 100644 --- a/Libraries/Animated/animations/SpringAnimation.js +++ b/Libraries/Animated/animations/SpringAnimation.js @@ -20,6 +20,7 @@ const invariant = require('invariant'); const {shouldUseNativeDriver} = require('../NativeAnimatedHelper'); +import type {PlatformConfig} from '../AnimatedPlatformConfig'; import type {AnimationConfig, EndCallback} from './Animation'; export type SpringAnimationConfig = { @@ -92,6 +93,7 @@ class SpringAnimation extends Animation { _onUpdate: (value: number) => void; _animationFrame: any; _useNativeDriver: boolean; + _platformConfig: ?PlatformConfig; constructor(config: SpringAnimationConfigSingle) { super(); @@ -104,6 +106,7 @@ class SpringAnimation extends Animation { this._toValue = config.toValue; this._delay = config.delay ?? 0; this._useNativeDriver = shouldUseNativeDriver(config); + this._platformConfig = config.platformConfig; this.__isInteraction = config.isInteraction ?? !this._useNativeDriver; this.__iterations = config.iterations ?? 1; @@ -162,6 +165,7 @@ class SpringAnimation extends Animation { initialVelocity: number, iterations: number, mass: number, + platformConfig: ?PlatformConfig, overshootClamping: boolean, restDisplacementThreshold: number, restSpeedThreshold: number, @@ -180,6 +184,7 @@ class SpringAnimation extends Animation { initialVelocity: this._initialVelocity ?? this._lastVelocity, toValue: this._toValue, iterations: this.__iterations, + platformConfig: this._platformConfig, }; } diff --git a/Libraries/Animated/animations/TimingAnimation.js b/Libraries/Animated/animations/TimingAnimation.js index 44006408afd787..cb145cdb80b013 100644 --- a/Libraries/Animated/animations/TimingAnimation.js +++ b/Libraries/Animated/animations/TimingAnimation.js @@ -17,6 +17,7 @@ const Animation = require('./Animation'); const {shouldUseNativeDriver} = require('../NativeAnimatedHelper'); +import type {PlatformConfig} from '../AnimatedPlatformConfig'; import type {AnimationConfig, EndCallback} from './Animation'; export type TimingAnimationConfig = { @@ -65,6 +66,7 @@ class TimingAnimation extends Animation { _animationFrame: any; _timeout: any; _useNativeDriver: boolean; + _platformConfig: ?PlatformConfig; constructor(config: TimingAnimationConfigSingle) { super(); @@ -74,6 +76,7 @@ class TimingAnimation extends Animation { this._delay = config.delay ?? 0; this.__iterations = config.iterations ?? 1; this._useNativeDriver = shouldUseNativeDriver(config); + this._platformConfig = config.platformConfig; this.__isInteraction = config.isInteraction ?? !this._useNativeDriver; } @@ -90,6 +93,7 @@ class TimingAnimation extends Animation { frames, toValue: this._toValue, iterations: this.__iterations, + platformConfig: this._platformConfig, }; } diff --git a/Libraries/Animated/nodes/AnimatedAddition.js b/Libraries/Animated/nodes/AnimatedAddition.js index 9b20f8ec3963d6..409db6e4d6b7b3 100644 --- a/Libraries/Animated/nodes/AnimatedAddition.js +++ b/Libraries/Animated/nodes/AnimatedAddition.js @@ -15,6 +15,7 @@ const AnimatedNode = require('./AnimatedNode'); const AnimatedValue = require('./AnimatedValue'); const AnimatedWithChildren = require('./AnimatedWithChildren'); +import type {PlatformConfig} from '../AnimatedPlatformConfig'; import type {InterpolationConfigType} from './AnimatedInterpolation'; class AnimatedAddition extends AnimatedWithChildren { @@ -27,10 +28,10 @@ class AnimatedAddition extends AnimatedWithChildren { this._b = typeof b === 'number' ? new AnimatedValue(b) : b; } - __makeNative() { - this._a.__makeNative(); - this._b.__makeNative(); - super.__makeNative(); + __makeNative(platformConfig: ?PlatformConfig) { + this._a.__makeNative(platformConfig); + this._b.__makeNative(platformConfig); + super.__makeNative(platformConfig); } __getValue(): number { diff --git a/Libraries/Animated/nodes/AnimatedDiffClamp.js b/Libraries/Animated/nodes/AnimatedDiffClamp.js index fcb88c3149c8ae..629e04cc68113f 100644 --- a/Libraries/Animated/nodes/AnimatedDiffClamp.js +++ b/Libraries/Animated/nodes/AnimatedDiffClamp.js @@ -15,6 +15,7 @@ const AnimatedNode = require('./AnimatedNode'); const AnimatedWithChildren = require('./AnimatedWithChildren'); import type {InterpolationConfigType} from './AnimatedInterpolation'; +import type {PlatformConfig} from '../AnimatedPlatformConfig'; class AnimatedDiffClamp extends AnimatedWithChildren { _a: AnimatedNode; @@ -32,9 +33,9 @@ class AnimatedDiffClamp extends AnimatedWithChildren { this._value = this._lastValue = this._a.__getValue(); } - __makeNative() { - this._a.__makeNative(); - super.__makeNative(); + __makeNative(platformConfig: ?PlatformConfig) { + this._a.__makeNative(platformConfig); + super.__makeNative(platformConfig); } interpolate(config: InterpolationConfigType): AnimatedInterpolation { diff --git a/Libraries/Animated/nodes/AnimatedDivision.js b/Libraries/Animated/nodes/AnimatedDivision.js index 84269a6e39898d..1dcd4622ac135d 100644 --- a/Libraries/Animated/nodes/AnimatedDivision.js +++ b/Libraries/Animated/nodes/AnimatedDivision.js @@ -16,6 +16,7 @@ const AnimatedValue = require('./AnimatedValue'); const AnimatedWithChildren = require('./AnimatedWithChildren'); import type {InterpolationConfigType} from './AnimatedInterpolation'; +import type {PlatformConfig} from '../AnimatedPlatformConfig'; class AnimatedDivision extends AnimatedWithChildren { _a: AnimatedNode; @@ -31,10 +32,10 @@ class AnimatedDivision extends AnimatedWithChildren { this._b = typeof b === 'number' ? new AnimatedValue(b) : b; } - __makeNative() { - this._a.__makeNative(); - this._b.__makeNative(); - super.__makeNative(); + __makeNative(platformConfig: ?PlatformConfig) { + this._a.__makeNative(platformConfig); + this._b.__makeNative(platformConfig); + super.__makeNative(platformConfig); } __getValue(): number { diff --git a/Libraries/Animated/nodes/AnimatedInterpolation.js b/Libraries/Animated/nodes/AnimatedInterpolation.js index bc1977927bb984..5ebea80ba102fa 100644 --- a/Libraries/Animated/nodes/AnimatedInterpolation.js +++ b/Libraries/Animated/nodes/AnimatedInterpolation.js @@ -19,6 +19,8 @@ const NativeAnimatedHelper = require('../NativeAnimatedHelper'); const invariant = require('invariant'); const normalizeColor = require('../../StyleSheet/normalizeColor'); +import type {PlatformConfig} from '../AnimatedPlatformConfig'; + type ExtrapolateType = 'extend' | 'identity' | 'clamp'; export type InterpolationConfigType = { @@ -317,9 +319,9 @@ class AnimatedInterpolation extends AnimatedWithChildren { this._interpolation = createInterpolation(config); } - __makeNative() { - this._parent.__makeNative(); - super.__makeNative(); + __makeNative(platformConfig: ?PlatformConfig) { + this._parent.__makeNative(platformConfig); + super.__makeNative(platformConfig); } __getValue(): number | string { diff --git a/Libraries/Animated/nodes/AnimatedModulo.js b/Libraries/Animated/nodes/AnimatedModulo.js index 031dfb6ea8f556..88663cc0e12426 100644 --- a/Libraries/Animated/nodes/AnimatedModulo.js +++ b/Libraries/Animated/nodes/AnimatedModulo.js @@ -15,6 +15,7 @@ const AnimatedNode = require('./AnimatedNode'); const AnimatedWithChildren = require('./AnimatedWithChildren'); import type {InterpolationConfigType} from './AnimatedInterpolation'; +import type {PlatformConfig} from '../AnimatedPlatformConfig'; class AnimatedModulo extends AnimatedWithChildren { _a: AnimatedNode; @@ -26,9 +27,9 @@ class AnimatedModulo extends AnimatedWithChildren { this._modulus = modulus; } - __makeNative() { - this._a.__makeNative(); - super.__makeNative(); + __makeNative(platformConfig: ?PlatformConfig) { + this._a.__makeNative(platformConfig); + super.__makeNative(platformConfig); } __getValue(): number { diff --git a/Libraries/Animated/nodes/AnimatedMultiplication.js b/Libraries/Animated/nodes/AnimatedMultiplication.js index d5113c90fe74df..9adb2570549703 100644 --- a/Libraries/Animated/nodes/AnimatedMultiplication.js +++ b/Libraries/Animated/nodes/AnimatedMultiplication.js @@ -16,6 +16,7 @@ const AnimatedValue = require('./AnimatedValue'); const AnimatedWithChildren = require('./AnimatedWithChildren'); import type {InterpolationConfigType} from './AnimatedInterpolation'; +import type {PlatformConfig} from '../AnimatedPlatformConfig'; class AnimatedMultiplication extends AnimatedWithChildren { _a: AnimatedNode; @@ -27,10 +28,10 @@ class AnimatedMultiplication extends AnimatedWithChildren { this._b = typeof b === 'number' ? new AnimatedValue(b) : b; } - __makeNative() { - this._a.__makeNative(); - this._b.__makeNative(); - super.__makeNative(); + __makeNative(platformConfig: ?PlatformConfig) { + this._a.__makeNative(platformConfig); + this._b.__makeNative(platformConfig); + super.__makeNative(platformConfig); } __getValue(): number { diff --git a/Libraries/Animated/nodes/AnimatedNode.js b/Libraries/Animated/nodes/AnimatedNode.js index d8a8e054b6edf0..30e802cc914eb0 100644 --- a/Libraries/Animated/nodes/AnimatedNode.js +++ b/Libraries/Animated/nodes/AnimatedNode.js @@ -15,6 +15,8 @@ const NativeAnimatedHelper = require('../NativeAnimatedHelper'); const NativeAnimatedAPI = NativeAnimatedHelper.API; const invariant = require('invariant'); +import type {PlatformConfig} from '../AnimatedPlatformConfig'; + type ValueListenerCallback = (state: {value: number, ...}) => mixed; let _uniqueId = 1; @@ -23,6 +25,7 @@ let _uniqueId = 1; // support them yet class AnimatedNode { _listeners: {[key: string]: ValueListenerCallback, ...}; + _platformConfig: ?PlatformConfig; __nativeAnimatedValueListener: ?any; __attach(): void {} __detach(): void { @@ -50,11 +53,12 @@ class AnimatedNode { this._listeners = {}; } - __makeNative() { + __makeNative(platformConfig: ?PlatformConfig) { if (!this.__isNative) { throw new Error('This node cannot be made a "native" animated node'); } + this._platformConfig = platformConfig; if (this.hasListeners()) { this._startListeningToNativeValueUpdates(); } @@ -163,10 +167,11 @@ class AnimatedNode { if (this.__nativeTag == null) { this.__nativeTag = nativeTag; - NativeAnimatedHelper.API.createAnimatedNode( - nativeTag, - this.__getNativeConfig(), - ); + const config = this.__getNativeConfig(); + if (this._platformConfig) { + config.platformConfig = this._platformConfig; + } + NativeAnimatedHelper.API.createAnimatedNode(nativeTag, config); this.__shouldUpdateListenersForNewNativeTag = true; } @@ -180,6 +185,13 @@ class AnimatedNode { toJSON(): any { return this.__getValue(); } + + __getPlatformConfig(): ?PlatformConfig { + return this._platformConfig; + } + __setPlatformConfig(platformConfig: ?PlatformConfig) { + this._platformConfig = platformConfig; + } } module.exports = AnimatedNode; diff --git a/Libraries/Animated/nodes/AnimatedProps.js b/Libraries/Animated/nodes/AnimatedProps.js index 8fd5b995e38b37..baf5c395c992e4 100644 --- a/Libraries/Animated/nodes/AnimatedProps.js +++ b/Libraries/Animated/nodes/AnimatedProps.js @@ -18,6 +18,8 @@ const ReactNative = require('../../Renderer/shims/ReactNative'); const invariant = require('invariant'); +import type {PlatformConfig} from '../AnimatedPlatformConfig'; + class AnimatedProps extends AnimatedNode { _props: Object; _animatedView: any; @@ -91,15 +93,21 @@ class AnimatedProps extends AnimatedNode { this._callback(); } - __makeNative(): void { + __makeNative(platformConfig: ?PlatformConfig): void { if (!this.__isNative) { this.__isNative = true; for (const key in this._props) { const value = this._props[key]; if (value instanceof AnimatedNode) { - value.__makeNative(); + value.__makeNative(platformConfig); } } + + // Since this does not call the super.__makeNative, we need to store the + // supplied platformConfig here, before calling __connectAnimatedView + // where it will be needed to traverse the graph of attached values. + super.__setPlatformConfig(platformConfig); + if (this._animatedView) { this.__connectAnimatedView(); } @@ -161,7 +169,7 @@ class AnimatedProps extends AnimatedNode { for (const propKey in this._props) { const value = this._props[propKey]; if (value instanceof AnimatedNode) { - value.__makeNative(); + value.__makeNative(this.__getPlatformConfig()); propsConfig[propKey] = value.__getNativeTag(); } } diff --git a/Libraries/Animated/nodes/AnimatedStyle.js b/Libraries/Animated/nodes/AnimatedStyle.js index 9c1fafc4d6deee..6b6761ba256bbf 100644 --- a/Libraries/Animated/nodes/AnimatedStyle.js +++ b/Libraries/Animated/nodes/AnimatedStyle.js @@ -17,6 +17,8 @@ const NativeAnimatedHelper = require('../NativeAnimatedHelper'); const flattenStyle = require('../../StyleSheet/flattenStyle'); +import type {PlatformConfig} from '../AnimatedPlatformConfig'; + class AnimatedStyle extends AnimatedWithChildren { _style: Object; @@ -95,14 +97,14 @@ class AnimatedStyle extends AnimatedWithChildren { super.__detach(); } - __makeNative() { + __makeNative(platformConfig: ?PlatformConfig) { for (const key in this._style) { const value = this._style[key]; if (value instanceof AnimatedNode) { - value.__makeNative(); + value.__makeNative(platformConfig); } } - super.__makeNative(); + super.__makeNative(platformConfig); } __getNativeConfig(): Object { @@ -110,7 +112,7 @@ class AnimatedStyle extends AnimatedWithChildren { for (const styleKey in this._style) { if (this._style[styleKey] instanceof AnimatedNode) { const style = this._style[styleKey]; - style.__makeNative(); + style.__makeNative(this.__getPlatformConfig()); styleConfig[styleKey] = style.__getNativeTag(); } // Non-animated styles are set using `setNativeProps`, no need diff --git a/Libraries/Animated/nodes/AnimatedSubtraction.js b/Libraries/Animated/nodes/AnimatedSubtraction.js index ed5f5a85d655e3..3c8eb158fd05db 100644 --- a/Libraries/Animated/nodes/AnimatedSubtraction.js +++ b/Libraries/Animated/nodes/AnimatedSubtraction.js @@ -16,6 +16,7 @@ const AnimatedValue = require('./AnimatedValue'); const AnimatedWithChildren = require('./AnimatedWithChildren'); import type {InterpolationConfigType} from './AnimatedInterpolation'; +import type {PlatformConfig} from '../AnimatedPlatformConfig'; class AnimatedSubtraction extends AnimatedWithChildren { _a: AnimatedNode; @@ -27,10 +28,10 @@ class AnimatedSubtraction extends AnimatedWithChildren { this._b = typeof b === 'number' ? new AnimatedValue(b) : b; } - __makeNative() { - this._a.__makeNative(); - this._b.__makeNative(); - super.__makeNative(); + __makeNative(platformConfig: ?PlatformConfig) { + this._a.__makeNative(platformConfig); + this._b.__makeNative(platformConfig); + super.__makeNative(platformConfig); } __getValue(): number { diff --git a/Libraries/Animated/nodes/AnimatedTracking.js b/Libraries/Animated/nodes/AnimatedTracking.js index 7966dda8f16b9c..e8f74eaa54ac75 100644 --- a/Libraries/Animated/nodes/AnimatedTracking.js +++ b/Libraries/Animated/nodes/AnimatedTracking.js @@ -17,6 +17,7 @@ const { shouldUseNativeDriver, } = require('../NativeAnimatedHelper'); +import type {PlatformConfig} from '../AnimatedPlatformConfig'; import type {EndCallback} from '../animations/Animation'; class AnimatedTracking extends AnimatedNode { @@ -44,11 +45,11 @@ class AnimatedTracking extends AnimatedNode { this.__attach(); } - __makeNative() { + __makeNative(platformConfig: ?PlatformConfig) { this.__isNative = true; - this._parent.__makeNative(); - super.__makeNative(); - this._value.__makeNative(); + this._parent.__makeNative(platformConfig); + super.__makeNative(platformConfig); + this._value.__makeNative(platformConfig); } __getValue(): Object { @@ -63,7 +64,8 @@ class AnimatedTracking extends AnimatedNode { // if we don't do this `update` method will get called. At that point it // may be too late as it would mean the JS driver has already started // updating node values - this.__makeNative(); + let {platformConfig} = this._animationConfig; + this.__makeNative(platformConfig); } } diff --git a/Libraries/Animated/nodes/AnimatedTransform.js b/Libraries/Animated/nodes/AnimatedTransform.js index a4a5be5f7630d4..0fee6b07787381 100644 --- a/Libraries/Animated/nodes/AnimatedTransform.js +++ b/Libraries/Animated/nodes/AnimatedTransform.js @@ -14,6 +14,8 @@ const AnimatedNode = require('./AnimatedNode'); const AnimatedWithChildren = require('./AnimatedWithChildren'); const NativeAnimatedHelper = require('../NativeAnimatedHelper'); +import type {PlatformConfig} from '../AnimatedPlatformConfig'; + class AnimatedTransform extends AnimatedWithChildren { _transforms: $ReadOnlyArray; @@ -22,16 +24,16 @@ class AnimatedTransform extends AnimatedWithChildren { this._transforms = transforms; } - __makeNative() { + __makeNative(platformConfig: ?PlatformConfig) { this._transforms.forEach(transform => { for (const key in transform) { const value = transform[key]; if (value instanceof AnimatedNode) { - value.__makeNative(); + value.__makeNative(platformConfig); } } }); - super.__makeNative(); + super.__makeNative(platformConfig); } __getValue(): $ReadOnlyArray { diff --git a/Libraries/Animated/nodes/AnimatedWithChildren.js b/Libraries/Animated/nodes/AnimatedWithChildren.js index b8c6b243baf643..435365d1f6ee6d 100644 --- a/Libraries/Animated/nodes/AnimatedWithChildren.js +++ b/Libraries/Animated/nodes/AnimatedWithChildren.js @@ -10,6 +10,7 @@ 'use strict'; +import type {PlatformConfig} from '../AnimatedPlatformConfig'; const AnimatedNode = require('./AnimatedNode'); const NativeAnimatedHelper = require('../NativeAnimatedHelper'); @@ -21,18 +22,18 @@ class AnimatedWithChildren extends AnimatedNode { this._children = []; } - __makeNative() { + __makeNative(platformConfig: ?PlatformConfig) { if (!this.__isNative) { this.__isNative = true; for (const child of this._children) { - child.__makeNative(); + child.__makeNative(platformConfig); NativeAnimatedHelper.API.connectAnimatedNodes( this.__getNativeTag(), child.__getNativeTag(), ); } } - super.__makeNative(); + super.__makeNative(platformConfig); } __addChild(child: AnimatedNode): void { @@ -42,7 +43,7 @@ class AnimatedWithChildren extends AnimatedNode { this._children.push(child); if (this.__isNative) { // Only accept "native" animated nodes as children - child.__makeNative(); + child.__makeNative(this.__getPlatformConfig()); NativeAnimatedHelper.API.connectAnimatedNodes( this.__getNativeTag(), child.__getNativeTag(),