react-native-tvos 0.80.1-0 → 0.81.0-0

package/Libraries/Components/Touchable/TouchableOpacity.d.ts

@@ -16,6 +16,7 @@ export interface TVProps {
    * *(Apple TV only)* TV preferred focus (see documentation for the View component).
    *
    * @platform ios
+   * @deprecated Use `focusable` instead
    */
   hasTVPreferredFocus?: boolean | undefined;
 

package/Libraries/Components/Touchable/TouchableOpacity.js

@@ -23,11 +23,12 @@ import Platform from '../../Utilities/Platform';
 import tagForComponentOrHandle from '../TV/tagForComponentOrHandle';
 import * as React from 'react';
 
-export type TVProps = $ReadOnly<{
+export type TouchableOpacityTVProps = $ReadOnly<{
   /**
    * *(Apple TV only)* TV preferred focus (see documentation for the View component).
    *
    * @platform ios
+   * @deprecated Use `focusable` instead
    */
   hasTVPreferredFocus?: ?boolean,
   isTVSelectable?: ?boolean,
@@ -82,7 +83,7 @@ type TouchableOpacityBaseProps = $ReadOnly<{
 
 export type TouchableOpacityProps = $ReadOnly<{
   ...TouchableWithoutFeedbackProps,
-  ...TVProps,
+  ...TouchableOpacityTVProps,
   ...TouchableOpacityBaseProps,
 }>;
 
@@ -390,9 +391,13 @@ class TouchableOpacity extends React.Component<
 const Touchable: component(
   ref?: React.RefSetter<React.ElementRef<typeof Animated.View>>,
   ...props: TouchableOpacityProps
-) = React.forwardRef((props, ref) => (
-  <TouchableOpacity {...props} hostRef={ref} />
-));
+) = ({
+  ref,
+  ...props
+}: {
+  ref?: React.RefSetter<React.ElementRef<typeof Animated.View>>,
+  ...TouchableOpacityProps,
+}) => <TouchableOpacity {...props} hostRef={ref} />;
 
 Touchable.displayName = 'TouchableOpacity';
 

package/Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -24,7 +24,7 @@ import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import usePressability from '../../Pressability/usePressability';
 import {type ViewStyleProp} from '../../StyleSheet/StyleSheet';
 import * as React from 'react';
-import {useMemo} from 'react';
+import {cloneElement, useMemo} from 'react';
 
 export type TouchableWithoutFeedbackPropsIOS = {
   tvParallaxProperties?: TVParallaxPropertiesType,
@@ -287,5 +287,5 @@ export default function TouchableWithoutFeedback(
   }
 
   // $FlowFixMe[incompatible-call]
-  return React.cloneElement(element, elementProps, ...children);
+  return cloneElement(element, elementProps, ...children);
 }

package/Libraries/Components/UnimplementedViews/UnimplementedNativeViewNativeComponent.js

@@ -4,10 +4,9 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 
 export * from '../../../src/private/specs_DEPRECATED/components/UnimplementedNativeViewNativeComponent';
-import UnimplementedNativeViewNativeComponent from '../../../src/private/specs_DEPRECATED/components/UnimplementedNativeViewNativeComponent';
-export default UnimplementedNativeViewNativeComponent;
+export {default} from '../../../src/private/specs_DEPRECATED/components/UnimplementedNativeViewNativeComponent';

package/Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -4,14 +4,13 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format strict-local
  * @flow strict-local
+ * @format strict-local
  */
 
 import type {AnyAttributeType} from '../../Renderer/shims/ReactNativeTypes';
 
 import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
-import NativeReactNativeFeatureFlags from '../../../src/private/featureflags/specs/NativeReactNativeFeatureFlags';
 import processAspectRatio from '../../StyleSheet/processAspectRatio';
 import processBackgroundImage from '../../StyleSheet/processBackgroundImage';
 import processBoxShadow from '../../StyleSheet/processBoxShadow';
@@ -123,13 +122,9 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   /**
    * Filter
    */
-  filter:
-    NativeReactNativeFeatureFlags != null &&
-    ReactNativeFeatureFlags.enableNativeCSSParsing()
-      ? true
-      : {
-          process: processFilter,
-        },
+  filter: ReactNativeFeatureFlags.enableNativeCSSParsing()
+    ? true
+    : {process: processFilter},
 
   /**
    * MixBlendMode
@@ -144,13 +139,9 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   /*
    * BoxShadow
    */
-  boxShadow:
-    NativeReactNativeFeatureFlags != null &&
-    ReactNativeFeatureFlags.enableNativeCSSParsing()
-      ? true
-      : {
-          process: processBoxShadow,
-        },
+  boxShadow: ReactNativeFeatureFlags.enableNativeCSSParsing()
+    ? true
+    : {process: processBoxShadow},
 
   /**
    * Linear Gradient

package/Libraries/Components/View/View.js

@@ -4,20 +4,19 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 
 import type {ViewProps} from './ViewPropTypes';
 
-import TextAncestor from '../../Text/TextAncestor';
+import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
+import TextAncestorContext from '../../Text/TextAncestorContext';
+import setAndForwardRef from '../../Utilities/setAndForwardRef';
 import ViewNativeComponent from './ViewNativeComponent';
-import * as React from 'react';
 import {Commands} from './ViewNativeComponent';
-
-import setAndForwardRef from '../../Utilities/setAndForwardRef';
-
-export type Props = ViewProps;
+import * as React from 'react';
+import {use} from 'react';
 
 /**
  * The most fundamental component for building a UI, View is a container that
@@ -26,12 +25,136 @@ export type Props = ViewProps;
  *
  * @see https://reactnative.dev/docs/view
  */
-const View: component(
+component View(
   ref?: React.RefSetter<React.ElementRef<typeof ViewNativeComponent>>,
   ...props: ViewProps
-) = React.forwardRef(
-  (
-    {
+) {
+  const hasTextAncestor = use(TextAncestorContext);
+
+  const viewRef = React.useRef<?React.ElementRef<typeof View>>(null);
+
+  const requestTVFocus = React.useCallback(() => {
+    if (viewRef.current) {
+      Commands.requestTVFocus(viewRef.current);
+    }
+  }, []);
+
+  const _setNativeRef = React.useMemo(() => {
+    return setAndForwardRef({
+      getForwardedRef: () => viewRef.current,
+      setLocalRef: _ref => {
+        viewRef.current = _ref;
+
+        // This is a hack. Ideally we would forwardRef to the underlying
+        // host component. However, since TVFocusGuide has its own methods that can be
+        // called as well, if we used the standard forwardRef then these
+        // methods wouldn't be accessible
+        //
+        // Here we mutate the ref, so that the user can use the standart native
+        // methods like `measureLayout()` etc. while also having access to
+        // imperative methods of this component like `requestTVFocus()`.
+        if (_ref) {
+          _ref.requestTVFocus = requestTVFocus;
+        }
+      },
+    })
+  }, [requestTVFocus]);
+
+  let actualView;
+  if (ReactNativeFeatureFlags.reduceDefaultPropsInView()) {
+    const {
+      accessibilityState,
+      accessibilityValue,
+      'aria-busy': ariaBusy,
+      'aria-checked': ariaChecked,
+      'aria-disabled': ariaDisabled,
+      'aria-expanded': ariaExpanded,
+      'aria-hidden': ariaHidden,
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledBy,
+      'aria-live': ariaLive,
+      'aria-selected': ariaSelected,
+      'aria-valuemax': ariaValueMax,
+      'aria-valuemin': ariaValueMin,
+      'aria-valuenow': ariaValueNow,
+      'aria-valuetext': ariaValueText,
+      id,
+      tabIndex,
+      ...otherProps
+    } = props;
+
+    // Since we destructured props, we can now treat it as mutable
+    const processedProps = otherProps as {...ViewProps};
+
+    const parsedAriaLabelledBy = ariaLabelledBy?.split(/\s*,\s*/g);
+    if (parsedAriaLabelledBy !== undefined) {
+      processedProps.accessibilityLabelledBy = parsedAriaLabelledBy;
+    }
+
+    if (ariaLabel !== undefined) {
+      processedProps.accessibilityLabel = ariaLabel;
+    }
+
+    if (ariaLive !== undefined) {
+      processedProps.accessibilityLiveRegion =
+        ariaLive === 'off' ? 'none' : ariaLive;
+    }
+
+    if (ariaHidden !== undefined) {
+      processedProps.accessibilityElementsHidden = ariaHidden;
+      if (ariaHidden === true) {
+        processedProps.importantForAccessibility = 'no-hide-descendants';
+      }
+    }
+
+    if (id !== undefined) {
+      processedProps.nativeID = id;
+    }
+
+    if (tabIndex !== undefined) {
+      processedProps.focusable = !tabIndex;
+    }
+
+    if (
+      accessibilityState != null ||
+      ariaBusy != null ||
+      ariaChecked != null ||
+      ariaDisabled != null ||
+      ariaExpanded != null ||
+      ariaSelected != null
+    ) {
+      processedProps.accessibilityState = {
+        busy: ariaBusy ?? accessibilityState?.busy,
+        checked: ariaChecked ?? accessibilityState?.checked,
+        disabled: ariaDisabled ?? accessibilityState?.disabled,
+        expanded: ariaExpanded ?? accessibilityState?.expanded,
+        selected: ariaSelected ?? accessibilityState?.selected,
+      };
+    }
+
+    if (
+      accessibilityValue != null ||
+      ariaValueMax != null ||
+      ariaValueMin != null ||
+      ariaValueNow != null ||
+      ariaValueText != null
+    ) {
+      processedProps.accessibilityValue = {
+        max: ariaValueMax ?? accessibilityValue?.max,
+        min: ariaValueMin ?? accessibilityValue?.min,
+        now: ariaValueNow ?? accessibilityValue?.now,
+        text: ariaValueText ?? accessibilityValue?.text,
+      };
+    }
+
+    actualView =
+      ref == null ? (
+        <ViewNativeComponent {...processedProps} />
+      ) : (
+        <ViewNativeComponent {...processedProps} ref={ref} />
+      );
+  } else {
+    const {
       accessibilityElementsHidden,
       accessibilityLabel,
       accessibilityLabelledBy,
@@ -57,10 +180,7 @@ const View: component(
       nativeID,
       tabIndex,
       ...otherProps
-    }: ViewProps,
-    forwardedRef,
-  ) => {
-    const hasTextAncestor = React.useContext(TextAncestor);
+    } = props;
     const _accessibilityLabelledBy =
       ariaLabelledBy?.split(/\s*,\s*/g) ?? accessibilityLabelledBy;
 
@@ -94,34 +214,7 @@ const View: component(
           }
         : undefined;
 
-    const viewRef = React.useRef<?React.ElementRef<typeof View>>(null);
-
-    const requestTVFocus = React.useCallback(() => {
-      if (viewRef.current) {
-        Commands.requestTVFocus(viewRef.current);
-      }
-    }, []);
-
-    const _setNativeRef = setAndForwardRef({
-      getForwardedRef: () => forwardedRef,
-      setLocalRef: ref => {
-        viewRef.current = ref;
-
-        // This is a hack. Ideally we would forwardRef to the underlying
-        // host component. However, since TVFocusGuide has its own methods that can be
-        // called as well, if we used the standard forwardRef then these
-        // methods wouldn't be accessible
-        //
-        // Here we mutate the ref, so that the user can use the standart native
-        // methods like `measureLayout()` etc. while also having access to
-        // imperative methods of this component like `requestTVFocus()`.
-        if (ref) {
-          ref.requestTVFocus = requestTVFocus;
-        }
-      },
-    });
-
-    const actualView = (
+    actualView = (
       <ViewNativeComponent
         {...otherProps}
         accessibilityLiveRegion={
@@ -142,18 +235,15 @@ const View: component(
         ref={_setNativeRef}
       />
     );
+  }
 
-    if (hasTextAncestor) {
-      return (
-        <TextAncestor.Provider value={false}>
-          {actualView}
-        </TextAncestor.Provider>
-      );
-    }
-
-    return actualView;
-  },
-);
+  if (hasTextAncestor) {
+    return (
+      <TextAncestorContext value={false}>{actualView}</TextAncestorContext>
+    );
+  }
+  return actualView;
+}
 
 View.displayName = 'View';
 

package/Libraries/Components/View/ViewAccessibility.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 
 'use strict';
@@ -374,13 +374,6 @@ export type AccessibilityProps = $ReadOnly<{
    */
   'aria-label'?: ?Stringish,
 
-  /**
-   * Defines the order in which descendant elements receive accessibility focus.
-   * The elements in the array represent nativeID values for the respective
-   * descendant elements.
-   */
-  experimental_accessibilityOrder?: ?Array<string>,
-
   /**
    * Indicates to accessibility services to treat UI component like a specific role.
    */

package/Libraries/Components/View/ViewPropTypes.d.ts

@@ -26,6 +26,9 @@ import {Touchable} from '../Touchable/Touchable';
 import {AccessibilityProps} from './ViewAccessibility';
 import type {BubblingEventHandler} from 'react-native/Libraries/Types/CodegenTypes';
 
+/**
+ * @deprecated These properties are not implemented natively.
+ */
 export interface TVViewPropsIOS {
   /**
    * *(Apple TV only)* When set to true, this view will be focusable
@@ -39,6 +42,7 @@ export interface TVViewPropsIOS {
    * *(Apple TV only)* May be set to true to force the Apple TV focus engine to move focus to this view.
    *
    * @platform ios
+   * @deprecated Use `focusable` instead
    */
   hasTVPreferredFocus?: boolean | undefined;
 

package/Libraries/Components/View/ViewPropTypes.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 
 'use strict';
@@ -487,6 +487,13 @@ type ViewBaseProps = $ReadOnly<{
    * See https://reactnative.dev/docs/view#removeclippedsubviews
    */
   removeClippedSubviews?: ?boolean,
+
+  /**
+   * Defines the order in which descendant elements receive accessibility focus.
+   * The elements in the array represent nativeID values for the respective
+   * descendant elements.
+   */
+  experimental_accessibilityOrder?: ?Array<string>,
 }>;
 
 export type ViewProps = $ReadOnly<{

package/Libraries/Core/Devtools/getDevServer.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict
+ * @format
  */
 
 import NativeSourceCode from '../../NativeModules/specs/NativeSourceCode';

package/Libraries/Core/Devtools/loadBundleFromServer.js

@@ -6,7 +6,6 @@
  *
  * @flow strict-local
  * @format
- * @oncall react_native
  */
 
 import Networking from '../../Network/RCTNetworking';
@@ -20,6 +19,34 @@ let pendingRequests = 0;
 
 const cachedPromisesByUrl = new Map<string, Promise<void>>();
 
+export class LoadBundleFromServerError extends Error {
+  url: string;
+  isTimeout: boolean;
+  constructor(
+    message: string,
+    url: string,
+    isTimeout: boolean,
+    options?: {cause: mixed, ...},
+  ): void {
+    super(message, options);
+    this.url = url;
+    this.isTimeout = isTimeout;
+    this.name = 'LoadBundleFromServerError';
+  }
+}
+
+export class LoadBundleFromServerRequestError extends LoadBundleFromServerError {
+  constructor(
+    message: string,
+    url: string,
+    isTimeout: boolean,
+    options?: {cause: mixed, ...},
+  ): void {
+    super(message, url, isTimeout, options);
+    this.name = 'LoadBundleFromServerRequestError';
+  }
+}
+
 function asyncRequest(
   url: string,
 ): Promise<{body: string, headers: {[string]: string}}> {
@@ -62,10 +89,19 @@ function asyncRequest(
       );
       completeListener = Networking.addListener(
         'didCompleteNetworkResponse',
-        ([requestId, error]) => {
+        ([requestId, errorMessage, isTimeout]) => {
           if (requestId === id) {
-            if (error) {
-              reject(error);
+            if (errorMessage) {
+              reject(
+                new LoadBundleFromServerRequestError(
+                  'Could not load bundle',
+                  url,
+                  isTimeout,
+                  {
+                    cause: errorMessage,
+                  },
+                ),
+              );
             } else {
               //$FlowFixMe[incompatible-call]
               resolve({body: responseText, headers});
@@ -122,9 +158,15 @@ export default function loadBundleFromServer(
         headers['Content-Type'].indexOf('application/json') >= 0
       ) {
         // Errors are returned as JSON.
-        throw new Error(
-          JSON.parse(body).message ||
-            `Unknown error fetching '${bundlePathAndQuery}'`,
+        throw new LoadBundleFromServerError(
+          'Could not load bundle',
+          bundlePathAndQuery,
+          false, // isTimeout
+          {
+            cause:
+              JSON.parse(body).message ||
+              `Unknown error fetching '${bundlePathAndQuery}'`,
+          },
         );
       }
 

package/Libraries/Core/Devtools/openFileInEditor.js

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

package/Libraries/Core/Devtools/openURLInBrowser.js

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

package/Libraries/Core/Devtools/parseErrorStack.js

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

package/Libraries/Core/Devtools/parseHermesStack.js

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

package/Libraries/Core/Devtools/symbolicateStackTrace.js

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

package/Libraries/Core/ExceptionsManager.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict
+ * @format
  */
 
 'use strict';
@@ -76,9 +76,6 @@ function reportException(
     message = namePrefix + message;
   }
 
-  message =
-    e.jsEngine == null ? message : `${message}, js engine: ${e.jsEngine}`;
-
   // $FlowFixMe[unclear-type]
   const extraData: Object = {
     // $FlowFixMe[incompatible-use] we can't define a type with a Symbol-keyed field in flow
@@ -108,15 +105,20 @@ function reportException(
     // we feed back into console.error, to make sure any methods that are
     // monkey patched on top of console.error are called when coming from
     // handleException
-    console.error(data.message);
+    console.error(e);
   }
 
   if (__DEV__) {
-    const LogBox = require('../LogBox/LogBox').default;
-    LogBox.addException({
-      ...data,
-      isComponentError: !!e.isComponentError,
-    });
+    // reportToConsole is only true when coming from handleException,
+    // and the error has not yet been logged. If it's false, then it was
+    // reported to LogBox in reactConsoleErrorHandler, and we don't need to.
+    if (reportToConsole) {
+      const LogBox = require('../LogBox/LogBox').default;
+      LogBox.addException({
+        ...data,
+        isComponentError: !!e.isComponentError,
+      });
+    }
   } else if (isFatal || e.type !== 'warn') {
     const NativeExceptionsManager =
       require('./NativeExceptionsManager').default;
@@ -223,12 +225,6 @@ function reactConsoleErrorHandler(...args) {
     error = firstArg;
   } else {
     const stringifySafe = require('../Utilities/stringifySafe').default;
-    if (typeof firstArg === 'string' && firstArg.startsWith('Warning: ')) {
-      // React warnings use console.error so that a stack trace is shown, but
-      // we don't (currently) want these to show a redbox
-      // (Note: Logic duplicated in polyfills/console.js.)
-      return;
-    }
     const message = args
       .map(arg => (typeof arg === 'string' ? arg : stringifySafe(arg)))
       .join(' ');
@@ -243,6 +239,21 @@ function reactConsoleErrorHandler(...args) {
     !global.RN$handleException ||
     !global.RN$handleException(error, isFatal, reportToConsole)
   ) {
+    if (__DEV__) {
+      // If we're not reporting to the console in reportException,
+      // we need to report it as a console.error here.
+      if (!reportToConsole) {
+        require('../LogBox/LogBox').default.addConsoleLog('error', ...args);
+      }
+    }
+    if (error.message.startsWith('Warning: ')) {
+      // React warnings use console.error so that a stack trace is shown, but
+      // we don't (currently) want these to report to native.
+      // Note: We can probably remove this, but would be a breaking change
+      // if the warning module is still used somewhere.
+      // Logic duplicated in polyfills/console.js
+      return;
+    }
     reportException(
       /* $FlowFixMe[class-object-subtyping] added when improving typing for this
        * parameters */