react-native-tvos 0.82.1-0 → 0.83.0-0

package/Libraries/Components/AccessibilityInfo/AccessibilityInfo.js

@@ -99,7 +99,7 @@ const AccessibilityInfo = {
             reject,
           );
         } else {
-          reject(null);
+          reject(new Error('NativeAccessibilityManagerIOS is not available'));
         }
       });
     }
@@ -119,7 +119,11 @@ const AccessibilityInfo = {
         if (NativeAccessibilityInfoAndroid?.isGrayscaleEnabled != null) {
           NativeAccessibilityInfoAndroid.isGrayscaleEnabled(resolve);
         } else {
-          reject(null);
+          reject(
+            new Error(
+              'NativeAccessibilityInfoAndroid.isGrayscaleEnabled is not available',
+            ),
+          );
         }
       });
     } else {
@@ -130,7 +134,7 @@ const AccessibilityInfo = {
             reject,
           );
         } else {
-          reject(null);
+          reject(new Error('AccessibilityInfo native module is not available'));
         }
       });
     }
@@ -150,7 +154,11 @@ const AccessibilityInfo = {
         if (NativeAccessibilityInfoAndroid?.isInvertColorsEnabled != null) {
           NativeAccessibilityInfoAndroid.isInvertColorsEnabled(resolve);
         } else {
-          reject(null);
+          reject(
+            new Error(
+              'NativeAccessibilityInfoAndroid.isInvertColorsEnabled is not available',
+            ),
+          );
         }
       });
     } else {
@@ -161,7 +169,7 @@ const AccessibilityInfo = {
             reject,
           );
         } else {
-          reject(null);
+          reject(new Error('AccessibilityInfo native module is not available'));
         }
       });
     }
@@ -181,7 +189,7 @@ const AccessibilityInfo = {
         if (NativeAccessibilityInfoAndroid != null) {
           NativeAccessibilityInfoAndroid.isReduceMotionEnabled(resolve);
         } else {
-          reject(null);
+          reject(new Error('AccessibilityInfo native module is not available'));
         }
       } else {
         if (NativeAccessibilityManagerIOS != null) {
@@ -190,7 +198,7 @@ const AccessibilityInfo = {
             reject,
           );
         } else {
-          reject(null);
+          reject(new Error('NativeAccessibilityManagerIOS is not available'));
         }
       }
     });
@@ -208,7 +216,11 @@ const AccessibilityInfo = {
         if (NativeAccessibilityInfoAndroid?.isHighTextContrastEnabled != null) {
           NativeAccessibilityInfoAndroid.isHighTextContrastEnabled(resolve);
         } else {
-          reject(null);
+          reject(
+            new Error(
+              'NativeAccessibilityInfoAndroid.isHighTextContrastEnabled is not available',
+            ),
+          );
         }
       } else {
         return Promise.resolve(false);
@@ -236,7 +248,11 @@ const AccessibilityInfo = {
             reject,
           );
         } else {
-          reject(null);
+          reject(
+            new Error(
+              'NativeAccessibilityManagerIOS.getCurrentDarkerSystemColorsState is not available',
+            ),
+          );
         }
       }
     });
@@ -264,7 +280,11 @@ const AccessibilityInfo = {
             reject,
           );
         } else {
-          reject(null);
+          reject(
+            new Error(
+              'NativeAccessibilityManagerIOS.getCurrentPrefersCrossFadeTransitionsState is not available',
+            ),
+          );
         }
       }
     });
@@ -289,7 +309,7 @@ const AccessibilityInfo = {
             reject,
           );
         } else {
-          reject(null);
+          reject(new Error('NativeAccessibilityManagerIOS is not available'));
         }
       });
     }
@@ -309,7 +329,7 @@ const AccessibilityInfo = {
         if (NativeAccessibilityInfoAndroid != null) {
           NativeAccessibilityInfoAndroid.isTouchExplorationEnabled(resolve);
         } else {
-          reject(null);
+          reject(new Error('NativeAccessibilityInfoAndroid is not available'));
         }
       } else {
         if (NativeAccessibilityManagerIOS != null) {
@@ -318,7 +338,7 @@ const AccessibilityInfo = {
             reject,
           );
         } else {
-          reject(null);
+          reject(new Error('NativeAccessibilityManagerIOS is not available'));
         }
       }
     });
