react-native-windows 0.71.10 → 0.72.0-preview.2

package/Libraries/Components/TextInput/TextInput.windows.js

@@ -27,15 +27,20 @@ import StyleSheet, {
 import Text from '../../Text/Text';
 import TextAncestor from '../../Text/TextAncestor';
 import Platform from '../../Utilities/Platform';
-import setAndForwardRef from '../../Utilities/setAndForwardRef';
+import useMergeRefs from '../../Utilities/useMergeRefs';
 import TextInputState from './TextInputState';
 import invariant from 'invariant';
 import nullthrows from 'nullthrows';
 import * as React from 'react';
-
-const {useLayoutEffect, useRef, useState} = React;
+import {useCallback, useLayoutEffect, useRef, useState} from 'react';
 
 type ReactRefSetter<T> = {current: null | T, ...} | ((ref: null | T) => mixed);
+type TextInputInstance = React.ElementRef<HostComponent<mixed>> & {
+  +clear: () => void,
+  +isFocused: () => boolean,
+  +getNativeRef: () => ?React.ElementRef<HostComponent<mixed>>,
+  +setSelection: (start: number, end: number) => void,
+};
 
 let AndroidTextInput;
 let AndroidTextInputCommands;
@@ -360,9 +365,6 @@ type IOSProps = $ReadOnly<{|
   /**
    * Give the keyboard and the system information about the
    * expected semantic meaning for the content that users enter.
-   * `autoComplete` property accomplishes same behavior and is recommended as its supported by both platforms.
-   * Avoid using both `autoComplete` and `textContentType`, you can use `Platform.select` for differing platform behaviors.
-   * For backwards compatibility, when both set, `textContentType` takes precedence on iOS.
    * @platform ios
    */
   textContentType?: ?TextContentType,
@@ -597,6 +599,14 @@ export type Props = $ReadOnly<{|
   ...AndroidProps,
   ...WindowsProps, // [Windows]
 
+  /**
+   * String to be read by screenreaders to indicate an error state. The acceptable parameters
+   * of accessibilityErrorMessage is a string. Setting accessibilityInvalid to true activates
+   * the error message. Setting accessibilityInvalid to false removes the error message.
+   */
+  accessibilityErrorMessage?: ?Stringish,
+  accessibilityInvalid?: ?boolean,
+
   /**
    * Can tell `TextInput` to automatically capitalize certain characters.
    *
@@ -652,9 +662,7 @@ export type Props = $ReadOnly<{|
    */
   editable?: ?boolean,
 
-  forwardedRef?: ?ReactRefSetter<
-    React.ElementRef<HostComponent<mixed>> & ImperativeMethods,
-  >,
+  forwardedRef?: ?ReactRefSetter<TextInputInstance>,
 
   /**
    * `enterKeyHint` defines what action label (or icon) to present for the enter key on virtual keyboards.
@@ -992,13 +1000,6 @@ export type Props = $ReadOnly<{|
   value?: ?Stringish,
 |}>;
 
-type ImperativeMethods = $ReadOnly<{|
-  clear: () => void,
-  isFocused: () => boolean,
-  getNativeRef: () => ?React.ElementRef<HostComponent<mixed>>,
-  setSelection: (start: number, end: number) => void,
-|}>;
-
 const emptyFunctionThatReturnsTrue = () => true;
 
 /**
@@ -1113,6 +1114,18 @@ const emptyFunctionThatReturnsTrue = () => true;
  *
  */
 function InternalTextInput(props: Props): React.Node {
+  const {
+    'aria-busy': ariaBusy,
+    'aria-checked': ariaChecked,
+    'aria-disabled': ariaDisabled,
+    'aria-expanded': ariaExpanded,
+    'aria-selected': ariaSelected,
+    accessibilityState,
+    id,
+    tabIndex,
+    ...otherProps
+  } = props;
+
   const inputRef = useRef<null | React.ElementRef<HostComponent<mixed>>>(null);
 
   // Android sends a "onTextChanged" event followed by a "onSelectionChanged" event, for
@@ -1234,74 +1247,74 @@ function InternalTextInput(props: Props): React.Node {
     }
   }, [inputRef]);
 
-  function clear(): void {
-    if (inputRef.current != null) {
-      viewCommands.setTextAndSelection(
-        inputRef.current,
-        mostRecentEventCount,
-        '',
-        0,
-        0,
-      );
-    }
-  }
-
-  function setSelection(start: number, end: number): void {
-    if (inputRef.current != null) {
-      viewCommands.setTextAndSelection(
-        inputRef.current,
-        mostRecentEventCount,
-        null,
-        start,
-        end,
-      );
-    }
-  }
-
-  // TODO: Fix this returning true on null === null, when no input is focused
-  function isFocused(): boolean {
-    return TextInputState.currentlyFocusedInput() === inputRef.current;
-  }
-
-  function getNativeRef(): ?React.ElementRef<HostComponent<mixed>> {
-    return inputRef.current;
-  }
-
-  const _setNativeRef = setAndForwardRef({
-    getForwardedRef: () => props.forwardedRef,
-    setLocalRef: ref => {
-      inputRef.current = ref;
+  const setLocalRef = useCallback(
+    (instance: TextInputInstance | null) => {
+      inputRef.current = instance;
 
       /*
-        Hi reader from the future. I'm sorry for this.
-
-        This is a hack. Ideally we would forwardRef to the underlying
-        host component. However, since TextInput has it's own methods that can be
-        called as well, if we used the standard forwardRef then these
-        methods wouldn't be accessible and thus be a breaking change.
-
-        We have a couple of options of how to handle this:
-        - Return a new ref with everything we methods from both. This is problematic
-          because we need React to also know it is a host component which requires
-          internals of the class implementation of the ref.
-        - Break the API and have some other way to call one set of the methods or
-          the other. This is our long term approach as we want to eventually
-          get the methods on host components off the ref. So instead of calling
-          ref.measure() you might call ReactNative.measure(ref). This would hopefully
-          let the ref for TextInput then have the methods like `.clear`. Or we do it
-          the other way and make it TextInput.clear(textInputRef) which would be fine
-          too. Either way though is a breaking change that is longer term.
-        - Mutate this ref. :( Gross, but accomplishes what we need in the meantime
-          before we can get to the long term breaking change.
-        */
-      if (ref) {
-        ref.clear = clear;
-        ref.isFocused = isFocused;
-        ref.getNativeRef = getNativeRef;
-        ref.setSelection = setSelection;
+      Hi reader from the future. I'm sorry for this.
+
+      This is a hack. Ideally we would forwardRef to the underlying
+      host component. However, since TextInput has it's own methods that can be
+      called as well, if we used the standard forwardRef then these
+      methods wouldn't be accessible and thus be a breaking change.
+
+      We have a couple of options of how to handle this:
+      - Return a new ref with everything we methods from both. This is problematic
+        because we need React to also know it is a host component which requires
+        internals of the class implementation of the ref.
+      - Break the API and have some other way to call one set of the methods or
+        the other. This is our long term approach as we want to eventually
+        get the methods on host components off the ref. So instead of calling
+        ref.measure() you might call ReactNative.measure(ref). This would hopefully
+        let the ref for TextInput then have the methods like `.clear`. Or we do it
+        the other way and make it TextInput.clear(textInputRef) which would be fine
+        too. Either way though is a breaking change that is longer term.
+      - Mutate this ref. :( Gross, but accomplishes what we need in the meantime
+        before we can get to the long term breaking change.
+      */
+      if (instance != null) {
+        // $FlowFixMe[incompatible-use] - See the explanation above.
+        Object.assign(instance, {
+          clear(): void {
+            if (inputRef.current != null) {
+              viewCommands.setTextAndSelection(
+                inputRef.current,
+                mostRecentEventCount,
+                '',
+                0,
+                0,
+              );
+            }
+          },
+          // TODO: Fix this returning true on null === null, when no input is focused
+          isFocused(): boolean {
+            return TextInputState.currentlyFocusedInput() === inputRef.current;
+          },
+          getNativeRef(): ?React.ElementRef<HostComponent<mixed>> {
+            return inputRef.current;
+          },
+          setSelection(start: number, end: number): void {
+            if (inputRef.current != null) {
+              viewCommands.setTextAndSelection(
+                inputRef.current,
+                mostRecentEventCount,
+                null,
+                start,
+                end,
+              );
+            }
+          },
+        });
       }
     },
-  });
+    [mostRecentEventCount, viewCommands],
+  );
+
+  const ref = useMergeRefs<TextInputInstance | null>(
+    setLocalRef,
+    props.forwardedRef,
+  );
 
   const _onChange = (event: ChangeEvent) => {
     const currentText = event.nativeEvent.text;
@@ -1404,6 +1417,12 @@ function InternalTextInput(props: Props): React.Node {
   }
 
   const accessible = props.accessible !== false;
+
+  const accessibilityErrorMessage =
+    props.accessibilityInvalid === true
+      ? props.accessibilityErrorMessage
+      : null;
+
   const focusable = props.focusable !== false;
 
   const config = React.useMemo(
@@ -1490,13 +1509,26 @@ function InternalTextInput(props: Props): React.Node {
     props.onKeyUpCapture && props.onKeyUpCapture(event);
   };
 
-  const _accessibilityState = {
-    busy: props['aria-busy'] ?? props.accessibilityState?.busy,
-    checked: props['aria-checked'] ?? props.accessibilityState?.checked,
-    disabled: props['aria-disabled'] ?? props.accessibilityState?.disabled,
-    expanded: props['aria-expanded'] ?? props.accessibilityState?.expanded,
-    selected: props['aria-selected'] ?? props.accessibilityState?.selected,
-  };
+  let _accessibilityState;
+  if (
+    accessibilityState != null ||
+    ariaBusy != null ||
+    ariaChecked != null ||
+    ariaDisabled != null ||
+    ariaExpanded != null ||
+    ariaSelected != null
+  ) {
+    _accessibilityState = {
+      busy: ariaBusy ?? accessibilityState?.busy,
+      checked: ariaChecked ?? accessibilityState?.checked,
+      disabled: ariaDisabled ?? accessibilityState?.disabled,
+      expanded: ariaExpanded ?? accessibilityState?.expanded,
+      selected: ariaSelected ?? accessibilityState?.selected,
+    };
+  }
+
+  // $FlowFixMe[underconstrained-implicit-instantiation]
+  let style = flattenStyle(props.style);
 
   if (Platform.OS === 'ios') {
     const RCTTextInputView =
@@ -1504,10 +1536,7 @@ function InternalTextInput(props: Props): React.Node {
         ? RCTMultilineTextInputView
         : RCTSinglelineTextInputView;
 
-    const style =
-      props.multiline === true
-        ? StyleSheet.flatten([styles.multilineInput, props.style])
-        : props.style;
+    style = props.multiline === true ? [styles.multilineInput, style] : style;
 
     const useOnChangeSync =
       (props.unstable_onChangeSync || props.unstable_onChangeTextSync) &&
@@ -1515,16 +1544,19 @@ function InternalTextInput(props: Props): React.Node {
 
     textInput = (
       <RCTTextInputView
-        ref={_setNativeRef}
-        {...props}
+        // $FlowFixMe[incompatible-type] - Figure out imperative + forward refs.
+        ref={ref}
+        {...otherProps}
         {...eventHandlers}
-        accessible={accessible}
+        accessibilityErrorMessage={accessibilityErrorMessage}
         accessibilityState={_accessibilityState}
+        accessible={accessible}
         submitBehavior={submitBehavior}
         caretHidden={caretHidden}
         dataDetectorTypes={props.dataDetectorTypes}
-        focusable={focusable}
+        focusable={tabIndex !== undefined ? !tabIndex : focusable}
         mostRecentEventCount={mostRecentEventCount}
+        nativeID={id ?? props.nativeID}
         onBlur={_onBlur}
         onKeyPressSync={props.unstable_onKeyPressSync}
         onChange={_onChange}
@@ -1540,7 +1572,6 @@ function InternalTextInput(props: Props): React.Node {
       />
     );
   } else if (Platform.OS === 'android') {
-    const style = [props.style];
     const autoCapitalize = props.autoCapitalize || 'sentences';
     const _accessibilityLabelledBy =
       props?.['aria-labelledby'] ?? props?.accessibilityLabelledBy;
@@ -1565,19 +1596,22 @@ function InternalTextInput(props: Props): React.Node {
        * match up exactly with the props for TextInput. This will need to get
        * fixed */
       <AndroidTextInput
-        ref={_setNativeRef}
-        {...props}
+        // $FlowFixMe[incompatible-type] - Figure out imperative + forward refs.
+        ref={ref}
+        {...otherProps}
         {...eventHandlers}
-        accessible={accessible}
+        accessibilityErrorMessage={accessibilityErrorMessage}
         accessibilityState={_accessibilityState}
         accessibilityLabelledBy={_accessibilityLabelledBy}
+        accessible={accessible}
         autoCapitalize={autoCapitalize}
         submitBehavior={submitBehavior}
         caretHidden={caretHidden}
         children={children}
         disableFullscreenUI={props.disableFullscreenUI}
-        focusable={focusable}
+        focusable={tabIndex !== undefined ? !tabIndex : focusable}
         mostRecentEventCount={mostRecentEventCount}
+        nativeID={id ?? props.nativeID}
         numberOfLines={props.rows ?? props.numberOfLines}
         onBlur={_onBlur}
         onChange={_onChange}
@@ -1601,7 +1635,8 @@ function InternalTextInput(props: Props): React.Node {
   else if (Platform.OS === 'windows') {
     textInput = (
       <WindowsTextInput
-        ref={_setNativeRef}
+        // $FlowFixMe[incompatible-type] - Figure out imperative + forward refs.
+        ref={ref}
         {...props}
         accessible={accessible}
         focusable={focusable}
@@ -1712,7 +1747,7 @@ const autoCompleteWebToTextContentTypeMap = {
 
 const ExportedForwardRef: React.AbstractComponent<
   React.ElementConfig<typeof InternalTextInput>,
-  React.ElementRef<HostComponent<mixed>> & ImperativeMethods,
+  TextInputInstance,
 > = React.forwardRef(function TextInput(
   {
     allowFontScaling = true,
@@ -1725,18 +1760,19 @@ const ExportedForwardRef: React.AbstractComponent<
     enterKeyHint,
     returnKeyType,
     inputMode,
+    showSoftInputOnFocus,
     keyboardType,
     ...restProps
   },
-  forwardedRef: ReactRefSetter<
-    React.ElementRef<HostComponent<mixed>> & ImperativeMethods,
-  >,
+  forwardedRef: ReactRefSetter<TextInputInstance>,
 ) {
-  const style = flattenStyle(restProps.style);
+  // $FlowFixMe[underconstrained-implicit-instantiation]
+  let style = flattenStyle(restProps.style);
 
   if (style?.verticalAlign != null) {
     style.textAlignVertical =
       verticalAlignToTextAlignVerticalMap[style.verticalAlign];
+    delete style.verticalAlign;
   }
 
   return (
@@ -1751,22 +1787,21 @@ const ExportedForwardRef: React.AbstractComponent<
       keyboardType={
         inputMode ? inputModeToKeyboardTypeMap[inputMode] : keyboardType
       }
+      showSoftInputOnFocus={
+        inputMode == null ? showSoftInputOnFocus : inputMode !== 'none'
+      }
       autoComplete={
         Platform.OS === 'android'
-          ? // $FlowFixMe[invalid-computed-prop]
-            // $FlowFixMe[prop-missing]
+          ? // $FlowFixMe
             autoCompleteWebToAutoCompleteAndroidMap[autoComplete] ??
             autoComplete
           : undefined
       }
       textContentType={
-        textContentType != null
-          ? textContentType
-          : Platform.OS === 'ios' &&
-            autoComplete &&
-            autoComplete in autoCompleteWebToTextContentTypeMap
-          ? // $FlowFixMe[invalid-computed-prop]
-            // $FlowFixMe[prop-missing]
+        Platform.OS === 'ios' &&
+        autoComplete &&
+        autoComplete in autoCompleteWebToTextContentTypeMap
+          ? // $FlowFixMe
             autoCompleteWebToTextContentTypeMap[autoComplete]
           : textContentType
       }
@@ -1777,6 +1812,8 @@ const ExportedForwardRef: React.AbstractComponent<
   );
 });
 
+ExportedForwardRef.displayName = 'TextInput';
+
 /**
  * Switch to `deprecated-react-native-prop-types` for compatibility with future
  * releases. This is deprecated and will be removed in the future.

package/Libraries/Components/TextInput/WindowsTextInputNativeComponent.js

@@ -5,7 +5,7 @@
 
 import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
 
-const requireNativeComponent = require('../../ReactNative/requireNativeComponent');
+import requireNativeComponent from '../../ReactNative/requireNativeComponent';
 import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
 import type {TextInputNativeCommands} from './TextInputNativeCommands';
 type NativeType = HostComponent<mixed>;

package/Libraries/Components/Touchable/Touchable.d.ts

@@ -13,7 +13,7 @@ import {GestureResponderEvent} from '../../Types/CoreEventTypes';
 
 /**
  * //FIXME: need to find documentation on which component is a TTouchable and can implement that interface
- * @see React.DOMAtributes
+ * @see React.DOMAttributes
  */
 export interface Touchable {
   onTouchStart?: ((event: GestureResponderEvent) => void) | undefined;

package/Libraries/Components/Touchable/Touchable.flow.js

@@ -99,7 +99,30 @@ import * as React from 'react';
  *   }
  */
 
-// Default amount "active" region protrudes beyond box
+/**
+ * Touchable states.
+ */
+
+const States = {
+  NOT_RESPONDER: 'NOT_RESPONDER', // Not the responder
+  RESPONDER_INACTIVE_PRESS_IN: 'RESPONDER_INACTIVE_PRESS_IN', // Responder, inactive, in the `PressRect`
+  RESPONDER_INACTIVE_PRESS_OUT: 'RESPONDER_INACTIVE_PRESS_OUT', // Responder, inactive, out of `PressRect`
+  RESPONDER_ACTIVE_PRESS_IN: 'RESPONDER_ACTIVE_PRESS_IN', // Responder, active, in the `PressRect`
+  RESPONDER_ACTIVE_PRESS_OUT: 'RESPONDER_ACTIVE_PRESS_OUT', // Responder, active, out of `PressRect`
+  RESPONDER_ACTIVE_LONG_PRESS_IN: 'RESPONDER_ACTIVE_LONG_PRESS_IN', // Responder, active, in the `PressRect`, after long press threshold
+  RESPONDER_ACTIVE_LONG_PRESS_OUT: 'RESPONDER_ACTIVE_LONG_PRESS_OUT', // Responder, active, out of `PressRect`, after long press threshold
+  ERROR: 'ERROR',
+};
+
+type State =
+  | typeof States.NOT_RESPONDER
+  | typeof States.RESPONDER_INACTIVE_PRESS_IN
+  | typeof States.RESPONDER_INACTIVE_PRESS_OUT
+  | typeof States.RESPONDER_ACTIVE_PRESS_IN
+  | typeof States.RESPONDER_ACTIVE_PRESS_OUT
+  | typeof States.RESPONDER_ACTIVE_LONG_PRESS_IN
+  | typeof States.RESPONDER_ACTIVE_LONG_PRESS_OUT
+  | typeof States.ERROR;
 
 /**
  * By convention, methods prefixed with underscores are meant to be @private,
@@ -200,9 +223,12 @@ interface TouchableMixinType {
    * @return {object} State object to be placed inside of
    * `this.state.touchable`.
    */
-  touchableGetInitialState: () => $TEMPORARY$object<{|
-    touchable: $TEMPORARY$object<{|responderID: null, touchState: void|}>,
-  |}>;
+  touchableGetInitialState: () => {
+    touchable: {
+      touchState: ?State,
+      responderID: ?PressEvent['currentTarget'],
+    },
+  };
 
   // ==== Hooks to Gesture Responder system ====
   /**

package/Libraries/Components/Touchable/Touchable.js

@@ -396,9 +396,12 @@ const TouchableMixin = {
    * @return {object} State object to be placed inside of
    * `this.state.touchable`.
    */
-  touchableGetInitialState: function (): $TEMPORARY$object<{|
-    touchable: $TEMPORARY$object<{|responderID: null, touchState: void|}>,
-  |}> {
+  touchableGetInitialState: function (): {
+    touchable: {
+      touchState: ?State,
+      responderID: ?PressEvent['currentTarget'],
+    },
+  } {
     return {
       touchable: {touchState: undefined, responderID: null},
     };

package/Libraries/Components/Touchable/Touchable.windows.js

@@ -401,9 +401,12 @@ const TouchableMixin = {
    * @return {object} State object to be placed inside of
    * `this.state.touchable`.
    */
-  touchableGetInitialState: function (): $TEMPORARY$object<{|
-    touchable: $TEMPORARY$object<{|responderID: null, touchState: void|}>,
-  |}> {
+  touchableGetInitialState: function (): {
+    touchable: {
+      touchState: ?State,
+      responderID: ?PressEvent['currentTarget'],
+    },
+  } {
     return {
       touchable: {touchState: undefined, responderID: null},
     };

package/Libraries/Components/Touchable/TouchableHighlight.js

@@ -277,7 +277,7 @@ class TouchableHighlight extends React.Component<Props, State> {
   }
 
   render(): React.Node {
-    const child = React.Children.only(this.props.children);
+    const child = React.Children.only<$FlowFixMe>(this.props.children);
 
     // BACKWARD-COMPATIBILITY: Focus and blur events were never supported before
     // adopting `Pressability`, so preserve that behavior.

package/Libraries/Components/Touchable/TouchableHighlight.windows.js

@@ -279,7 +279,7 @@ class TouchableHighlight extends React.Component<Props, State> {
   }
 
   render(): React.Node {
-    const child = React.Children.only(this.props.children);
+    const child = React.Children.only<$FlowFixMe>(this.props.children);
 
     // BACKWARD-COMPATIBILITY: Focus and blur events were never supported before
     // adopting `Pressability`, so preserve that behavior.
@@ -324,6 +324,7 @@ class TouchableHighlight extends React.Component<Props, State> {
         accessibilityValue={accessibilityValue}
         accessibilityActions={this.props.accessibilityActions}
         onAccessibilityAction={this.props.onAccessibilityAction}
+        disabled={this.props.disabled}
         importantForAccessibility={
           this.props['aria-hidden'] === true
             ? 'no-hide-descendants'

package/Libraries/Components/Touchable/TouchableNativeFeedback.js

@@ -239,8 +239,8 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
   }
 
   render(): React.Node {
-    const element = React.Children.only(this.props.children);
-    const children = [element.props.children];
+    const element = React.Children.only<$FlowFixMe>(this.props.children);
+    const children: Array<React.Node> = [element.props.children];
     if (__DEV__) {
       if (element.type === View) {
         children.push(

package/Libraries/Components/Touchable/TouchableOpacity.js

@@ -206,6 +206,7 @@ class TouchableOpacity extends React.Component<Props, State> {
   }
 
   _getChildStyleOpacityWithDefault(): number {
+    // $FlowFixMe[underconstrained-implicit-instantiation]
     const opacity = flattenStyle(this.props.style)?.opacity;
     return typeof opacity === 'number' ? opacity : 1;
   }
@@ -301,7 +302,9 @@ class TouchableOpacity extends React.Component<Props, State> {
     this.state.pressability.configure(this._createPressabilityConfig());
     if (
       this.props.disabled !== prevProps.disabled ||
+      // $FlowFixMe[underconstrained-implicit-instantiation]
       flattenStyle(prevProps.style)?.opacity !==
+        // $FlowFixMe[underconstrained-implicit-instantiation]
         flattenStyle(this.props.style)?.opacity
     ) {
       this._opacityInactive(250);

package/Libraries/Components/Touchable/TouchableOpacity.windows.js

@@ -208,6 +208,7 @@ class TouchableOpacity extends React.Component<Props, State> {
   }
 
   _getChildStyleOpacityWithDefault(): number {
+    // $FlowFixMe[underconstrained-implicit-instantiation]
     const opacity = flattenStyle(this.props.style)?.opacity;
     return typeof opacity === 'number' ? opacity : 1;
   }
@@ -280,6 +281,7 @@ class TouchableOpacity extends React.Component<Props, State> {
         accessibilityElementsHidden={
           this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden
         }
+        disabled={this.props.disabled}
         style={[this.props.style, {opacity: this.state.anim}]}
         nativeID={this.props.nativeID}
         testID={this.props.testID}
@@ -315,7 +317,9 @@ class TouchableOpacity extends React.Component<Props, State> {
     this.state.pressability.configure(this._createPressabilityConfig());
     if (
       this.props.disabled !== prevProps.disabled ||
+      // $FlowFixMe[underconstrained-implicit-instantiation]
       flattenStyle(prevProps.style)?.opacity !==
+        // $FlowFixMe[underconstrained-implicit-instantiation]
         flattenStyle(this.props.style)?.opacity
     ) {
       this._opacityInactive(250);

package/Libraries/Components/Touchable/TouchableWithoutFeedback.d.ts

@@ -40,7 +40,7 @@ export interface TouchableWithoutFeedbackProps
   extends TouchableWithoutFeedbackPropsIOS,
     TouchableWithoutFeedbackPropsAndroid,
     AccessibilityProps {
-  children?: React.ReactNode;
+  children?: React.ReactNode | undefined;
 
   /**
    * Delay in ms, from onPressIn, before onLongPress is called.

package/Libraries/Components/Touchable/TouchableWithoutFeedback.js

@@ -121,8 +121,8 @@ class TouchableWithoutFeedback extends React.Component<Props, State> {
   };
 
   render(): React.Node {
-    const element = React.Children.only(this.props.children);
-    const children = [element.props.children];
+    const element = React.Children.only<$FlowFixMe>(this.props.children);
+    const children: Array<React.Node> = [element.props.children];
     const ariaLive = this.props['aria-live'];
 
     if (__DEV__) {

package/Libraries/Components/Touchable/TouchableWithoutFeedback.windows.js

@@ -136,8 +136,8 @@ class TouchableWithoutFeedback extends React.Component<Props, State> {
   };
 
   render(): React.Node {
-    const element = React.Children.only(this.props.children);
-    const children = [element.props.children];
+    const element = React.Children.only<$FlowFixMe>(this.props.children);
+    const children: Array<React.Node> = [element.props.children];
     const ariaLive = this.props['aria-live'];
 
     if (__DEV__) {