react-native-tvos 0.75.2-0rc0 → 0.76.0-0rc0

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,10 +80,10 @@ class TVTextScrollView extends React.Component<{
 
   componentWillUnmount() {
     const myTag = tagForComponentOrHandle(this);
-    tvFocusEventHandler.unregister(myTag);
+    tvFocusEventHandler?.unregister(myTag);
   }
 
-  render(): React.Node | React.Element<string> {
+  render(): $FlowFixMe {
     const props: $FlowFixMe = {
       ...this.props,
       tvParallaxProperties: {

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

@@ -90,6 +90,8 @@ type DataDetectorTypes =
   | 'none'
   | 'all';
 
+export type SubmitBehavior = 'submit' | 'blurAndSubmit' | 'newline';
+
 /**
  * DocumentSelectionState is responsible for maintaining selection information
  * for a document.
@@ -649,11 +651,39 @@ export interface TextInputProps
   autoFocus?: boolean | undefined;
 
   /**
-   * If true, the text field will blur when submitted.
-   * The default value is true.
+   * If `true`, the text field will blur when submitted.
+   * The default value is true for single-line fields and false for
+   * multiline fields. Note that for multiline fields, setting `blurOnSubmit`
+   * to `true` means that pressing return will blur the field and trigger the
+   * `onSubmitEditing` event instead of inserting a newline into the field.
+   *
+   * @deprecated
+   * Note that `submitBehavior` now takes the place of `blurOnSubmit` and will
+   * override any behavior defined by `blurOnSubmit`.
+   * @see submitBehavior
    */
   blurOnSubmit?: boolean | undefined;
 
+  /**
+   * When the return key is pressed,
+   *
+   * For single line inputs:
+   *
+   * - `'newline`' defaults to `'blurAndSubmit'`
+   * - `undefined` defaults to `'blurAndSubmit'`
+   *
+   * For multiline inputs:
+   *
+   * - `'newline'` adds a newline
+   * - `undefined` defaults to `'newline'`
+   *
+   * For both single line and multiline inputs:
+   *
+   * - `'submit'` will only send a submit event and not blur the input
+   * - `'blurAndSubmit`' will both blur the input and send a submit event
+   */
+  submitBehavior?: SubmitBehavior | undefined;
+
   /**
    * If true, caret is hidden. The default value is false.
    */