react-native-tvos 0.82.0-0rc4 → 0.83.0-0rc0

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/Pressable/Pressable.d.ts

@@ -20,7 +20,7 @@ import {
 import {View} from '../View/View';
 import {AccessibilityProps} from '../View/ViewAccessibility';
 import {ViewProps} from '../View/ViewPropTypes';
-import {TVParallaxProperties} from '../../../types/index';
+import {TVParallaxProperties} from '../TV/TVParallaxProperties';
 
 export interface PressableStateCallbackType {
   readonly pressed: boolean;

package/Libraries/Components/Pressable/Pressable.js

@@ -251,7 +251,7 @@ function Pressable({
   const android_rippleConfig = useAndroidRippleForView(android_ripple, viewRef);
 
   const [pressed, setPressed] = usePressState(testOnly_pressed === true);
-  const [focused, setFocused] = usePressState(false);
+  const [focused, setFocused] = useState(false);
 
   const shouldUpdatePressed =
     typeof children === 'function' || typeof style === 'function';
@@ -287,9 +287,6 @@ function Pressable({
     accessibilityLiveRegion,
     accessibilityLabel,
     accessibilityState: _accessibilityState,
-    focusable:
-      focusable !== false && disabled !== true && ariaDisabled !== true,
-    isTVSelectable: isTVSelectable !== false && accessible !== false,
     accessibilityValue,
     hitSlop,
   };
@@ -376,6 +373,16 @@ function Pressable({
 
   const eventHandlers = usePressability(config);
 
+  const computedStyle = useMemo(() => {
+    return typeof style === 'function' ? style({pressed, focused}) : style;
+  }, [pressed, focused, style]);
+
+  const computedChildren = useMemo(() => {
+    return typeof children === 'function'
+      ? children({pressed, focused})
+      : children;
+  }, [pressed, focused, children]);
+
   return (
     <View
       {...restPropsWithDefaults}
@@ -386,16 +393,11 @@ function Pressable({
       nextFocusLeft={tagForComponentOrHandle(props.nextFocusLeft)}
       nextFocusRight={tagForComponentOrHandle(props.nextFocusRight)}
       nextFocusUp={tagForComponentOrHandle(props.nextFocusUp)}
-      isTVSelectable={
-        isTVSelectable !== false &&
-        accessible !== false &&
-        disabled !== true &&
-        ariaDisabled !== true
-      }
-      style={typeof style === 'function' ? style({pressed, focused}) : style}
+      focusable={focusable !== false && isTVSelectable !== false}
+      style={computedStyle}
       tvParallaxProperties={tvParallaxProperties}
       collapsable={false}>
-      {typeof children === 'function' ? children({pressed, focused}) : children}
+      {computedChildren}
       {__DEV__ ? <PressabilityDebugView color="red" hitSlop={hitSlop} /> : null}
     </View>
   );

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/TV/TVFocusGuideView.js

@@ -104,10 +104,12 @@ function TVFocusGuideView({
   const mergedRef = useMergeRefs(setLocalRef, ref);
 
   React.useEffect(() => {
-    if (destinationsProp !== null && destinationsProp !== undefined) {
+    if (focusable === false) {
+      setDestinations([]);
+    } else if (destinationsProp !== null && destinationsProp !== undefined) {
       setDestinations(destinationsProp); // $FlowFixMe[incompatible-call]
     }
-  }, [setDestinations, destinationsProp]);
+  }, [setDestinations, destinationsProp, focusable]);
 
   const enabledStyle = {display: enabled ? 'flex' : 'none'};
   const style = [styles.container, props.style, enabledStyle];
@@ -124,7 +126,7 @@ function TVFocusGuideView({
       style={style}
       ref={mergedRef}
       collapsable={false}
-      autoFocus={autoFocus}
+      autoFocus={focusable === false ? true : autoFocus}
       // tvOS only prop
       isTVSelectable={tvOSSelectable}
       // Android TV only prop

package/Libraries/Components/TV/TVParallaxProperties.d.ts

@@ -0,0 +1,42 @@
+export type TVParallaxProperties = {
+  /**
+   * If true, parallax effects are enabled.  Defaults to true.
+   */
+  enabled?: boolean | undefined,
+
+  /**
+   * Defaults to 2.0.
+   */
+  shiftDistanceX?: number | undefined,
+
+  /**
+   * Defaults to 2.0.
+   */
+  shiftDistanceY?: number | undefined,
+
+  /**
+   * Defaults to 0.05.
+   */
+  tiltAngle?: number | undefined,
+
+  /**
+   * Defaults to 1.0
+   */
+  magnification?: number | undefined,
+
+  /**
+   * Defaults to 1.0
+   */
+  pressMagnification?: number | undefined,
+
+  /**
+   * Defaults to 0.3
+   */
+  pressDuration?: number | undefined,
+
+  /**
+   * @deprecated No longer used
+   */
+  pressDelay?: number | undefined,
+};
+

package/Libraries/Components/TV/TVViewPropTypes.js

@@ -53,30 +53,36 @@ export type TVParallaxPropertiesType = $ReadOnly<{|
 |}>;
 
 /**
- * Additional View properties for Apple TV
+ * These props are for both Apple TV and Android TV.
+ * TODO: update `@react-native/eslint-plugin` so that the
+ * name can be changed to TVViewProps
  */
 export type TVViewProps = $ReadOnly<{|
   /**
-   * *(Apple TV only)* When set to true, this view will be focusable
-   * and navigable using the Apple TV remote.
+   * @deprecated Replaced by `focusable`.
    *
    * @platform ios
    */
-  isTVSelectable?: boolean,
+  isTVSelectable?: ?boolean,
 
   /**
-   * *(Apple TV only)* May be set to true to force the Apple TV focus engine to move focus to this view.
+   * Whether this `View` should be focusable with a non-touch input device, eg. receive focus with a hardware keyboard.
    *
-   * @platform ios
    */
-  hasTVPreferredFocus?: boolean,
+  focusable?: ?boolean,
+
+  /**
+   * May be set to true to force the focus engine to move focus to this view.
+   *
+   */
+  hasTVPreferredFocus?: ?boolean,
 
   /**
    * *(Apple TV only)* Object with properties to control Apple TV parallax effects.
    *
    * @platform ios
    */
-  tvParallaxProperties?: TVParallaxPropertiesType,
+  tvParallaxProperties?: ?TVParallaxPropertiesType,
 
   /**
    * Additional properties needed for flow checks on TVFocusGuideView
@@ -87,4 +93,35 @@ export type TVViewProps = $ReadOnly<{|
   safePadding?: string | null,
   onPressIn?: (event: any) => void,
   onPressOut?: (event: any) => void,
+
+  /**
+   * TV next focus forward (see documentation for the View component).
+   *
+   * @platform android
+   */
+  nextFocusForward?: ?number,
+
+  /**
+   * TV next focus down (see documentation for the View component).
+   *
+   */
+  nextFocusDown?: ?number,
+
+  /**
+   * TV next focus left (see documentation for the View component).
+   *
+   */
+  nextFocusLeft?: ?number,
+
+  /**
+   * TV next focus right (see documentation for the View component).
+   *
+   */
+  nextFocusRight?: ?number,
+
+  /**
+   * TV next focus up (see documentation for the View component).
+   *
+   */
+  nextFocusUp?: ?number,
 |}>;

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'>>
 ));