react-native-tvos 0.75.2-0rc1 → 0.75.3-0

package/Libraries/Components/Pressable/Pressable.js

@@ -4,11 +4,12 @@
  * 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
+ * @flow
  * @format
  */
 
 import type {
+  FocusEvent,
   LayoutEvent,
   MouseEvent,
   PressEvent,
@@ -27,7 +28,6 @@ import {type RectOrSize} from '../../StyleSheet/Rect';
 import useMergeRefs from '../../Utilities/useMergeRefs';
 import View from '../View/View';
 import type {TVParallaxPropertiesType} from '../TV/TVViewPropTypes';
-import Platform from '../../Utilities/Platform';
 import {tvFocusEventHandler} from '../TV/TVFocusEventHandler';
 import tagForComponentOrHandle from '../TV/tagForComponentOrHandle';
 import useAndroidRippleForView, {
@@ -332,13 +332,13 @@ function Pressable(
       delayPressIn: unstable_pressDelay,
       onHoverIn,
       onHoverOut,
-      onBlur(event: HWEvent): void {
+      onBlur(event: FocusEvent): void {
         shouldUpdatePressed && setFocused(false);
         if (onBlur != null) {
           onBlur(event);
         }
       },
-      onFocus(event: HWEvent): void {
+      onFocus(event: FocusEvent): void {
         shouldUpdatePressed && setFocused(true);
         if (onFocus != null) {
           onFocus(event);
@@ -393,7 +393,7 @@ function Pressable(
   const eventHandlers = usePressability(config);
 
   const pressableTVFocusEventHandler = React.useCallback(
-    (evt: FocusEvent) => {
+    (evt: any) => {
       if (isTVSelectable !== false || focusable !== false) {
         // $FlowFixMe[prop-missing]
         if (evt?.eventType === 'focus') {
@@ -417,7 +417,6 @@ function Pressable(
       }
     },
     [
-      focused,
       onBlur,
       onFocus,
       onLongPress,

package/Libraries/Components/ScrollView/ScrollView.d.ts

@@ -534,7 +534,7 @@ export interface ScrollViewPropsIOS {
    * Defines if UIScrollView index should be shown when fast scrolling.
    * Defaults to true.
    */
-  showsScrollIndex?: boolean;
+  showsScrollIndex?: boolean | undefined;
 }
 
 export interface ScrollViewPropsAndroid {

package/Libraries/Components/TV/TVEventHandler.js

@@ -10,18 +10,23 @@
 
 'use strict';
 
+import type {TVRemoteEvent} from '../../Types/CoreEventTypes';
+
+import NativeTVNavigationEventEmitter from '../../../src/private/specs/modules/NativeTVNavigationEventEmitter';
 import NativeEventEmitter from '../../EventEmitter/NativeEventEmitter';
 import Platform from '../../Utilities/Platform';
 import {type EventSubscription} from '../../vendor/emitter/EventEmitter';
-import NativeTVNavigationEventEmitter from '../../../src/private/specs/modules/NativeTVNavigationEventEmitter';
-import type {TVRemoteEvent} from '../../Types/CoreEventTypes';
 
 let __nativeTVNavigationEventEmitter: ?NativeEventEmitter<TVRemoteEvent> = null;
 
-const TVEventHandler = {
-  addListener: (callback: Function) => {
+const TVEventHandler: {
+  addListener: (
+    callback: (event: any) => void,
+  ) => EventSubscription | {remove: () => void},
+} = {
+  addListener: callback => {
     if (Platform.OS === 'ios' && !NativeTVNavigationEventEmitter) {
-      return;
+      return {remove: () => {}};
     }
     if (!__nativeTVNavigationEventEmitter) {
       __nativeTVNavigationEventEmitter = new NativeEventEmitter<TVRemoteEvent>(
@@ -32,7 +37,7 @@ const TVEventHandler = {
       __nativeTVNavigationEventEmitter.addListener(
         // $FlowFixMe[prop-missing]
         'onHWKeyEvent',
-        data => {
+        (data: any) => {
           if (callback) {
             callback(data);
           }

package/Libraries/Components/TV/TVFocusEventHandler.js

@@ -10,9 +10,10 @@
 
 'use strict';
 
+import type {TVRemoteEvent} from '../../Types/CoreEventTypes';
+
 import Platform from '../../Utilities/Platform';
 import {type EventSubscription} from '../../vendor/emitter/EventEmitter';
-import type {TVRemoteEvent} from '../../Types/CoreEventTypes';
 import TVEventHandler from './TVEventHandler';
 
 class TVFocusEventHandler {

package/Libraries/Components/TV/TVFocusGuideView.js

@@ -10,14 +10,15 @@
 
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 import type {ViewProps} from '../View/ViewPropTypes';
+import type {ComponentOrHandleType} from './tagForComponentOrHandle';
 
 import setAndForwardRef from '../../Utilities/setAndForwardRef';
 import {Commands} from '../View/ViewNativeComponent';
+import tagForComponentOrHandle from './tagForComponentOrHandle';
 
+const StyleSheet = require('../../StyleSheet/StyleSheet');
+const View = require('../View/View');
 const React = require('react');
-const ReactNative = require('react-native');
-
-const {View} = ReactNative;
 
 type TVFocusGuideViewProps = $ReadOnly<{
   ...ViewProps,
@@ -32,7 +33,7 @@ type TVFocusGuideViewProps = $ReadOnly<{
   /**
    * The views the focus should go to
    */
-  destinations?: (?React.ElementRef<HostComponent<mixed>>)[],
+  destinations?: ComponentOrHandleType[],
 
   /**
    * @deprecated Don't use it, no longer necessary.
@@ -49,7 +50,7 @@ type TVFocusGuideViewProps = $ReadOnly<{
   /**
    * When set to false, this view and all its subviews will be NOT focusable.
    */
-  focusable?: boolean | undefined,
+  focusable?: boolean | void,
 }>;
 
 export type TVFocusGuideViewImperativeMethods = $ReadOnly<{
@@ -67,16 +68,16 @@ function TVFocusGuideView(
     focusable,
     ...props
   }: TVFocusGuideViewProps,
-  forwardedRef,
+  forwardedRef: any,
 ): React.Node {
-  const focusGuideRef = React.useRef<React.ElementRef<
-    typeof ReactNative.View,
-  > | null>(null);
+  const focusGuideRef = React.useRef<React.ElementRef<typeof View> | null>(
+    null,
+  );
 
   const setDestinations = React.useCallback(
-    (destinations: (?React.ElementRef<HostComponent<mixed>>)[]) => {
+    (destinations: ?(ComponentOrHandleType[])) => {
       const dests: number[] = (destinations || [])
-        .map(ReactNative.findNodeHandle)
+        .map((destination: any) => tagForComponentOrHandle(destination))
         .filter(Boolean);
 
       if (focusGuideRef.current != null) {
@@ -106,8 +107,8 @@ function TVFocusGuideView(
   });
 
   React.useEffect(() => {
-    if (destinationsProp != null) {
-      setDestinations(destinationsProp);
+    if (destinationsProp !== null && destinationsProp !== undefined) {
+      setDestinations(destinationsProp); // $FlowFixMe[incompatible-call]
     }
   }, [setDestinations, destinationsProp]);
 
@@ -121,7 +122,7 @@ function TVFocusGuideView(
 
   return (
     // $FlowFixMe[prop-missing]
-    <ReactNative.View
+    <View
       {...props}
       style={style}
       ref={_setNativeRef}
@@ -135,7 +136,7 @@ function TVFocusGuideView(
   );
 }
 
-const styles = ReactNative.StyleSheet.create({
+const styles = StyleSheet.create({
   container: {
     minWidth: 1,
     minHeight: 1,

package/Libraries/Components/TV/TVTextScrollView.js

@@ -5,15 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
- * @flow strict-local
+ * @flow
  */
 
-const React = require('react');
-const ScrollView = require('../ScrollView/ScrollView');
-const {tvFocusEventHandler} = require('./TVFocusEventHandler');
+import typeof Props from '../ScrollView/ScrollView';
 
 import tagForComponentOrHandle from './tagForComponentOrHandle';
-import typeof Props from '../ScrollView/ScrollView';
+
+const ScrollView = require('../ScrollView/ScrollView');
+const {tvFocusEventHandler} = require('./TVFocusEventHandler');
+const React = require('react');
 
 /**
  * Convenience wrapper to create a scroll view that will scroll correctly
@@ -64,9 +65,9 @@ class TVTextScrollView extends React.Component<{
   _subscription: any;
 
   componentDidMount() {
-    const cmp = this;
-    const myTag = tagForComponentOrHandle(cmp);
-    tvFocusEventHandler.register(myTag, function (evt) {
+    const cmp = this; // eslint-disable-line consistent-this
+    const myTag = tagForComponentOrHandle(this);
+    tvFocusEventHandler?.register(myTag, function (evt) {
       if (myTag === evt.tag) {
         if (evt.eventType === 'focus') {
           cmp.props.onFocus && cmp.props.onFocus(evt);
@@ -79,7 +80,7 @@ class TVTextScrollView extends React.Component<{
 
   componentWillUnmount() {
     const myTag = tagForComponentOrHandle(this);
-    tvFocusEventHandler.unregister(myTag);
+    tvFocusEventHandler?.unregister(myTag);
   }
 
   render(): React.Node | React.Element<string> {

package/Libraries/Components/TV/TVViewPropTypes.js

@@ -83,6 +83,6 @@ export type TVViewProps = $ReadOnly<{|
    */
   destinations?: ?(Object[]),
   enabled?: boolean,
-  autofocus?: boolean,
+  autoFocus?: boolean,
   safePadding?: string | null,
 |}>;

package/Libraries/Components/TV/tagForComponentOrHandle.js

@@ -1,24 +1,24 @@
-// Replacement for findNodeHandle, since we need this for converting
-// components to tags when rendering nextFocus props
-// @flow
+/*
+ * Replacement for findNodeHandle, since we need this for converting
+ * components to tags when rendering nextFocus props
+ * @flow
+ */
 
 // TODO: make this work for Fabric
 
+import type {ElementRef, ElementType} from 'react';
+
 const findNodeHandle = require('../../ReactNative/RendererProxy').findNodeHandle;
 
-type TagForComponentOrHandleType = (
-    component: ?(
-      | {_nativeTag: ?number, canonical: ?{_nativeTag: ?number}}
-      | number
-    ),
+export type ComponentOrHandleType = ?(ElementRef<ElementType> | number);
+
+export type TagForComponentOrHandleType = (
+    component: ComponentOrHandleType,
   ) => ?number;
 
 const tagForComponentOrHandle: TagForComponentOrHandleType = (
-  component: ?(
-    | {_nativeTag: ?number, canonical: ?{_nativeTag: ?number}}
-    | number
-  ),
-): ?number => {
+  component
+) => {
   if (component === null || component === undefined) {
     return undefined;
   }

package/Libraries/Components/TV/useTVEventHandler.js

@@ -1,8 +1,12 @@
-// @flow
-import React from 'react';
-import TVEventHandler from './TVEventHandler';
+/*
+ * @flow
+ */
+
 import type {TVRemoteEvent} from '../../Types/CoreEventTypes';
+
 import {type EventSubscription} from '../../vendor/emitter/EventEmitter';
+import TVEventHandler from './TVEventHandler';
+import React from 'react';
 
 
 const useTVEventHandler = (handleEvent: (evt: TVRemoteEvent) => void) => {

package/Libraries/Components/TabBarIOS/RCTTabBarNativeComponent.js

@@ -5,12 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
- * @flow
+ * @noflow
  */
 
 'use strict';
 
-const requireNativeComponent = require('../../ReactNative/requireNativeComponent').default;
+const requireNativeComponent =
+  require('../../ReactNative/requireNativeComponent').default;
 
 import type {ViewProps} from '../View/ViewPropTypes';
 import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';

package/Libraries/Components/TabBarIOS/TabBarIOS.ios.js

@@ -5,70 +5,21 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
- * @flow
+ * @noflow
  */
 
 'use strict';
 
-const React = require('react');
-const StyleSheet = require('../../StyleSheet/StyleSheet');
-const TabBarItemIOS = require('./TabBarItemIOS');
+import type {TabBarIOSProps} from './TabBarIOSProps';
 
+const StyleSheet = require('../../StyleSheet/StyleSheet');
 const RCTTabBar = require('./RCTTabBarNativeComponent');
-
-import type {ViewProps} from '../View/ViewPropTypes';
-import type {ColorValue} from '../../StyleSheet/StyleSheetTypes';
-
-type Props = $ReadOnly<{|
-  ...ViewProps,
-
-  /**
-   * Color of text on unselected tabs
-   */
-  unselectedTintColor?: ColorValue,
-
-  /**
-   * Color of the currently selected tab icon
-   */
-  tintColor?: ColorValue,
-
-  /**
-   * Color of unselected tab icons. Available since iOS 10.
-   */
-  unselectedItemTintColor?: ColorValue,
-
-  /**
-   * Background color of the tab bar
-   */
-  barTintColor?: ColorValue,
-
-  /**
-   * The style of the tab bar. Supported values are 'default', 'black'.
-   * Use 'black' instead of setting `barTintColor` to black. This produces
-   * a tab bar with the native iOS style with higher translucency.
-   */
-  barStyle?: ?('default' | 'black'),
-
-  /**
-   * A Boolean value that indicates whether the tab bar is translucent
-   */
-  translucent?: ?boolean,
-
-  /**
-   * Specifies tab bar item positioning. Available values are:
-   * - fill - distributes items across the entire width of the tab bar
-   * - center - centers item in the available tab bar space
-   * - auto (default) - distributes items dynamically according to the
-   * user interface idiom. In a horizontally compact environment (e.g. iPhone 5)
-   * this value defaults to `fill`, in a horizontally regular one (e.g. iPad)
-   * it defaults to center.
-   */
-  itemPositioning?: ?('fill' | 'center' | 'auto'),
-|}>;
+const TabBarItemIOS = require('./TabBarItemIOS');
+const React = require('react');
 
 let showedDeprecationWarning = true;
 
-class TabBarIOS extends React.Component<Props> {
+class TabBarIOS extends React.Component<TabBarIOSProps> {
   static Item: React.Node = TabBarItemIOS;
 
   componentDidMount() {

package/Libraries/Components/TabBarIOS/{TabBarIOS.android.js → TabBarIOS.js}

@@ -10,15 +10,18 @@
 
 'use strict';
 
+import type {TabBarIOSProps} from './TabBarIOSProps';
+
 import React from 'react';
+
 const StyleSheet = require('../../StyleSheet/StyleSheet');
-const TabBarItemIOS = require('./TabBarItemIOS');
 const View = require('../View/View');
+const TabBarItemIOS = require('./TabBarItemIOS');
 
 let showedDeprecationWarning = false;
 
-class DummyTabBarIOS extends React.Component<$FlowFixMeProps> {
-  static Item = TabBarItemIOS;
+class TabBarIOS extends React.Component<TabBarIOSProps> {
+  static Item: any = TabBarItemIOS;
 
   componentDidMount() {
     if (!showedDeprecationWarning) {
@@ -31,7 +34,7 @@ class DummyTabBarIOS extends React.Component<$FlowFixMeProps> {
     }
   }
 
-  render() {
+  render(): React.Node {
     return (
       <View style={[this.props.style, styles.tabGroup]}>
         {this.props.children}
@@ -46,4 +49,4 @@ const styles = StyleSheet.create({
   },
 });
 
-module.exports = DummyTabBarIOS;
+module.exports = TabBarIOS;

package/Libraries/Components/TabBarIOS/TabBarIOSProps.js

@@ -0,0 +1,52 @@
+/*
+ * @flow
+ */
+
+import type { ViewProps } from '../View/ViewPropTypes';
+
+export type TabBarIOSProps = $ReadOnly<{|
+  ...ViewProps,
+
+  /**
+   * Color of text on unselected tabs
+   */
+  unselectedTintColor?: string,
+
+  /**
+   * Color of the currently selected tab icon
+   */
+  tintColor?: string,
+
+  /**
+   * Color of unselected tab icons. Available since iOS 10.
+   */
+  unselectedItemTintColor?: string,
+
+  /**
+   * Background color of the tab bar
+   */
+  barTintColor?: string,
+
+  /**
+   * The style of the tab bar. Supported values are 'default', 'black'.
+   * Use 'black' instead of setting `barTintColor` to black. This produces
+   * a tab bar with the native iOS style with higher translucency.
+   */
+  barStyle?: ?('default' | 'black'),
+
+  /**
+   * A Boolean value that indicates whether the tab bar is translucent
+   */
+  translucent?: ?boolean,
+
+  /**
+   * Specifies tab bar item positioning. Available values are:
+   * - fill - distributes items across the entire width of the tab bar
+   * - center - centers item in the available tab bar space
+   * - auto (default) - distributes items dynamically according to the
+   * user interface idiom. In a horizontally compact environment (e.g. iPhone 5)
+   * this value defaults to `fill`, in a horizontally regular one (e.g. iPad)
+   * it defaults to center.
+   */
+  itemPositioning?: ?('fill' | 'center' | 'auto'),
+|}>;

package/Libraries/Components/TabBarIOS/{TabBarItemIOS.android.js → TabBarItemIOS.js}

@@ -5,13 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
+ * @noflow
  */
 
 'use strict';
 
 import React from 'react';
-const View = require('../View/View');
+
 const StyleSheet = require('../../StyleSheet/StyleSheet');
+const View = require('../View/View');
 
 let showedDeprecationWarning = false;
 

package/Libraries/Components/Touchable/TVTouchable.js

@@ -10,15 +10,16 @@
 
 'use strict';
 
-import invariant from 'invariant';
-import tagForComponentOrHandle from '../TV/tagForComponentOrHandle';
 import type {
   BlurEvent,
   FocusEvent,
   PressEvent,
 } from '../../Types/CoreEventTypes';
+
 import Platform from '../../Utilities/Platform';
+import tagForComponentOrHandle from '../TV/tagForComponentOrHandle';
 import {tvFocusEventHandler} from '../TV/TVFocusEventHandler';
+import invariant from 'invariant';
 
 type TVTouchableConfig = $ReadOnly<{|
   getDisabled: () => boolean,
@@ -38,9 +39,9 @@ export default class TVTouchable {
     if (!Platform.isTV) {
       return;
     }
-    const _tvtouchable = this;
+    const _tvtouchable = this; // eslint-disable-line consistent-this
     this._viewTag = tagForComponentOrHandle(component);
-    tvFocusEventHandler.register(this._viewTag, tvData => {
+    tvFocusEventHandler?.register(this._viewTag, tvData => {
       if (!_tvtouchable._enabled) {
         return;
       }
@@ -65,6 +66,6 @@ export default class TVTouchable {
 
   destroy(): void {
     this._enabled = false;
-    tvFocusEventHandler.unregister(this._viewTag);
+    tvFocusEventHandler?.unregister(this._viewTag);
   }
 }

package/Libraries/Components/Touchable/Touchable.js

@@ -12,16 +12,15 @@ import type {EdgeInsetsProp} from '../../StyleSheet/EdgeInsetsPropType';
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
 import type {PressEvent} from '../../Types/CoreEventTypes';
 
-import ReactNative from '../../Renderer/shims/ReactNative';
 import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import UIManager from '../../ReactNative/UIManager';
 import Platform from '../../Utilities/Platform';
 import SoundManager from '../Sound/SoundManager';
+import tagForComponentOrHandle from '../TV/tagForComponentOrHandle';
 import {tvFocusEventHandler} from '../TV/TVFocusEventHandler';
 import BoundingDimensions from './BoundingDimensions';
 import Position from './Position';
 import * as React from 'react';
-import tagForComponentOrHandle from '../TV/tagForComponentOrHandle';
 
 const extractSingleTouch = (nativeEvent: {
   +changedTouches: $ReadOnlyArray<PressEvent['nativeEvent']>,
@@ -374,7 +373,7 @@ const LONG_PRESS_ALLOWED_MOVEMENT = 10;
  * @lends Touchable.prototype
  */
 const TouchableMixin = {
-  componentDidMount: function () {
+  componentDidMount: function (this: any) {
     if (!Platform.isTV) {
       return;
     }

package/Libraries/Components/Touchable/TouchableBounce.js

@@ -16,8 +16,8 @@ import Pressability, {
   type PressabilityConfig,
 } from '../../Pressability/Pressability';
 import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
-import TVTouchable from './TVTouchable';
 import Platform from '../../Utilities/Platform';
+import TVTouchable from './TVTouchable';
 import * as React from 'react';
 
 type Props = $ReadOnly<{|
@@ -228,13 +228,10 @@ class TouchableBounce extends React.Component<Props, State> {
         },
       });
     }
-  }
-
-  componentDidUpdate(prevProps: Props, prevState: State) {
     this.state.pressability.configure(this._createPressabilityConfig());
   }
 
-  componentDidMount(): mixed {
+  componentDidUpdate(prevProps: Props, prevState: State) {
     this.state.pressability.configure(this._createPressabilityConfig());
   }
 

package/Libraries/Components/Touchable/TouchableHighlight.js

@@ -9,6 +9,7 @@
  */
 
 import type {ColorValue} from '../../StyleSheet/StyleSheet';
+import type {TVParallaxPropertiesType} from '../TV/TVViewPropTypes';
 import typeof TouchableWithoutFeedback from './TouchableWithoutFeedback';
 
 import View from '../../Components/View/View';
@@ -17,10 +18,9 @@ import Pressability, {
 } from '../../Pressability/Pressability';
 import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import StyleSheet, {type ViewStyleProp} from '../../StyleSheet/StyleSheet';
-import TVTouchable from './TVTouchable';
 import Platform from '../../Utilities/Platform';
-import type {TVParallaxPropertiesType} from '../TV/TVViewPropTypes';
 import tagForComponentOrHandle from '../TV/tagForComponentOrHandle';
+import TVTouchable from './TVTouchable';
 import * as React from 'react';
 
 type AndroidProps = $ReadOnly<{|
@@ -46,8 +46,7 @@ type Props = $ReadOnly<{|
   ...React.ElementConfig<TouchableWithoutFeedback>,
   ...AndroidProps,
   ...TVProps,
-  ...ViewProps,
-
+  //...ViewProps,
   activeOpacity?: ?number,
   underlayColor?: ?ColorValue,
   style?: ?ViewStyleProp,

package/Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -8,7 +8,6 @@
  * @format
  */
 
-import type {TVParallaxPropertiesType} from '../TV/TVViewPropTypes';
 import type {
   AccessibilityActionEvent,
   AccessibilityActionInfo,
@@ -23,14 +22,14 @@ import type {
   LayoutEvent,
   PressEvent,
 } from '../../Types/CoreEventTypes';
-import {Platform} from '../../Utilities/Platform';
+import type {TVParallaxPropertiesType} from '../TV/TVViewPropTypes';
 
 import View from '../../Components/View/View';
 import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import usePressability from '../../Pressability/usePressability';
+import useTVEventHandler from '../TV/useTVEventHandler';
 import * as React from 'react';
 import {useMemo} from 'react';
-import useTVEventHandler from '../TV/useTVEventHandler';
 
 type Props = $ReadOnly<{|
   accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
@@ -204,7 +203,7 @@ module.exports = function TouchableWithoutFeedback(props: Props): React.Node {
     eventHandlers || {};
 
   useTVEventHandler(evt => {
-    if (props.disabled || props.ariaDisabled) {
+    if (props.disabled === true || props['aria-disabled'] === true) {
       return;
     }
     if (evt.eventType === 'focus') {