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

package/Libraries/Components/TextInput/TextInput.js

@@ -9,6 +9,7 @@
  */
 
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {____TextStyle_Internal as TextStyleInternal} from '../../StyleSheet/StyleSheetTypes';
 import type {
   PressEvent,
   ScrollEvent,
@@ -17,6 +18,7 @@ import type {
 import type {ViewProps} from '../View/ViewPropTypes';
 import type {TextInputType} from './TextInput.flow';
 
+import * as ReactNativeFeatureFlags from '../../../src/private/featureflags/ReactNativeFeatureFlags';
 import usePressability from '../../Pressability/usePressability';
 import warnOnce from '../../Utilities/warnOnce';
 import flattenStyle from '../../StyleSheet/flattenStyle';
@@ -958,8 +960,188 @@ export type Props = $ReadOnly<{|
   value?: ?Stringish,
 |}>;
 
+type ViewCommands = $NonMaybeType<
+  | typeof AndroidTextInputCommands
+  | typeof RCTMultilineTextInputNativeCommands
+  | typeof RCTSinglelineTextInputNativeCommands,
+>;
+
+type LastNativeSelection = {|
+  selection: Selection,
+  mostRecentEventCount: number,
+|};
+
 const emptyFunctionThatReturnsTrue = () => true;
 
+/**
+ * This hook handles the synchronization between the state of the text input
+ * in native and in JavaScript. This is necessary due to the asynchronous nature
+ * of text input events.
+ */
+function useTextInputStateSynchronization_STATE({
+  props,
+  mostRecentEventCount,
+  selection,
+  inputRef,
+  text,
+  viewCommands,
+}: {
+  props: Props,
+  mostRecentEventCount: number,
+  selection: ?Selection,
+  inputRef: React.RefObject<null | React.ElementRef<HostComponent<mixed>>>,
+  text: string,
+  viewCommands: ViewCommands,
+}): {
+  setLastNativeText: string => void,
+  setLastNativeSelection: LastNativeSelection => void,
+} {
+  const [lastNativeText, setLastNativeText] = useState<?Stringish>(props.value);
+  const [lastNativeSelectionState, setLastNativeSelection] =
+    useState<LastNativeSelection>({
+      selection: {start: -1, end: -1},
+      mostRecentEventCount: mostRecentEventCount,
+    });
+
+  const lastNativeSelection = lastNativeSelectionState.selection;
+
+  // This is necessary in case native updates the text and JS decides
+  // that the update should be ignored and we should stick with the value
+  // that we have in JS.
+  useLayoutEffect(() => {
+    const nativeUpdate: {text?: string, selection?: Selection} = {};
+
+    if (lastNativeText !== props.value && typeof props.value === 'string') {
+      nativeUpdate.text = props.value;
+      setLastNativeText(props.value);
+    }
+
+    if (
+      selection &&
+      lastNativeSelection &&
+      (lastNativeSelection.start !== selection.start ||
+        lastNativeSelection.end !== selection.end)
+    ) {
+      nativeUpdate.selection = selection;
+      setLastNativeSelection({selection, mostRecentEventCount});
+    }
+
+    if (Object.keys(nativeUpdate).length === 0) {
+      return;
+    }
+
+    if (inputRef.current != null) {
+      viewCommands.setTextAndSelection(
+        inputRef.current,
+        mostRecentEventCount,
+        text,
+        selection?.start ?? -1,
+        selection?.end ?? -1,
+      );
+    }
+  }, [
+    mostRecentEventCount,
+    inputRef,
+    props.value,
+    props.defaultValue,
+    lastNativeText,
+    selection,
+    lastNativeSelection,
+    text,
+    viewCommands,
+  ]);
+
+  return {setLastNativeText, setLastNativeSelection};
+}
+
+/**
+ * This hook handles the synchronization between the state of the text input
+ * in native and in JavaScript. This is necessary due to the asynchronous nature
+ * of text input events.
+ */
+function useTextInputStateSynchronization_REFS({
+  props,
+  mostRecentEventCount,
+  selection,
+  inputRef,
+  text,
+  viewCommands,
+}: {
+  props: Props,
+  mostRecentEventCount: number,
+  selection: ?Selection,
+  inputRef: React.RefObject<null | React.ElementRef<HostComponent<mixed>>>,
+  text: string,
+  viewCommands: ViewCommands,
+}): {
+  setLastNativeText: string => void,
+  setLastNativeSelection: LastNativeSelection => void,
+} {
+  const lastNativeTextRef = useRef<?Stringish>(props.value);
+  const lastNativeSelectionRef = useRef<LastNativeSelection>({
+    selection: {start: -1, end: -1},
+    mostRecentEventCount: mostRecentEventCount,
+  });
+
+  // This is necessary in case native updates the text and JS decides
+  // that the update should be ignored and we should stick with the value
+  // that we have in JS.
+  useLayoutEffect(() => {
+    const nativeUpdate: {text?: string, selection?: Selection} = {};
+
+    const lastNativeSelection = lastNativeSelectionRef.current.selection;
+
+    if (
+      lastNativeTextRef.current !== props.value &&
+      typeof props.value === 'string'
+    ) {
+      nativeUpdate.text = props.value;
+      lastNativeTextRef.current = props.value;
+    }
+
+    if (
+      selection &&
+      lastNativeSelection &&
+      (lastNativeSelection.start !== selection.start ||
+        lastNativeSelection.end !== selection.end)
+    ) {
+      nativeUpdate.selection = selection;
+      lastNativeSelectionRef.current = {selection, mostRecentEventCount};
+    }
+
+    if (Object.keys(nativeUpdate).length === 0) {
+      return;
+    }
+
+    if (inputRef.current != null) {
+      viewCommands.setTextAndSelection(
+        inputRef.current,
+        mostRecentEventCount,
+        text,
+        selection?.start ?? -1,
+        selection?.end ?? -1,
+      );
+    }
+  }, [
+    mostRecentEventCount,
+    inputRef,
+    props.value,
+    props.defaultValue,
+    selection,
+    text,
+    viewCommands,
+  ]);
+
+  return {
+    setLastNativeText: lastNativeText => {
+      lastNativeTextRef.current = lastNativeText;
+    },
+    setLastNativeSelection: lastNativeSelection => {
+      lastNativeSelectionRef.current = lastNativeSelection;
+    },
+  };
+}
+
 /**
  * A foundational component for inputting text into the app via a
  * keyboard. Props provide configurability for several features, such as
@@ -1090,7 +1272,6 @@ function InternalTextInput(props: Props): React.Node {
 
   const inputRef = useRef<null | React.ElementRef<HostComponent<mixed>>>(null);
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   const selection: ?Selection =
     propsSelection == null
       ? null
@@ -1099,28 +1280,6 @@ function InternalTextInput(props: Props): React.Node {
           end: propsSelection.end ?? propsSelection.start,
         };
 
-  const [mostRecentEventCount, setMostRecentEventCount] = useState<number>(0);
-  const [lastNativeText, setLastNativeText] = useState<?Stringish>(props.value);
-  const [lastNativeSelectionState, setLastNativeSelection] = useState<{|
-    selection: Selection,
-    mostRecentEventCount: number,
-  |}>({
-    selection: {start: -1, end: -1},
-    mostRecentEventCount: mostRecentEventCount,
-  });
-
-  const lastNativeSelection = lastNativeSelectionState.selection;
-
-  let viewCommands;
-  if (AndroidTextInputCommands) {
-    viewCommands = AndroidTextInputCommands;
-  } else {
-    viewCommands =
-      props.multiline === true
-        ? RCTMultilineTextInputNativeCommands
-        : RCTSinglelineTextInputNativeCommands;
-  }
-
   const text =
     typeof props.value === 'string'
       ? props.value
@@ -1128,51 +1287,26 @@ function InternalTextInput(props: Props): React.Node {
         ? props.defaultValue
         : '';
 
-  // This is necessary in case native updates the text and JS decides
-  // that the update should be ignored and we should stick with the value
-  // that we have in JS.
-  useLayoutEffect(() => {
-    const nativeUpdate: {text?: string, selection?: Selection} = {};
+  const viewCommands =
+    AndroidTextInputCommands ||
+    (props.multiline === true
+      ? RCTMultilineTextInputNativeCommands
+      : RCTSinglelineTextInputNativeCommands);
 
-    if (lastNativeText !== props.value && typeof props.value === 'string') {
-      nativeUpdate.text = props.value;
-      setLastNativeText(props.value);
-    }
-
-    if (
-      selection &&
-      lastNativeSelection &&
-      (lastNativeSelection.start !== selection.start ||
-        lastNativeSelection.end !== selection.end)
-    ) {
-      nativeUpdate.selection = selection;
-      setLastNativeSelection({selection, mostRecentEventCount});
-    }
-
-    if (Object.keys(nativeUpdate).length === 0) {
-      return;
-    }
-
-    if (inputRef.current != null) {
-      viewCommands.setTextAndSelection(
-        inputRef.current,
-        mostRecentEventCount,
-        text,
-        selection?.start ?? -1,
-        selection?.end ?? -1,
-      );
-    }
-  }, [
-    mostRecentEventCount,
-    inputRef,
-    props.value,
-    props.defaultValue,
-    lastNativeText,
-    selection,
-    lastNativeSelection,
-    text,
-    viewCommands,
-  ]);
+  const [mostRecentEventCount, setMostRecentEventCount] = useState<number>(0);
+  const useTextInputStateSynchronization =
+    ReactNativeFeatureFlags.useRefsForTextInputState()
+      ? useTextInputStateSynchronization_REFS
+      : useTextInputStateSynchronization_STATE;
+  const {setLastNativeText, setLastNativeSelection} =
+    useTextInputStateSynchronization({
+      props,
+      inputRef,
+      mostRecentEventCount,
+      selection,
+      text,
+      viewCommands,
+    });
 
   useLayoutEffect(() => {
     const inputRefValue = inputRef.current;
@@ -1188,7 +1322,7 @@ function InternalTextInput(props: Props): React.Node {
         }
       };
     }
-  }, [inputRef]);
+  }, []);
 
   const setLocalRef = useCallback(
     (instance: TextInputInstance | null) => {
@@ -1402,12 +1536,29 @@ function InternalTextInput(props: Props): React.Node {
     };
   }
 
-  const style = flattenStyle<TextStyleProp>(props.style);
+  // Keep the original (potentially nested) style when possible, as React can diff these more efficiently
+  let _style = props.style;
+  const flattenedStyle = flattenStyle<TextStyleProp>(props.style);
+  if (flattenedStyle != null) {
+    let overrides: ?{...TextStyleInternal} = null;
+    if (typeof flattenedStyle?.fontWeight === 'number') {
+      overrides = overrides || ({}: {...TextStyleInternal});
+      overrides.fontWeight =
+        // $FlowFixMe[incompatible-cast]
+        (flattenedStyle.fontWeight.toString(): TextStyleInternal['fontWeight']);
+    }
 
-  if (typeof style?.fontWeight === 'number') {
-    // $FlowFixMe[prop-missing]
-    // $FlowFixMe[cannot-write]
-    style.fontWeight = style?.fontWeight.toString();
+    if (flattenedStyle.verticalAlign != null) {
+      overrides = overrides || ({}: {...TextStyleInternal});
+      overrides.textAlignVertical =
+        verticalAlignToTextAlignVerticalMap[flattenedStyle.verticalAlign];
+      overrides.verticalAlign = undefined;
+    }
+
+    if (overrides != null) {
+      // $FlowFixMe[incompatible-type]
+      _style = [_style, overrides];
+    }
   }
 
   if (Platform.OS === 'ios') {
@@ -1418,10 +1569,10 @@ function InternalTextInput(props: Props): React.Node {
 
     const useMultilineDefaultStyle =
       props.multiline === true &&
-      (style == null ||
-        (style.padding == null &&
-          style.paddingVertical == null &&
-          style.paddingTop == null));
+      (flattenedStyle == null ||
+        (flattenedStyle.padding == null &&
+          flattenedStyle.paddingVertical == null &&
+          flattenedStyle.paddingTop == null));
 
     if (props.multiline === true && Platform.isTVOS) {
       warnOnce(
@@ -1455,7 +1606,7 @@ function InternalTextInput(props: Props): React.Node {
         selectionColor={selectionColor}
         style={StyleSheet.compose(
           useMultilineDefaultStyle ? styles.multilineDefault : null,
-          style,
+          _style,
         )}
         text={text}
       />
@@ -1522,7 +1673,7 @@ function InternalTextInput(props: Props): React.Node {
         onScroll={_onScroll}
         onSelectionChange={_onSelectionChange}
         placeholder={placeholder}
-        style={style}
+        style={_style}
         text={text}
         textBreakStrategy={props.textBreakStrategy}
       />
@@ -1650,20 +1801,6 @@ const ExportedForwardRef: React.AbstractComponent<
   },
   forwardedRef: ReactRefSetter<TextInputInstance>,
 ) {
-  // $FlowFixMe[underconstrained-implicit-instantiation]
-  let style = flattenStyle(restProps.style);
-
-  if (style?.verticalAlign != null) {
-    // $FlowFixMe[prop-missing]
-    // $FlowFixMe[cannot-write]
-    style.textAlignVertical =
-      // $FlowFixMe[invalid-computed-prop]
-      verticalAlignToTextAlignVerticalMap[style.verticalAlign];
-    // $FlowFixMe[prop-missing]
-    // $FlowFixMe[cannot-write]
-    delete style.verticalAlign;
-  }
-
   return (
     <InternalTextInput
       allowFontScaling={allowFontScaling}
@@ -1700,7 +1837,6 @@ const ExportedForwardRef: React.AbstractComponent<
       }
       {...restProps}
       forwardedRef={forwardedRef}
-      style={style}
     />
   );
 });

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

package/Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -11,6 +11,8 @@
 import type {AnyAttributeType} from '../../Renderer/shims/ReactNativeTypes';
 
 import processAspectRatio from '../../StyleSheet/processAspectRatio';
+import processBackgroundImage from '../../StyleSheet/processBackgroundImage';
+import processBoxShadow from '../../StyleSheet/processBoxShadow';
 import processColor from '../../StyleSheet/processColor';
 import processFilter from '../../StyleSheet/processFilter';
 import processFontVariant from '../../StyleSheet/processFontVariant';
@@ -120,6 +122,26 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
    */
   experimental_filter: {process: processFilter},
 
+  /**
+   * MixBlendMode
+   */
+  experimental_mixBlendMode: true,
+
+  /**
+   * Isolation
+   */
+  isolation: true,
+
+  /*
+   * BoxShadow
+   */
+  experimental_boxShadow: {process: processBoxShadow},
+
+  /**
+   * Linear Gradient
+   */
+  experimental_backgroundImage: {process: processBackgroundImage},
+
   /**
    * View
    */

package/Libraries/Components/View/ReactNativeViewAttributes.js

@@ -22,6 +22,8 @@ const UIView = {
   accessibilityValue: true,
   accessibilityHint: true,
   accessibilityLanguage: true,
+  accessibilityShowsLargeContentViewer: true,
+  accessibilityLargeContentTitle: true,
   importantForAccessibility: true,
   nativeID: true,
   testID: true,

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

@@ -319,6 +319,21 @@ export interface AccessibilityPropsIOS {
    * @platform ios
    */
   accessibilityLanguage?: string | undefined;
+
+  /**
+   * A Boolean value that indicates whether or not to show the item in the large content viewer.
+   * Available on iOS 13.0+
+   * https://reactnative.dev/docs/accessibility#accessibilityshowslargecontentviewer
+   * @platform ios
+   */
+  accessibilityShowsLargeContentViewer?: boolean | undefined;
+
+  /**
+   * When `accessibilityShowsLargeContentViewer` is set, this string will be used as title for the large content viewer.
+   * https://reactnative.dev/docs/accessibility#accessibilitylargecontenttitle
+   * @platform ios
+   */
+  accessibilityLargeContentTitle?: string | undefined;
 }
 
 export type Role =

package/Libraries/Components/View/ViewNativeComponent.js

@@ -35,6 +35,11 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           nextFocusLeft: true,
           nextFocusRight: true,
           nextFocusUp: true,
+          tvFocusable: true,
+          trapFocusUp: true,
+          trapFocusDown: true,
+          trapFocusLeft: true,
+          trapFocusRight: true,
 
           borderRadius: true,
           borderTopLeftRadius: true,
@@ -94,7 +99,6 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           borderBlockStartColor: {
             process: require('../../StyleSheet/processColor').default,
           },
-
           focusable: true,
           overflow: true,
           backfaceVisibility: true,

package/Libraries/Components/View/ViewPropTypes.js

@@ -381,6 +381,20 @@ type IOSViewProps = $ReadOnly<{|
    */
   accessibilityViewIsModal?: ?boolean,
 
+  /**
+   * @platform ios
+   *
+   * See https://reactnative.dev/docs/view#accessibilityshowslargecontentviewer
+   */
+  accessibilityShowsLargeContentViewer?: ?boolean,
+
+  /**
+   * @platform ios
+   *
+   * See https://reactnative.dev/docs/view#accessibilitylargecontenttitle
+   */
+  accessibilityLargeContentTitle?: ?string,
+
   /**
    * The aria-modal attribute indicates content contained within a modal with aria-modal="true"
    * should be accessible to the user.