react-native-tvos 0.87.1-0 → 0.88.0-0rc2

package/settings.gradle.kts

@@ -34,7 +34,10 @@ project(":packages:react-native:ReactAndroid:hermes-engine").projectDir =
 // As we build :packages:react-native:ReactAndroid, we need to declare the folders
 // for :packages and :packages:react-native as well as otherwise the build from
 // source will fail with a missing folder exception.
+// We point them at the JVM temp dir rather than a hardcoded "/tmp": the latter is
+// not an absolute path on Windows, where Gradle would resolve it to a
+// non-existing <rootDir>\tmp and fail at configuration time.
 
-project(":packages").projectDir = file("/tmp")
+project(":packages").projectDir = file(System.getProperty("java.io.tmpdir", "/tmp"))
 
-project(":packages:react-native").projectDir = file("/tmp")
+project(":packages:react-native").projectDir = file(System.getProperty("java.io.tmpdir", "/tmp"))

package/src/private/animated/createAnimatedPropsHook.js

@@ -17,6 +17,7 @@ import AnimatedValue from '../../../Libraries/Animated/nodes/AnimatedValue';
 import {isPublicInstance as isFabricPublicInstance} from '../../../Libraries/ReactNative/ReactFabricPublicInstance/ReactFabricPublicInstanceUtils';
 import {RootTagContext} from '../../../Libraries/ReactNative/RootTag';
 import useRefEffect from '../../../Libraries/Utilities/useRefEffect';
+import warnOnce from '../../../Libraries/Utilities/warnOnce';
 import * as ReactNativeFeatureFlags from '../featureflags/ReactNativeFeatureFlags';
 import {createAnimatedPropsMemoHook} from './createAnimatedPropsMemoHook';
 import NativeAnimatedHelper from './NativeAnimatedHelper';
@@ -34,11 +35,10 @@ type ReducedProps<TProps> = {
   collapsable: boolean,
   ...
 };
-type CallbackRef<T> = T => unknown;
 
 export type AnimatedPropsHook = <TProps extends {...}, TInstance>(
   props: TProps,
-) => [ReducedProps<TProps>, CallbackRef<TInstance | null>];
+) => [ReducedProps<TProps>, React.RefCallback<TInstance>];
 
 type UpdateCallback = () => void;
 
