react-native-tvos 0.75.2-0rc0 → 0.76.0-0rc0

package/Libraries/Alert/Alert.js

@@ -98,10 +98,13 @@ class Alert {
       const onAction = (action, buttonKey) => {
         if (action === constants.buttonClicked) {
           if (buttonKey === constants.buttonNeutral) {
+            // $FlowFixMe[incompatible-type]
             buttonNeutral.onPress && buttonNeutral.onPress();
           } else if (buttonKey === constants.buttonNegative) {
+            // $FlowFixMe[incompatible-type]
             buttonNegative.onPress && buttonNegative.onPress();
           } else if (buttonKey === constants.buttonPositive) {
+            // $FlowFixMe[incompatible-type]
             buttonPositive.onPress && buttonPositive.onPress();
           }
         } else if (action === constants.dismissed) {

package/Libraries/Animated/AnimatedEvent.js

@@ -13,7 +13,7 @@
 import type {PlatformConfig} from './AnimatedPlatformConfig';
 
 import {findNodeHandle} from '../ReactNative/RendererProxy';
-import NativeAnimatedHelper from './NativeAnimatedHelper';
+import NativeAnimatedHelper from '../../src/private/animated/NativeAnimatedHelper';
 import AnimatedValue from './nodes/AnimatedValue';
 import AnimatedValueXY from './nodes/AnimatedValueXY';
 import invariant from 'invariant';

package/Libraries/Animated/AnimatedImplementation.js

@@ -39,7 +39,7 @@ import AnimatedValue from './nodes/AnimatedValue';
 import AnimatedValueXY from './nodes/AnimatedValueXY';
 
 export type CompositeAnimation = {
-  start: (callback?: ?EndCallback) => void,
+  start: (callback?: ?EndCallback, isLooping?: boolean) => void,
   stop: () => void,
   reset: () => void,
   _startNativeLoop: (iterations?: number) => void,
@@ -234,8 +234,8 @@ const timing = function (
 
   return (
     maybeVectorAnim(value, config, timing) || {
-      start: function (callback?: ?EndCallback): void {
-        start(value, config, callback);
+      start: function (callback?: ?EndCallback, isLooping?: boolean): void {
+        start(value, {...config, isLooping}, callback);
       },
 
       stop: function (): void {
@@ -305,7 +305,7 @@ const sequence = function (
 ): CompositeAnimation {
   let current = 0;
   return {
-    start: function (callback?: ?EndCallback) {
+    start: function (callback?: ?EndCallback, isLooping?: boolean) {
       const onComplete = function (result: EndResult) {
         if (!result.finished) {
           callback && callback(result);
@@ -321,13 +321,13 @@ const sequence = function (
           return;
         }
 
-        animations[current].start(onComplete);
+        animations[current].start(onComplete, isLooping);
       };
 
       if (animations.length === 0) {
         callback && callback({finished: true});
       } else {
-        animations[current].start(onComplete);
+        animations[current].start(onComplete, isLooping);
       }
     },
 
@@ -477,7 +477,7 @@ const loop = function (
         } else {
           iterationsSoFar++;
           resetBeforeIteration && animation.reset();
-          animation.start(restart);
+          animation.start(restart, iterations === -1);
         }
       };
       if (!animation || iterations === 0) {

package/Libraries/Animated/NativeAnimatedAllowlist.js

@@ -0,0 +1,111 @@
+/**
+ * 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 strict-local
+ * @format
+ */
+
+import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
+
+/**
+ * Styles allowed by the native animated implementation.
+ *
+ * In general native animated implementation should support any numeric or color property that
+ * doesn't need to be updated through the shadow view hierarchy (all non-layout properties).
+ */
+const SUPPORTED_COLOR_STYLES: {[string]: boolean} = {
+  backgroundColor: true,
+  borderBottomColor: true,
+  borderColor: true,
+  borderEndColor: true,
+  borderLeftColor: true,
+  borderRightColor: true,
+  borderStartColor: true,
+  borderTopColor: true,
+  color: true,
+  tintColor: true,
+};
+
+const SUPPORTED_STYLES: {[string]: boolean} = {
+  ...SUPPORTED_COLOR_STYLES,
+  borderBottomEndRadius: true,
+  borderBottomLeftRadius: true,
+  borderBottomRightRadius: true,
+  borderBottomStartRadius: true,
+  borderEndEndRadius: true,
+  borderEndStartRadius: true,
+  borderRadius: true,
+  borderTopEndRadius: true,
+  borderTopLeftRadius: true,
+  borderTopRightRadius: true,
+  borderTopStartRadius: true,
+  borderStartEndRadius: true,
+  borderStartStartRadius: true,
+  elevation: true,
+  opacity: true,
+  transform: true,
+  zIndex: true,
+  /* ios styles */
+  shadowOpacity: true,
+  shadowRadius: true,
+  /* legacy android transform properties */
+  scaleX: true,
+  scaleY: true,
+  translateX: true,
+  translateY: true,
+};
+
+const SUPPORTED_TRANSFORMS: {[string]: boolean} = {
+  translateX: true,
+  translateY: true,
+  scale: true,
+  scaleX: true,
+  scaleY: true,
+  rotate: true,
+  rotateX: true,
+  rotateY: true,
+  rotateZ: true,
+  perspective: true,
+  skewX: true,
+  skewY: true,
+  matrix: ReactNativeFeatureFlags.shouldUseAnimatedObjectForTransform(),
+};
+
+const SUPPORTED_INTERPOLATION_PARAMS: {[string]: boolean} = {
+  inputRange: true,
+  outputRange: true,
+  extrapolate: true,
+  extrapolateRight: true,
+  extrapolateLeft: true,
+};
+
+export function allowInterpolationParam(param: string): void {
+  SUPPORTED_INTERPOLATION_PARAMS[param] = true;
+}
+
+export function allowStyleProp(prop: string): void {
+  SUPPORTED_STYLES[prop] = true;
+}
+
+export function allowTransformProp(prop: string): void {
+  SUPPORTED_TRANSFORMS[prop] = true;
+}
+
+export function isSupportedColorStyleProp(prop: string): boolean {
+  return SUPPORTED_COLOR_STYLES[prop] === true;
+}
+
+export function isSupportedInterpolationParam(param: string): boolean {
+  return SUPPORTED_INTERPOLATION_PARAMS[param] === true;
+}
+
+export function isSupportedStyleProp(prop: string): boolean {
+  return SUPPORTED_STYLES[prop] === true;
+}
+
+export function isSupportedTransformProp(prop: string): boolean {
+  return SUPPORTED_TRANSFORMS[prop] === true;
+}

package/Libraries/Animated/animations/Animation.js

@@ -14,7 +14,8 @@ import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type AnimatedNode from '../nodes/AnimatedNode';
 import type AnimatedValue from '../nodes/AnimatedValue';
 
-import NativeAnimatedHelper from '../NativeAnimatedHelper';
+import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
+import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import AnimatedProps from '../nodes/AnimatedProps';
 
 export type EndResult = {finished: boolean, value?: number, ...};
@@ -26,6 +27,7 @@ export type AnimationConfig = {
   platformConfig?: PlatformConfig,
   onComplete?: ?EndCallback,
   iterations?: number,
+  isLooping?: boolean,
 };
 
 let startNativeAnimationNextId = 1;
@@ -38,6 +40,7 @@ export default class Animation {
   __isInteraction: boolean;
   __onEnd: ?EndCallback;
   __iterations: number;
+  __isLooping: ?boolean;
 
   _nativeId: number;
 
@@ -107,6 +110,13 @@ export default class Animation {
           if (value != null) {
             animatedValue.__onAnimatedValueUpdateReceived(value);
 
+            if (
+              ReactNativeFeatureFlags.shouldSkipStateUpdatesForLoopingAnimations() &&
+              this.__isLooping
+            ) {
+              return;
+            }
+
             // Once the JS side node is synced with the updated values, trigger an
             // update on the AnimatedProps nodes to call any registered callbacks.
             this.__findAnimatedPropsNodes(animatedValue).forEach(node =>

package/Libraries/Animated/animations/DecayAnimation.js

@@ -14,7 +14,7 @@ import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type AnimatedValue from '../nodes/AnimatedValue';
 import type {AnimationConfig, EndCallback} from './Animation';
 
-import NativeAnimatedHelper from '../NativeAnimatedHelper';
+import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import Animation from './Animation';
 
 export type DecayAnimationConfig = {

package/Libraries/Animated/animations/SpringAnimation.js

@@ -16,7 +16,7 @@ import type AnimatedValue from '../nodes/AnimatedValue';
 import type AnimatedValueXY from '../nodes/AnimatedValueXY';
 import type {AnimationConfig, EndCallback} from './Animation';
 
-import NativeAnimatedHelper from '../NativeAnimatedHelper';
+import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import AnimatedColor from '../nodes/AnimatedColor';
 import * as SpringConfig from '../SpringConfig';
 import Animation from './Animation';

package/Libraries/Animated/animations/TimingAnimation.js

@@ -17,7 +17,7 @@ import type AnimatedValue from '../nodes/AnimatedValue';
 import type AnimatedValueXY from '../nodes/AnimatedValueXY';
 import type {AnimationConfig, EndCallback} from './Animation';
 
-import NativeAnimatedHelper from '../NativeAnimatedHelper';
+import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import AnimatedColor from '../nodes/AnimatedColor';
 import Animation from './Animation';
 
@@ -80,6 +80,7 @@ export default class TimingAnimation extends Animation {
     this._useNativeDriver = NativeAnimatedHelper.shouldUseNativeDriver(config);
     this._platformConfig = config.platformConfig;
     this.__isInteraction = config.isInteraction ?? !this._useNativeDriver;
+    this.__isLooping = config.isLooping;
   }
 
   __getNativeAnimationConfig(): any {

package/Libraries/Animated/components/AnimatedScrollView.js

@@ -46,6 +46,7 @@ const AnimatedScrollView: AnimatedComponentType<Props, Instance> =
         props.style != null
       ) {
         return (
+          // $FlowFixMe[prop-missing]
           <AnimatedScrollViewWithInvertedRefreshControl
             scrollEventThrottle={0.0001}
             {...props}
@@ -71,7 +72,7 @@ const AnimatedScrollViewWithInvertedRefreshControl = React.forwardRef(
     props: {
       ...React.ElementConfig<typeof ScrollView>,
       // $FlowFixMe[unclear-type] Same Flow type as `refreshControl` in ScrollView
-      refreshControl: React.Element<any>,
+      refreshControl: ExactReactElement_DEPRECATED<any>,
     },
     forwardedRef:
       | {current: Instance | null, ...}
@@ -97,7 +98,7 @@ const AnimatedScrollViewWithInvertedRefreshControl = React.forwardRef(
     >(intermediatePropsForRefreshControl);
     // NOTE: Assumes that refreshControl.ref` and `refreshControl.style` can be
     // safely clobbered.
-    const refreshControl: React.Element<typeof RefreshControl> =
+    const refreshControl: ExactReactElement_DEPRECATED<typeof RefreshControl> =
       React.cloneElement(props.refreshControl, {
         ...refreshControlAnimatedProps,
         ref: refreshControlRef,

package/Libraries/Animated/createAnimatedComponent.js

@@ -8,21 +8,22 @@
  * @format
  */
 
-import composeStyles from '../../src/private/core/composeStyles';
+import composeStyles from '../../src/private/styles/composeStyles';
 import View from '../Components/View/View';
 import useMergeRefs from '../Utilities/useMergeRefs';
 import useAnimatedProps from './useAnimatedProps';
 import * as React from 'react';
 import {useMemo} from 'react';
 
-// $FlowFixMe[deprecated-type]
-export type AnimatedProps<Props: {...}> = $ObjMap<
-  Props &
-    $ReadOnly<{
-      passthroughAnimatedPropExplicitValues?: React.ElementConfig<typeof View>,
-    }>,
-  () => any,
->;
+export type AnimatedProps<Props: {...}> = {
+  // eslint-disable-next-line no-unused-vars
+  +[_K in keyof (Props &
+      $ReadOnly<{
+        passthroughAnimatedPropExplicitValues?: React.ElementConfig<
+          typeof View,
+        >,
+      }>)]: any,
+};
 
 export type AnimatedComponentType<
   Props: {...},

package/Libraries/Animated/nodes/AnimatedColor.js

@@ -17,7 +17,7 @@ import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
 import normalizeColor from '../../StyleSheet/normalizeColor';
 import {processColorObject} from '../../StyleSheet/PlatformColorValueTypes';
-import NativeAnimatedHelper from '../NativeAnimatedHelper';
+import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import AnimatedValue, {flushValue} from './AnimatedValue';
 import AnimatedWithChildren from './AnimatedWithChildren';
 

package/Libraries/Animated/nodes/AnimatedInterpolation.js

@@ -15,10 +15,11 @@
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 import type AnimatedNode from './AnimatedNode';
 
+import {validateInterpolation} from '../../../src/private/animated/NativeAnimatedValidation';
 import normalizeColor from '../../StyleSheet/normalizeColor';
 import processColor from '../../StyleSheet/processColor';
 import Easing from '../Easing';
-import NativeAnimatedHelper from '../NativeAnimatedHelper';
+import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import AnimatedWithChildren from './AnimatedWithChildren';
 import invariant from 'invariant';
 
@@ -382,7 +383,7 @@ export default class AnimatedInterpolation<
 
   __getNativeConfig(): any {
     if (__DEV__) {
-      NativeAnimatedHelper.validateInterpolation(this._config);
+      validateInterpolation(this._config);
     }
 
     // Only the `outputRange` can contain strings so we don't need to transform `inputRange` here

package/Libraries/Animated/nodes/AnimatedNode.js

@@ -10,23 +10,31 @@
 
 'use strict';
 
+import type {EventSubscription} from '../../vendor/emitter/EventEmitter';
 import type {PlatformConfig} from '../AnimatedPlatformConfig';
 
-import NativeAnimatedHelper from '../NativeAnimatedHelper';
+import NativeAnimatedHelper from '../../../src/private/animated/NativeAnimatedHelper';
 import invariant from 'invariant';
 
-const NativeAnimatedAPI = NativeAnimatedHelper.API;
+const {startListeningToAnimatedNodeValue, stopListeningToAnimatedNodeValue} =
+  NativeAnimatedHelper.API;
 
 type ValueListenerCallback = (state: {value: number, ...}) => mixed;
 
 let _uniqueId = 1;
+let _assertNativeAnimatedModule: ?() => void = () => {
+  NativeAnimatedHelper.assertNativeAnimatedModule();
+  // We only have to assert that the module exists once. After we've asserted
+  // this, clear out the function so we know to skip it in the future.
+  _assertNativeAnimatedModule = null;
+};
 
 // Note(vjeux): this would be better as an interface but flow doesn't
 // support them yet
 export default class AnimatedNode {
-  _listeners: {[key: string]: ValueListenerCallback, ...};
-  _platformConfig: ?PlatformConfig;
-  __nativeAnimatedValueListener: ?any;
+  #listeners: Map<string, ValueListenerCallback> = new Map();
+  _platformConfig: ?PlatformConfig = undefined;
+  __nativeAnimatedValueListener: ?EventSubscription = null;
   __attach(): void {}
   __detach(): void {
     this.removeAllListeners();
@@ -46,13 +54,9 @@ export default class AnimatedNode {
   }
 
   /* Methods and props used by native Animated impl */
-  __isNative: boolean;
-  __nativeTag: ?number;
-  __shouldUpdateListenersForNewNativeTag: boolean;
-
-  constructor() {
-    this._listeners = {};
-  }
+  __isNative: boolean = false;
+  __nativeTag: ?number = undefined;
+  __shouldUpdateListenersForNewNativeTag: boolean = false;
 
   __makeNative(platformConfig: ?PlatformConfig): void {
     if (!this.__isNative) {
@@ -60,7 +64,7 @@ export default class AnimatedNode {
     }
 
     this._platformConfig = platformConfig;
-    if (this.hasListeners()) {
+    if (this.#listeners.size > 0) {
       this._startListeningToNativeValueUpdates();
     }
   }
@@ -74,7 +78,7 @@ export default class AnimatedNode {
    */
   addListener(callback: (value: any) => mixed): string {
     const id = String(_uniqueId++);
-    this._listeners[id] = callback;
+    this.#listeners.set(id, callback);
     if (this.__isNative) {
       this._startListeningToNativeValueUpdates();
     }
@@ -88,8 +92,8 @@ export default class AnimatedNode {
    * See https://reactnative.dev/docs/animatedvalue#removelistener
    */
   removeListener(id: string): void {
-    delete this._listeners[id];
-    if (this.__isNative && !this.hasListeners()) {
+    this.#listeners.delete(id);
+    if (this.__isNative && this.#listeners.size === 0) {
       this._stopListeningForNativeValueUpdates();
     }
   }
@@ -100,14 +104,14 @@ export default class AnimatedNode {
    * See https://reactnative.dev/docs/animatedvalue#removealllisteners
    */
   removeAllListeners(): void {
-    this._listeners = {};
+    this.#listeners.clear();
     if (this.__isNative) {
       this._stopListeningForNativeValueUpdates();
     }
   }
 
   hasListeners(): boolean {
-    return !!Object.keys(this._listeners).length;
+    return this.#listeners.size > 0;
   }
 
   _startListeningToNativeValueUpdates() {
@@ -123,7 +127,7 @@ export default class AnimatedNode {
       this._stopListeningForNativeValueUpdates();
     }
 
-    NativeAnimatedAPI.startListeningToAnimatedNodeValue(this.__getNativeTag());
+    startListeningToAnimatedNodeValue(this.__getNativeTag());
     this.__nativeAnimatedValueListener =
       NativeAnimatedHelper.nativeEventEmitter.addListener(
         'onAnimatedValueUpdate',
@@ -141,9 +145,10 @@ export default class AnimatedNode {
   }
 
   __callListeners(value: number): void {
-    for (const key in this._listeners) {
-      this._listeners[key]({value});
-    }
+    const event = {value};
+    this.#listeners.forEach(listener => {
+      listener(event);
+    });
   }
 
   _stopListeningForNativeValueUpdates() {
@@ -153,21 +158,24 @@ export default class AnimatedNode {
 
     this.__nativeAnimatedValueListener.remove();
     this.__nativeAnimatedValueListener = null;
-    NativeAnimatedAPI.stopListeningToAnimatedNodeValue(this.__getNativeTag());
+    stopListeningToAnimatedNodeValue(this.__getNativeTag());
   }
 
   __getNativeTag(): number {
-    NativeAnimatedHelper.assertNativeAnimatedModule();
-    invariant(
-      this.__isNative,
-      'Attempt to get native tag from node not marked as "native"',
-    );
-
-    const nativeTag =
-      this.__nativeTag ?? NativeAnimatedHelper.generateNewNodeTag();
+    let nativeTag = this.__nativeTag;
+    if (nativeTag == null) {
+      _assertNativeAnimatedModule?.();
+
+      // `__isNative` is initialized as false and only ever set to true. So we
+      // only need to check it once here when initializing `__nativeTag`.
+      invariant(
+        this.__isNative,
+        'Attempt to get native tag from node not marked as "native"',
+      );
 
-    if (this.__nativeTag == null) {
+      nativeTag = NativeAnimatedHelper.generateNewNodeTag();
       this.__nativeTag = nativeTag;
+
       const config = this.__getNativeConfig();
       if (this._platformConfig) {
         config.platformConfig = this._platformConfig;
@@ -175,9 +183,9 @@ export default class AnimatedNode {
       NativeAnimatedHelper.API.createAnimatedNode(nativeTag, config);
       this.__shouldUpdateListenersForNewNativeTag = true;
     }
-
     return nativeTag;
   }
+
   __getNativeConfig(): Object {
     throw new Error(
       'This JS animated node type cannot be used as native animated node',
@@ -191,6 +199,7 @@ export default class AnimatedNode {
   __getPlatformConfig(): ?PlatformConfig {
     return this._platformConfig;
   }
+
   __setPlatformConfig(platformConfig: ?PlatformConfig) {
     this._platformConfig = platformConfig;
   }