@@ -343,10 +363,18 @@ const AccessibilityInfo = {
         ) {
           NativeAccessibilityInfoAndroid.isAccessibilityServiceEnabled(resolve);
         } else {
-          reject(null);
+          reject(
+            new Error(
+              'NativeAccessibilityInfoAndroid.isAccessibilityServiceEnabled is not available',
+            ),
+          );
         }
       } else {
-        reject(null);
+        reject(
+          new Error(
+            'isAccessibilityServiceEnabled is only available on Android',
+          ),
+        );
       }
     });
   },

package/Libraries/Components/ActivityIndicator/ActivityIndicator.d.ts

@@ -9,7 +9,7 @@
 
 import type * as React from 'react';
 import {Constructor} from '../../../types/private/Utilities';
-import {NativeMethods} from '../../../types/public/ReactNativeTypes';
+import {HostInstance} from '../../../types/public/ReactNativeTypes';
 import {ColorValue, StyleProp} from '../../StyleSheet/StyleSheet';
 import {ViewStyle} from '../../StyleSheet/StyleSheetTypes';
 import {LayoutChangeEvent} from '../../Types/CoreEventTypes';
@@ -46,7 +46,7 @@ export interface ActivityIndicatorProps extends ViewProps {
 }
 
 declare class ActivityIndicatorComponent extends React.Component<ActivityIndicatorProps> {}
-declare const ActivityIndicatorBase: Constructor<NativeMethods> &
+declare const ActivityIndicatorBase: Constructor<HostInstance> &
   typeof ActivityIndicatorComponent;
 export class ActivityIndicator extends ActivityIndicatorBase {}
 

package/Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.d.ts

@@ -9,7 +9,7 @@
 
 import type * as React from 'react';
 import {Constructor} from '../../../types/private/Utilities';