@@ -52,12 +52,9 @@ export default function createAnimatedPropsHook(
 ): AnimatedPropsHook {
   const useAnimatedPropsMemo = createAnimatedPropsMemoHook(allowlist);
 
-  const useNativePropsInFabric =
-    ReactNativeFeatureFlags.shouldUseSetNativePropsInFabric();
-
   return function useAnimatedProps<TProps extends {...}, TInstance>(
     props: TProps,
-  ): [ReducedProps<TProps>, CallbackRef<TInstance | null>] {
+  ): [ReducedProps<TProps>, React.RefCallback<TInstance>] {
     const [, scheduleUpdate] = useReducer<number, void>(count => count + 1, 0);
     const onUpdateRef = useRef<UpdateCallback | null>(null);
     const timerRef = useRef<TimeoutID | null>(null);
@@ -145,6 +142,17 @@ export default function createAnimatedPropsHook(
             return;
           }
 
+          // TODO: T274006331 - Remove js-only animation once shared backend is fully rolled out
+          const isNativeDriverForced =
+            NativeAnimatedHelper.isNativeDriverForced();
+          if (isNativeDriverForced) {
+            warnOnce(
+              'animated-force-native-driver-js-update',
+              'Animated: Expected the animation node to use the native driver when the native driver is forced.',
+            );
+            return;
+          }
+
           if (
             typeof instance !== 'object' ||
             typeof instance?.setNativeProps !== 'function'
@@ -160,6 +168,8 @@ export default function createAnimatedPropsHook(
             return instance.setNativeProps(node.__getAnimatedValue());
           }
 
+          const useNativePropsInFabric =
+            ReactNativeFeatureFlags.shouldUseSetNativePropsInFabric();
           if (!useNativePropsInFabric) {
             // Check 5: setNativeProps are disabled.
             return scheduleUpdate();

package/src/private/animated/createAnimatedPropsMemoHook.js

@@ -357,4 +357,6 @@ function areCompositeKeyComponentsEqual(
 const _hasOwnProp = Object.prototype.hasOwnProperty;
 const hasOwn: (obj: Readonly<{...}>, prop: string) => boolean =
   // $FlowFixMe[method-unbinding]
+  /* $FlowFixMe[invalid-this-arg] Error exposed after fixing this typing
+   * unsoundness in flow */
   Object.hasOwn ?? ((obj, prop) => _hasOwnProp.call(obj, prop));

package/src/private/components/activityindicator/specs/ActivityIndicatorViewNativeComponent.js

@@ -50,7 +50,4 @@ type RCTActivityIndicatorViewNativeProps = Readonly<{
 
 export default codegenNativeComponent<RCTActivityIndicatorViewNativeProps>(
   'ActivityIndicatorView',
-  {
-    paperComponentName: 'RCTActivityIndicatorView',
-  },
 ) as HostComponent<RCTActivityIndicatorViewNativeProps>;

package/src/private/components/modal/specs/RCTModalHostViewNativeComponent.js

@@ -146,6 +146,5 @@ export default codegenNativeComponent<RCTModalHostViewNativeProps>(
   'ModalHostView',
   {
     interfaceOnly: true,
-    paperComponentName: 'RCTModalHostView',
   },
 ) as HostComponent<RCTModalHostViewNativeProps>;

package/src/private/components/refreshcontrol/specs/PullToRefreshViewNativeComponent.js

@@ -68,7 +68,6 @@ export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
 export default codegenNativeComponent<PullToRefreshNativeProps>(
   'PullToRefreshView',
   {
-    paperComponentName: 'RCTRefreshControl',
     excludedPlatforms: ['android'],
   },
 ) as HostComponent<PullToRefreshNativeProps>;

package/src/private/components/safeareaview/specs/RCTSafeAreaViewNativeComponent.js

@@ -22,7 +22,6 @@ type RCTSafeAreaViewNativeProps = Readonly<{
 export default codegenNativeComponent<RCTSafeAreaViewNativeProps>(
   'SafeAreaView',
   {
-    paperComponentName: 'RCTSafeAreaView',
     interfaceOnly: true,
   },
 ) as HostComponent<RCTSafeAreaViewNativeProps>;

package/src/private/components/switch/specs/SwitchNativeComponent.js

@@ -59,6 +59,9 @@ export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
 });
 
 export default codegenNativeComponent<SwitchNativeProps>('Switch', {
+  // @testing-library/react-native (as of 13.3.3) only recognizes a host
+  // component named `RCTSwitch` as a switch, so renaming this breaks every
+  // `*ByRole('switch')` query and `toBeChecked()` assertion in Jest.
   paperComponentName: 'RCTSwitch',
   excludedPlatforms: ['android'],
   interfaceOnly: true,

package/src/private/components/virtualcollection/column/VirtualColumn.js

@@ -26,18 +26,15 @@ component VirtualColumnLayout(
   );
 }
 
-const VirtualColumn = createVirtualCollectionView(
-  VirtualColumnLayout,
-  VirtualColumnGenerator,
-);
-
 // TODO: Figure out component generic resolution.
 // @see https://fb.workplace.com/groups/flow/posts/29355518614070041
-// export default VirtualColumn as VirtualCollectionViewComponent<VirtualColumnLayoutProps>;
-export default VirtualColumn as component<out TItem extends Item>(
+// const VirtualColumn: VirtualCollectionViewComponent<VirtualColumnLayoutProps> = ...
+const VirtualColumn: component<out TItem extends Item>(
   children: (item: TItem, key: string) => React.Node,
   items: VirtualCollection<TItem>,
   itemToKey?: (TItem) => string,
   removeClippedSubviews?: boolean,
   testID?: ?string,
-);
+) = createVirtualCollectionView(VirtualColumnLayout, VirtualColumnGenerator);
+
+export default VirtualColumn;

package/src/private/components/virtualcollection/row/VirtualRow.js

@@ -26,18 +26,15 @@ component VirtualRowLayout(
   );
 }
 
-const VirtualRow = createVirtualCollectionView(
-  VirtualRowLayout,
-  VirtualRowGenerator,
-);
-
 // TODO: Figure out component generic resolution.
 // @see https://fb.workplace.com/groups/flow/posts/29355518614070041
-// export default VirtualRow as VirtualCollectionViewComponent<VirtualRowLayoutProps>;
-export default VirtualRow as component<out TItem extends Item>(
+// const VirtualRow: VirtualCollectionViewComponent<VirtualRowLayoutProps> = ...
+const VirtualRow: component<out TItem extends Item>(
   children: (item: TItem, key: string) => React.Node,
   items: VirtualCollection<TItem>,
   itemToKey?: (TItem) => string,
   removeClippedSubviews?: boolean,
   testID?: ?string,
-);
+) = createVirtualCollectionView(VirtualRowLayout, VirtualRowGenerator);
+
+export default VirtualRow;

package/src/private/devsupport/devmenu/elementinspector/BoxInspector.js

@@ -61,10 +61,10 @@ type BoxContainerProps = Readonly<{
   title: string,
   titleStyle?: TextStyleProp,
   box: Readonly<{
-    top: number,
-    left: number,
-    right: number,
-    bottom: number,
+    top: number | string,
+    left: number | string,
+    right: number | string,
+    bottom: number | string,
   }>,
   children: React.Node,
 }>;

package/src/private/devsupport/devmenu/elementinspector/ElementBox.js

@@ -16,8 +16,6 @@ import type {InspectedElementFrame} from './Inspector';
 import * as React from 'react';
 
 const View = require('../../../../../Libraries/Components/View/View').default;
-const flattenStyle =
-  require('../../../../../Libraries/StyleSheet/flattenStyle').default;
 const StyleSheet =
   require('../../../../../Libraries/StyleSheet/StyleSheet').default;
 const Dimensions =
@@ -31,9 +29,10 @@ type Props = Readonly<{
 }>;
 
 function ElementBox({frame, style}: Props): React.Node {
-  const flattenedStyle = flattenStyle(style) || {};
-  let margin: ?Readonly<Style> = resolveBoxStyle('margin', flattenedStyle);
-  let padding: ?Readonly<Style> = resolveBoxStyle('padding', flattenedStyle);
+  const marginBox = resolveBoxStyle('margin', style);
+  const paddingBox = resolveBoxStyle('padding', style);
+  let margin: ?ResolvedStyle = null;
+  let padding: ?ResolvedStyle = null;
 
   const frameStyle = {...frame};
   const contentStyle: {width: number, height: number} = {
@@ -41,8 +40,8 @@ function ElementBox({frame, style}: Props): React.Node {
     height: frame.height,
   };
 
-  if (margin != null) {
-    margin = resolveRelativeSizes(margin);
+  if (marginBox != null) {
+    margin = resolveRelativeSizes(marginBox);
 
     frameStyle.top -= margin.top;
     frameStyle.left -= margin.left;
@@ -63,8 +62,8 @@ function ElementBox({frame, style}: Props): React.Node {
     }
   }
 
-  if (padding != null) {
-    padding = resolveRelativeSizes(padding);
+  if (paddingBox != null) {
+    padding = resolveRelativeSizes(paddingBox);
 
     contentStyle.width -= padding.left + padding.right;
     contentStyle.height -= padding.top + padding.bottom;
@@ -97,6 +96,14 @@ const styles = StyleSheet.create({
 });
 
 type Style = {
+  top: number | string,
+  right: number | string,
+  bottom: number | string,
+  left: number | string,
+  ...
+};
+
+type ResolvedStyle = {
   top: number,
   right: number,
   bottom: number,
@@ -110,12 +117,13 @@ type Style = {
  * @param style the style to resolve
  * @return a modified copy
  */
-function resolveRelativeSizes(style: Readonly<Style>): Style {
-  let resolvedStyle = {...style};
+function resolveRelativeSizes(style: Readonly<Style>): ResolvedStyle {
+  const resolvedStyle = {...style};
   resolveSizeInPlace(resolvedStyle, 'top', 'height');
   resolveSizeInPlace(resolvedStyle, 'right', 'width');
   resolveSizeInPlace(resolvedStyle, 'bottom', 'height');
   resolveSizeInPlace(resolvedStyle, 'left', 'width');
+  // $FlowFixMe[incompatible-type] resolveSizeInPlace has converted every percentage/`auto` value to a number
   return resolvedStyle;
 }
 

package/src/private/devsupport/devmenu/elementinspector/ElementProperties.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict-local
  * @format
  */
 
@@ -12,6 +12,7 @@
 
 import type {InspectorData} from '../../../../../Libraries/Renderer/shims/ReactNativeTypes';
 import type {ViewStyleProp} from '../../../../../Libraries/StyleSheet/StyleSheet';
+import type {InspectedElementFrame} from './Inspector';
 
 import * as React from 'react';
 
@@ -33,7 +34,7 @@ const StyleInspector = require('./StyleInspector').default;
 type Props = Readonly<{
   hierarchy: ?InspectorData['hierarchy'],
   style?: ?ViewStyleProp,
-  frame?: ?Object,
+  frame?: ?InspectedElementFrame,
   selection?: ?number,
   setSelection?: number => unknown,
 }>;

package/src/private/devsupport/devmenu/elementinspector/Inspector.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict-local
  * @format
  */
 

package/src/private/devsupport/devmenu/elementinspector/InspectorOverlay.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict-local
  * @format
  */
 

package/src/private/devsupport/devmenu/elementinspector/ReactDevToolsOverlay.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict-local
  * @format
  */
 

package/src/private/devsupport/devmenu/elementinspector/XHRInterceptor.js

@@ -122,6 +122,8 @@ const XHRInterceptor = {
       if (openCallback) {
         openCallback(method, url, this);
       }
+      /* $FlowFixMe[invalid-this-arg] Error exposed after fixing this typing
+       * unsoundness in flow */
       originalXHROpen.apply(this, arguments);
     };
 
@@ -136,6 +138,8 @@ const XHRInterceptor = {
       if (requestHeaderCallback) {
         requestHeaderCallback(header, value, this);
       }
+      /* $FlowFixMe[invalid-this-arg] Error exposed after fixing this typing
+       * unsoundness in flow */
       originalXHRSetRequestHeader.apply(this, arguments);
     };
 
@@ -190,6 +194,8 @@ const XHRInterceptor = {
           false,
         );
       }
+      /* $FlowFixMe[invalid-this-arg] Error exposed after fixing this typing
+       * unsoundness in flow */
       originalXHRSend.apply(this, arguments);
     };
     isInterceptorEnabled = true;

package/src/private/devsupport/devmenu/elementinspector/getInspectorDataForViewAtPoint.js

@@ -4,7 +4,7 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict-local
  * @format
  */
 
@@ -19,25 +19,37 @@ export type ReactRenderer = {
       inspectedView: ?HostInstance,
       locationX: number,
       locationY: number,
-      callback: Function,
+      callback: (viewData: TouchedViewDataAtPoint) => void,
     ) => void,
     ...
   },
 };
 type AttachedRendererEventPayload = {id: number, renderer: ReactRenderer};
 
-const reactDevToolsHook = (window as any).__REACT_DEVTOOLS_GLOBAL_HOOK__;
+type ReactDevToolsHook = {
+  readonly on: (
+    eventName: string,
+    handler: (payload: AttachedRendererEventPayload) => void,
+  ) => void,
+  readonly renderers: ReadonlyMap<unknown, ReactRenderer>,
+  ...
+};
+
+const reactDevToolsHook: ?ReactDevToolsHook = (
+  window as {readonly __REACT_DEVTOOLS_GLOBAL_HOOK__?: ReactDevToolsHook, ...}
+).__REACT_DEVTOOLS_GLOBAL_HOOK__;
 invariant(
-  Boolean(reactDevToolsHook),
+  reactDevToolsHook != null,
   'getInspectorDataForViewAtPoint should not be used if React DevTools hook is not injected',
 );
 
 const renderers: Array<ReactRenderer> = Array.from(
-  (window as any).__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.values(),
+  reactDevToolsHook.renderers.values(),
 );
 
-const appendRenderer = ({renderer}: AttachedRendererEventPayload) =>
+const appendRenderer = ({renderer}: AttachedRendererEventPayload) => {
   renderers.push(renderer);
+};
 reactDevToolsHook.on('renderer', appendRenderer);
 
 function validateRenderers(): void {

package/src/private/devsupport/devmenu/elementinspector/resolveBoxStyle.js

@@ -4,14 +4,18 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @flow
+ * @flow strict-local
  * @format
  */
 
 'use strict';
 
+import type {ViewStyleProp} from '../../../../../Libraries/StyleSheet/StyleSheet';
+
 const I18nManager =
   require('../../../../../Libraries/ReactNative/I18nManager').default;
+const flattenStyle =
+  require('../../../../../Libraries/StyleSheet/flattenStyle').default;
 
 /**
  * Resolve a style property into its component parts.
@@ -25,15 +29,32 @@ const I18nManager =
  */
 function resolveBoxStyle(
   prefix: string,
-  style: Object,
+  style: ?ViewStyleProp,
 ): ?Readonly<{
-  bottom: number,
-  left: number,
-  right: number,
-  top: number,
+  bottom: number | string,
+  left: number | string,
+  right: number | string,
+  top: number | string,
 }> {
+  const flatStyle: ?Readonly<{[string]: unknown}> = flattenStyle(style);
+  if (flatStyle == null) {
+    return null;
+  }
+
+  const getStyleValue = (key: string): number | string | null => {
+    const value = flatStyle[key];
+    return typeof value === 'number' || typeof value === 'string'
+      ? value
+      : null;
+  };
+
   let hasParts = false;
-  const result = {
+  const result: {
+    bottom: number | string,
+    left: number | string,
+    right: number | string,
+    top: number | string,
+  } = {
     bottom: 0,
     left: 0,
     right: 0,
@@ -42,33 +63,34 @@ function resolveBoxStyle(
 
   // TODO: Fix issues with multiple properties affecting the same side.
 
-  const styleForAll = style[prefix];
+  const styleForAll = getStyleValue(prefix);
   if (styleForAll != null) {
-    for (const key of Object.keys(result)) {
-      result[key] = styleForAll;
-    }
+    result.bottom = styleForAll;
+    result.left = styleForAll;
+    result.right = styleForAll;
+    result.top = styleForAll;
     hasParts = true;
   }
 
-  const styleForHorizontal = style[prefix + 'Horizontal'];
+  const styleForHorizontal = getStyleValue(prefix + 'Horizontal');
   if (styleForHorizontal != null) {
     result.left = styleForHorizontal;
     result.right = styleForHorizontal;
     hasParts = true;
   } else {
-    const styleForLeft = style[prefix + 'Left'];
+    const styleForLeft = getStyleValue(prefix + 'Left');
     if (styleForLeft != null) {
       result.left = styleForLeft;
       hasParts = true;
     }
 
-    const styleForRight = style[prefix + 'Right'];
+    const styleForRight = getStyleValue(prefix + 'Right');
     if (styleForRight != null) {
       result.right = styleForRight;
       hasParts = true;
     }
 
-    const styleForEnd = style[prefix + 'End'];
+    const styleForEnd = getStyleValue(prefix + 'End');
     if (styleForEnd != null) {
       const constants = I18nManager.getConstants();
       if (constants.isRTL && constants.doLeftAndRightSwapInRTL) {
@@ -78,7 +100,7 @@ function resolveBoxStyle(
       }
       hasParts = true;
     }
-    const styleForStart = style[prefix + 'Start'];
+    const styleForStart = getStyleValue(prefix + 'Start');
     if (styleForStart != null) {
       const constants = I18nManager.getConstants();
       if (constants.isRTL && constants.doLeftAndRightSwapInRTL) {
@@ -90,19 +112,19 @@ function resolveBoxStyle(
     }
   }
 
-  const styleForVertical = style[prefix + 'Vertical'];
+  const styleForVertical = getStyleValue(prefix + 'Vertical');
   if (styleForVertical != null) {
     result.bottom = styleForVertical;
     result.top = styleForVertical;
     hasParts = true;
   } else {
-    const styleForBottom = style[prefix + 'Bottom'];
+    const styleForBottom = getStyleValue(prefix + 'Bottom');
     if (styleForBottom != null) {
       result.bottom = styleForBottom;
       hasParts = true;
     }
 
-    const styleForTop = style[prefix + 'Top'];
+    const styleForTop = getStyleValue(prefix + 'Top');
     if (styleForTop != null) {
       result.top = styleForTop;
       hasParts = true;