-import {NativeMethods} from '../../../types/public/ReactNativeTypes';
+import {HostInstance} from '../../../types/public/ReactNativeTypes';
 import {ColorValue} from '../../StyleSheet/StyleSheet';
 import {
   NativeSyntheticEvent,
@@ -121,7 +121,7 @@ interface DrawerPosition {
 }
 
 declare class DrawerLayoutAndroidComponent extends React.Component<DrawerLayoutAndroidProps> {}
-declare const DrawerLayoutAndroidBase: Constructor<NativeMethods> &
+declare const DrawerLayoutAndroidBase: Constructor<HostInstance> &
   typeof DrawerLayoutAndroidComponent;
 export class DrawerLayoutAndroid extends DrawerLayoutAndroidBase {
   /**

package/Libraries/Components/ProgressBarAndroid/ProgressBarAndroid.d.ts

@@ -9,7 +9,7 @@
 
 import type * as React from 'react';
 import {Constructor} from '../../../types/private/Utilities';
-import {NativeMethods} from '../../../types/public/ReactNativeTypes';
+import {HostInstance} from '../../../types/public/ReactNativeTypes';
 import {ColorValue} from '../../StyleSheet/StyleSheet';
 import {ViewProps} from '../View/ViewPropTypes';
 
@@ -72,7 +72,7 @@ export interface ProgressBarAndroidProps extends ViewProps {
  * that the app is loading or there is some activity in the app.
  */
 declare class ProgressBarAndroidComponent extends React.Component<ProgressBarAndroidProps> {}
-declare const ProgressBarAndroidBase: Constructor<NativeMethods> &
+declare const ProgressBarAndroidBase: Constructor<HostInstance> &
   typeof ProgressBarAndroidComponent;
 /**
  * ProgressBarAndroid has been extracted from react-native core and will be removed in a future release.

package/Libraries/Components/RefreshControl/RefreshControl.d.ts

@@ -9,7 +9,7 @@
 
 import type * as React from 'react';
 import {Constructor} from '../../../types/private/Utilities';
-import {NativeMethods} from '../../../types/public/ReactNativeTypes';
+import {HostInstance} from '../../../types/public/ReactNativeTypes';
 import {ColorValue} from '../../StyleSheet/StyleSheet';
 import {ViewProps} from '../View/ViewPropTypes';
 
@@ -49,7 +49,7 @@ export interface RefreshControlPropsAndroid extends ViewProps {
   /**
    * Size of the refresh indicator, see RefreshControl.SIZE.
    */
-  size?: number | undefined;
+  size?: 'default' | 'large' | undefined;
 }
 
 export interface RefreshControlProps
@@ -80,7 +80,7 @@ export interface RefreshControlProps
  * in the `onRefresh` function otherwise the refresh indicator will stop immediately.
  */
 declare class RefreshControlComponent extends React.Component<RefreshControlProps> {}
-declare const RefreshControlBase: Constructor<NativeMethods> &
+declare const RefreshControlBase: Constructor<HostInstance> &
   typeof RefreshControlComponent;
 export class RefreshControl extends RefreshControlBase {
   static SIZE: Object; // Undocumented

package/Libraries/Components/SafeAreaView/SafeAreaView.d.ts

@@ -9,7 +9,7 @@
 
 import type * as React from 'react';
 import {Constructor} from '../../../types/private/Utilities';
-import {NativeMethods} from '../../../types/public/ReactNativeTypes';
+import {HostInstance} from '../../../types/public/ReactNativeTypes';
 import {ViewProps} from '../View/ViewPropTypes';
 
 /**
@@ -23,7 +23,7 @@ import {ViewProps} from '../View/ViewPropTypes';
  */
 declare class SafeAreaViewComponent extends React.Component<ViewProps> {}
 
-declare const SafeAreaViewBase: Constructor<NativeMethods> &
+declare const SafeAreaViewBase: Constructor<HostInstance> &
   typeof SafeAreaViewComponent;
 
 /**

package/Libraries/Components/ScrollView/ScrollView.js

@@ -1696,6 +1696,7 @@ class ScrollView extends React.Component<ScrollViewProps, ScrollViewState> {
           return (
             <StickyHeaderComponent
               key={key}
+              /* $FlowFixMe[incompatible-type] */
               ref={ref => this._setStickyHeaderRef(key, ref)}
               nextHeaderLayoutY={this._headerLayoutYs.get(
                 this._getKeyForIndex(nextIndex, children),

package/Libraries/Components/ScrollView/ScrollViewStickyHeader.js

@@ -44,7 +44,7 @@ interface Instance extends React.ElementRef<typeof Animated.View> {
 }
 
 const ScrollViewStickyHeader: component(
-  ref: React.RefSetter<Instance>,
+  ref?: React.RefSetter<Instance>,
   ...props: ScrollViewStickyHeaderProps
 ) = function ScrollViewStickyHeader({
   ref: forwardedRef,
@@ -282,7 +282,7 @@ const ScrollViewStickyHeader: component(
   const passthroughAnimatedPropExplicitValues =
     isFabric && translateY != null
       ? {
-          style: {transform: [{translateY: translateY}]},
+          style: {transform: [{translateY}]},
         }
       : null;
 
@@ -303,20 +303,20 @@ const ScrollViewStickyHeader: component(
         passthroughAnimatedPropExplicitValues
       }>
       {cloneElement(child, {
-        style: styles.fill, // We transfer the child style to the wrapper.
         onLayout: undefined, // we call this manually through our this._onLayout
+        style: styles.fill, // We transfer the child style to the wrapper.
       })}
     </Animated.View>
   );
 };
 
 const styles = StyleSheet.create({
-  header: {
-    zIndex: 10,
-  },
   fill: {
     flex: 1,
   },
+  header: {
+    zIndex: 10,
+  },
 });
 
 export default ScrollViewStickyHeader;

package/Libraries/Components/Switch/Switch.d.ts

@@ -9,7 +9,7 @@
 
 import type * as React from 'react';
 import {Constructor} from '../../../types/private/Utilities';
-import {NativeMethods} from '../../../types/public/ReactNativeTypes';
+import {HostInstance} from '../../../types/public/ReactNativeTypes';
 import {ColorValue, StyleProp} from '../../StyleSheet/StyleSheet';
 import {ViewStyle} from '../../StyleSheet/StyleSheetTypes';
 import {ViewProps} from '../View/ViewPropTypes';
@@ -114,5 +114,5 @@ export interface SwitchProps extends SwitchPropsIOS {
  * the supplied `value` prop instead of the expected result of any user actions.
  */
 declare class SwitchComponent extends React.Component<SwitchProps> {}
-declare const SwitchBase: Constructor<NativeMethods> & typeof SwitchComponent;
+declare const SwitchBase: Constructor<HostInstance> & typeof SwitchComponent;
 export class Switch extends SwitchBase {}

package/Libraries/Components/TextInput/TextInput.d.ts

@@ -10,10 +10,7 @@
 import type * as React from 'react';
 import {Constructor} from '../../../types/private/Utilities';
 import {TimerMixin} from '../../../types/private/TimerMixin';
-import {
-  HostInstance,
-  NativeMethods,
-} from '../../../types/public/ReactNativeTypes';
+import {HostInstance} from '../../../types/public/ReactNativeTypes';
 import {ColorValue, StyleProp} from '../../StyleSheet/StyleSheet';
 import {TextStyle} from '../../StyleSheet/StyleSheetTypes';
 import {
@@ -1029,7 +1026,7 @@ interface TextInputState {
  * @see https://reactnative.dev/docs/textinput#methods
  */
 declare class TextInputComponent extends React.Component<TextInputProps> {}
-declare const TextInputBase: Constructor<NativeMethods> &
+declare const TextInputBase: Constructor<HostInstance> &
   Constructor<TimerMixin> &
   typeof TextInputComponent;
 export class TextInput extends TextInputBase {

package/Libraries/Components/TextInput/TextInput.js

@@ -450,6 +450,12 @@ function InternalTextInput(props: TextInputProps): React.Node {
         before we can get to the long term breaking change.
       */
       if (instance != null) {
+        // Register the input immediately when the ref is set so that focus()
+        // can be called from ref callbacks
+        // Double registering during useLayoutEffect is fine, because the underlying
+        // state is a Set.
+        TextInputState.registerInput(instance);
+
         // $FlowFixMe[prop-missing] - See the explanation above.
         // $FlowFixMe[unsafe-object-assign]
         Object.assign(instance, {

package/Libraries/Components/Touchable/TouchableBounce.js

@@ -47,15 +47,14 @@ class TouchableBounce extends React.Component<
 
   _createPressabilityConfig(): PressabilityConfig {
     return {
+      android_disableSound: this.props.touchSoundDisabled,
       cancelable: !this.props.rejectResponderTermination,
-      disabled: this.props.disabled,
-      hitSlop: this.props.hitSlop,
       delayLongPress: this.props.delayLongPress,
       delayPressIn: this.props.delayPressIn,
       delayPressOut: this.props.delayPressOut,
+      disabled: this.props.disabled,
+      hitSlop: this.props.hitSlop,
       minPressDuration: 0,
-      pressRectOffset: this.props.pressRetentionOffset,
-      android_disableSound: this.props.touchSoundDisabled,
       onBlur: event => {
         if (Platform.isTV) {
           this._bounceTo(1, 0.4, 0);
@@ -113,6 +112,7 @@ class TouchableBounce extends React.Component<
           this.props.onPressOut(event);
         }
       },
+      pressRectOffset: this.props.pressRetentionOffset,
     };
   }
 
@@ -123,10 +123,10 @@ class TouchableBounce extends React.Component<
     callback?: ?() => void,
   ) {
     Animated.spring(this.state.scale, {
-      toValue,
-      velocity,
       bounciness,
+      toValue,
       useNativeDriver: true,
+      velocity,
     }).start(callback);
   }
 
@@ -230,6 +230,6 @@ export default (function TouchableBounceWrapper({
 }) {
   return <TouchableBounce {...props} hostRef={hostRef} />;
 } as component(
-  ref: React.RefSetter<mixed>,
+  ref?: React.RefSetter<mixed>,
   ...props: $ReadOnly<Omit<TouchableBounceProps, 'hostRef'>>
 ));

package/Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -13,6 +13,9 @@ import type {AnyAttributeType} from '../../Renderer/shims/ReactNativeTypes';
 import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
 import processAspectRatio from '../../StyleSheet/processAspectRatio';
 import processBackgroundImage from '../../StyleSheet/processBackgroundImage';
+import processBackgroundPosition from '../../StyleSheet/processBackgroundPosition';
+import processBackgroundRepeat from '../../StyleSheet/processBackgroundRepeat';
+import processBackgroundSize from '../../StyleSheet/processBackgroundSize';
 import processBoxShadow from '../../StyleSheet/processBoxShadow';
 import processColor from '../../StyleSheet/processColor';
 import processFilter from '../../StyleSheet/processFilter';
@@ -144,10 +147,25 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
     : {process: processBoxShadow},
 
   /**
-   * Linear Gradient
+   * BackgroundImage
    */
   experimental_backgroundImage: {process: processBackgroundImage},
 
+  /**
+   * BackgroundSize
+   */
+  experimental_backgroundSize: {process: processBackgroundSize},
+
+  /**
+   * BackgroundPosition
+   */
+  experimental_backgroundPosition: {process: processBackgroundPosition},
+
+  /**
+   * BackgroundRepeat
+   */
+  experimental_backgroundRepeat: {process: processBackgroundRepeat},
+
   /**
    * View
    */

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

@@ -10,7 +10,7 @@
 import type * as React from 'react';
 import {Constructor} from '../../../types/private/Utilities';
 import {ViewProps} from './ViewPropTypes';
-import {NativeMethods} from '../../../types/public/ReactNativeTypes';
+import {HostInstance} from '../../../types/public/ReactNativeTypes';
 
 /**
  * The most fundamental component for building UI, View is a container that supports layout with flexbox, style, some touch handling,
@@ -19,7 +19,7 @@ import {NativeMethods} from '../../../types/public/ReactNativeTypes';
  * whether that is a UIView, <div>, android.view, etc.
  */
 declare class ViewComponent extends React.Component<ViewProps> {}
-declare const ViewBase: Constructor<NativeMethods> & typeof ViewComponent;
+declare const ViewBase: Constructor<HostInstance> & typeof ViewComponent;
 export class View extends ViewBase {
   /**
    * Is 3D Touch / Force Touch available (i.e. will touch events include `force`)

package/Libraries/Components/View/ViewNativeComponent.js

@@ -21,6 +21,8 @@ const ViewNativeComponent: HostComponent<Props> =
   }));
 
 interface NativeCommands {
+  +focus: (viewRef: HostInstance) => void;
+  +blur: (viewRef: HostInstance) => void;
   +hotspotUpdate: (viewRef: HostInstance, x: number, y: number) => void;
   +setPressed: (viewRef: HostInstance, pressed: boolean) => void;
   // Focus Guide API
@@ -33,6 +35,8 @@ interface NativeCommands {
 
 export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
   supportedCommands: [
+    'focus',
+    'blur',
     'hotspotUpdate',
     'setPressed',
     'setDestinations',
@@ -40,6 +44,16 @@ export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
   ],
 });
 
+/**
+ * `ViewNativeComponent` is an internal React Native host component, and is
+ * exported to provide lower-level access for libraries.
+ *
+ * @warning `<unstable_NativeView>` provides no semver guarantees and is not
+ *   intended to be used in app code. Please use
+ *   [`<View>`](https://reactnative.dev/docs/view) instead.
+ */
+// Additional note: Our long term plan is to reduce the overhead of the <Text>
+// and <View> wrappers so that we no longer have any reason to export these APIs.
 export default ViewNativeComponent;
 
 export type ViewNativeComponentType = HostComponent<Props>;

package/Libraries/Core/ReactNativeVersion.js

@@ -27,8 +27,8 @@
  */
 export default class ReactNativeVersion {
   static major: number = 0;
-  static minor: number = 82;
-  static patch: number = 1;
+  static minor: number = 83;
+  static patch: number = 0;
   static prerelease: string | null = '0';
 
   static getVersionString(): string {

package/Libraries/Core/setUpPerformance.js

@@ -20,7 +20,9 @@ if (NativePerformance) {
     // $FlowExpectedError[cannot-write]
     global.performance = {
       mark: () => {},
+      clearMarks: () => {},
       measure: () => {},
+      clearMeasures: () => {},
       now: () => {
         const performanceNow = global.nativePerformanceNow || Date.now;
         return performanceNow();

package/Libraries/Debugging/DebuggingOverlay.js

@@ -39,20 +39,13 @@ function DebuggingOverlay({
   useImperativeHandle(
     ref,
     () => ({
-      highlightTraceUpdates(updates) {
+      clearElementsHighlight() {
         if (!isNativeComponentReady) {
           return;
         }
 
-        const nonEmptyRectangles = updates.filter(
-          ({rectangle, color}) => rectangle.width >= 0 && rectangle.height >= 0,
-        );
-
         if (nativeComponentRef.current != null) {
-          Commands.highlightTraceUpdates(
-            nativeComponentRef.current,
-            nonEmptyRectangles,
-          );
+          Commands.clearElementsHighlights(nativeComponentRef.current);
         }
       },
       highlightElements(elements) {
@@ -64,13 +57,20 @@ function DebuggingOverlay({
           Commands.highlightElements(nativeComponentRef.current, elements);
         }
       },
-      clearElementsHighlight() {
+      highlightTraceUpdates(updates) {
         if (!isNativeComponentReady) {
           return;
         }
 
+        const nonEmptyRectangles = updates.filter(
+          ({rectangle, color}) => rectangle.width >= 0 && rectangle.height >= 0,
+        );
+
         if (nativeComponentRef.current != null) {
-          Commands.clearElementsHighlights(nativeComponentRef.current);
+          Commands.highlightTraceUpdates(
+            nativeComponentRef.current,
+            nonEmptyRectangles,
+          );
         }
       },
     }),
@@ -95,14 +95,14 @@ function DebuggingOverlay({
 
 const styles = StyleSheet.create({
   overlay: {
-    position: 'absolute',
-    top: 0,
     bottom: 0,
     left: 0,
+    position: 'absolute',
     right: 0,
+    top: 0,
   },
 });
 
 export default DebuggingOverlay as component(
-  ref: React.RefSetter<DebuggingOverlayHandle>,
+  ref?: React.RefSetter<DebuggingOverlayHandle>,
 );

package/Libraries/Debugging/DebuggingOverlayRegistry.js

@@ -332,7 +332,9 @@ class DebuggingOverlayRegistry {
         instance.measure((x, y, width, height, left, top) => {
           // measure can execute callback without any values provided to signal error.
           if (left == null || top == null || width == null || height == null) {
-            reject('Unexpectedly failed to call measure on an instance.');
+            reject(
+              new Error('Unexpectedly failed to call measure on an instance.'),
+            );
           }
 
           resolve({
@@ -480,7 +482,11 @@ class DebuggingOverlayRegistry {
                 width == null ||
                 height == null
               ) {
-                reject('Unexpectedly failed to call measure on an instance.');
+                reject(
+                  new Error(
+                    'Unexpectedly failed to call measure on an instance.',
+                  ),
+                );
               }
 
               resolve({x: left, y: top, width, height});

package/Libraries/EventEmitter/RCTDeviceEventEmitter.js

@@ -30,8 +30,11 @@ class RCTDeviceEventEmitterImpl extends EventEmitter<RCTDeviceEventDefinitions>
     ...args: RCTDeviceEventDefinitions[TEvent]
   ): void {
     beginEvent(() => `RCTDeviceEventEmitter.emit#${eventType}`);
-    super.emit(eventType, ...args);
-    endEvent();
+    try {
+      super.emit(eventType, ...args);
+    } finally {
+      endEvent();
+    }
   }
 }
 const RCTDeviceEventEmitter: IEventEmitter<RCTDeviceEventDefinitions> =