@office-iss/react-native-win32 0.71.4 → 0.72.0-preview.1

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.win32.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/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/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/TraceUpdateOverlay/TraceUpdateOverlay.js

@@ -0,0 +1,189 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * 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
+ * @format
+ */
+
+import type {Overlay} from './TraceUpdateOverlayNativeComponent';
+
+import UIManager from '../../ReactNative/UIManager';
+import processColor from '../../StyleSheet/processColor';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Platform from '../../Utilities/Platform';
+import View from '../View/View';
+import TraceUpdateOverlayNativeComponent, {
+  Commands,
+} from './TraceUpdateOverlayNativeComponent';
+import * as React from 'react';
+
+type AgentEvents = {
+  drawTraceUpdates: [Array<{node: TraceNode, color: string}>],
+  disableTraceUpdates: [],
+};
+
+interface Agent {
+  addListener<Event: $Keys<AgentEvents>>(
+    event: Event,
+    listener: (...AgentEvents[Event]) => void,
+  ): void;
+  removeListener(event: $Keys<AgentEvents>, listener: () => void): void;
+}
+
+type PublicInstance = {
+  measure?: (
+    (
+      x: number,
+      y: number,
+      width: number,
+      height: number,
+      left: number,
+      top: number,
+    ) => void,
+  ) => void,
+};
+
+type TraceNode =
+  | PublicInstance
+  | {
+      canonical?:
+        | PublicInstance // TODO: remove this variant when syncing the new version of the renderer from React to React Native.
+        | {
+            publicInstance?: PublicInstance,
+          },
+    };
+
+type ReactDevToolsGlobalHook = {
+  on: (eventName: string, (agent: Agent) => void) => void,
+  off: (eventName: string, (agent: Agent) => void) => void,
+  reactDevtoolsAgent: Agent,
+};
+
+const {useEffect, useRef, useState} = React;
+const hook: ReactDevToolsGlobalHook = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+const isNativeComponentReady =
+  Platform.OS === 'android' &&
+  UIManager.hasViewManagerConfig('TraceUpdateOverlay');
+let devToolsAgent: ?Agent;
+
+export default function TraceUpdateOverlay(): React.Node {
+  const [overlayDisabled, setOverlayDisabled] = useState(false);
+  // This effect is designed to be explicitly shown here to avoid re-subscribe from the same
+  // overlay component.
+  useEffect(() => {
+    if (!isNativeComponentReady) {
+      return;
+    }
+
+    function attachToDevtools(agent: Agent) {
+      devToolsAgent = agent;
+      agent.addListener('drawTraceUpdates', onAgentDrawTraceUpdates);
+      agent.addListener('disableTraceUpdates', onAgentDisableTraceUpdates);
+    }
+
+    function subscribe() {
+      hook?.on('react-devtools', attachToDevtools);
+      if (hook?.reactDevtoolsAgent) {
+        attachToDevtools(hook.reactDevtoolsAgent);
+      }
+    }
+
+    function unsubscribe() {
+      hook?.off('react-devtools', attachToDevtools);
+      const agent = devToolsAgent;
+      if (agent != null) {
+        agent.removeListener('drawTraceUpdates', onAgentDrawTraceUpdates);
+        agent.removeListener('disableTraceUpdates', onAgentDisableTraceUpdates);
+        devToolsAgent = null;
+      }
+    }
+
+    function onAgentDrawTraceUpdates(
+      nodesToDraw: Array<{node: TraceNode, color: string}> = [],
+    ) {
+      // If overlay is disabled before, now it's enabled.
+      setOverlayDisabled(false);
+
+      const newFramesToDraw: Array<Promise<Overlay>> = [];
+      nodesToDraw.forEach(({node, color}) => {
+        // `canonical.publicInstance` => Fabric
+        // TODO: remove this check when syncing the new version of the renderer from React to React Native.
+        // `canonical` => Legacy Fabric
+        // `node` => Legacy renderer
+        const component =
+          (node.canonical && node.canonical.publicInstance) ??
+          node.canonical ??
+          node;
+        if (!component || !component.measure) {
+          return;
+        }
+        const frameToDrawPromise = new Promise<Overlay>(resolve => {
+          // The if statement here is to make flow happy
+          if (component.measure) {
+            // TODO(T145522797): We should refactor this to use `getBoundingClientRect` when Paper is no longer supported.
+            component.measure((x, y, width, height, left, top) => {
+              resolve({
+                rect: {left, top, width, height},
+                color: processColor(color),
+              });
+            });
+          }
+        });
+        newFramesToDraw.push(frameToDrawPromise);
+      });
+      Promise.all(newFramesToDraw).then(
+        results => {
+          if (nativeComponentRef.current != null) {
+            Commands.draw(
+              nativeComponentRef.current,
+              JSON.stringify(
+                results.filter(
+                  ({rect, color}) => rect.width >= 0 && rect.height >= 0,
+                ),
+              ),
+            );
+          }
+        },
+        err => {
+          console.error(`Failed to measure updated traces. Error: ${err}`);
+        },
+      );
+    }
+
+    function onAgentDisableTraceUpdates() {
+      // When trace updates are disabled from the backend, we won't receive draw events until it's enabled by the next draw. We can safely remove the overlay as it's not needed now.
+      setOverlayDisabled(true);
+    }
+
+    subscribe();
+    return unsubscribe;
+  }, []); // Only run once when the overlay initially rendered
+
+  const nativeComponentRef =
+    useRef<?React.ElementRef<typeof TraceUpdateOverlayNativeComponent>>(null);
+
+  return (
+    !overlayDisabled &&
+    isNativeComponentReady && (
+      <View pointerEvents="none" style={styles.overlay}>
+        <TraceUpdateOverlayNativeComponent
+          ref={nativeComponentRef}
+          style={styles.overlay}
+        />
+      </View>
+    )
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+});

package/Libraries/Components/TraceUpdateOverlay/TraceUpdateOverlayNativeComponent.js

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * 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
+ * @format
+ */
+
+import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
+import type {ProcessedColorValue} from '../../StyleSheet/processColor';
+import type {ViewProps} from '../View/ViewPropTypes';
+
+import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
+import codegenNativeComponent from '../../Utilities/codegenNativeComponent';
+import * as React from 'react';
+
+type NativeProps = $ReadOnly<{|
+  ...ViewProps,
+|}>;
+export type TraceUpdateOverlayNativeComponentType = HostComponent<NativeProps>;
+export type Overlay = {
+  rect: {left: number, top: number, width: number, height: number},
+  color: ?ProcessedColorValue,
+};
+
+interface NativeCommands {
+  +draw: (
+    viewRef: React.ElementRef<TraceUpdateOverlayNativeComponentType>,
+    // TODO(T144046177): Ideally we can pass array of Overlay, but currently
+    // Array type is not supported in RN codegen for building native commands.
+    overlays: string,
+  ) => void;
+}
+
+export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: ['draw'],
+});
+
+export default (codegenNativeComponent<NativeProps>(
+  'TraceUpdateOverlay',
+): HostComponent<NativeProps>);

package/Libraries/Components/View/ReactNativeStyleAttributes.js

@@ -46,12 +46,25 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   flexWrap: true,
   gap: true,
   height: true,
+  inset: true,
+  insetBlock: true,
+  insetBlockEnd: true,
+  insetBlockStart: true,
+  insetInline: true,
+  insetInlineEnd: true,
+  insetInlineStart: true,
   justifyContent: true,
   left: true,
   margin: true,
+  marginBlock: true,
+  marginBlockEnd: true,
+  marginBlockStart: true,
   marginBottom: true,
   marginEnd: true,
   marginHorizontal: true,
+  marginInline: true,
+  marginInlineEnd: true,
+  marginInlineStart: true,
   marginLeft: true,
   marginRight: true,
   marginStart: true,
@@ -63,9 +76,15 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   minWidth: true,
   overflow: true,
   padding: true,
+  paddingBlock: true,
+  paddingBlockEnd: true,
+  paddingBlockStart: true,
   paddingBottom: true,
   paddingEnd: true,
   paddingHorizontal: true,
+  paddingInline: true,
+  paddingInlineEnd: true,
+  paddingInlineStart: true,
   paddingLeft: true,
   paddingRight: true,
   paddingStart: true,
@@ -98,6 +117,9 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
    */
   backfaceVisibility: true,
   backgroundColor: colorAttributes,
+  borderBlockColor: colorAttributes,
+  borderBlockEndColor: colorAttributes,
+  borderBlockStartColor: colorAttributes,
   borderBottomColor: colorAttributes,
   borderBottomEndRadius: true,
   borderBottomLeftRadius: true,
@@ -106,10 +128,14 @@ const ReactNativeStyleAttributes: {[string]: AnyAttributeType, ...} = {
   borderColor: colorAttributes,
   borderCurve: true,
   borderEndColor: colorAttributes,
+  borderEndEndRadius: true,
+  borderEndStartRadius: true,
   borderLeftColor: colorAttributes,
   borderRadius: true,
   borderRightColor: colorAttributes,
   borderStartColor: colorAttributes,
+  borderStartEndRadius: true,
+  borderStartStartRadius: true,
   borderStyle: true,
   borderTopColor: colorAttributes,
   borderTopEndRadius: true,

package/Libraries/Components/View/View.js

@@ -57,63 +57,89 @@ const View: React.AbstractComponent<
       nativeID,
       pointerEvents,
       role,
-      style,
       tabIndex,
       ...otherProps
     }: ViewProps,
     forwardedRef,
   ) => {
+    const hasTextAncestor = React.useContext(TextAncestor);
     const _accessibilityLabelledBy =
       ariaLabelledBy?.split(/\s*,\s*/g) ?? accessibilityLabelledBy;
 
-    const _accessibilityState = {
-      busy: ariaBusy ?? accessibilityState?.busy,
-      checked: ariaChecked ?? accessibilityState?.checked,
-      disabled: ariaDisabled ?? accessibilityState?.disabled,
-      expanded: ariaExpanded ?? accessibilityState?.expanded,
-      selected: ariaSelected ?? 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,
+      };
+    }
+    let _accessibilityValue;
+    if (
+      accessibilityValue != null ||
+      ariaValueMax != null ||
+      ariaValueMin != null ||
+      ariaValueNow != null ||
+      ariaValueText != null
+    ) {
+      _accessibilityValue = {
+        max: ariaValueMax ?? accessibilityValue?.max,
+        min: ariaValueMin ?? accessibilityValue?.min,
+        now: ariaValueNow ?? accessibilityValue?.now,
+        text: ariaValueText ?? accessibilityValue?.text,
+      };
+    }
 
-    const _accessibilityValue = {
-      max: ariaValueMax ?? accessibilityValue?.max,
-      min: ariaValueMin ?? accessibilityValue?.min,
-      now: ariaValueNow ?? accessibilityValue?.now,
-      text: ariaValueText ?? accessibilityValue?.text,
-    };
+    // $FlowFixMe[underconstrained-implicit-instantiation]
+    let style = flattenStyle(otherProps.style);
 
-    const flattenedStyle = flattenStyle(style);
-    const newPointerEvents = flattenedStyle?.pointerEvents || pointerEvents;
+    const newPointerEvents = style?.pointerEvents || pointerEvents;
 
-    return (
-      <TextAncestor.Provider value={false}>
-        <ViewNativeComponent
-          {...otherProps}
-          accessibilityLiveRegion={
-            ariaLive === 'off' ? 'none' : ariaLive ?? accessibilityLiveRegion
-          }
-          accessibilityLabel={ariaLabel ?? accessibilityLabel}
-          focusable={tabIndex !== undefined ? !tabIndex : focusable}
-          accessibilityState={_accessibilityState}
-          accessibilityRole={
-            role ? getAccessibilityRoleFromRole(role) : accessibilityRole
-          }
-          accessibilityElementsHidden={
-            ariaHidden ?? accessibilityElementsHidden
-          }
-          accessibilityLabelledBy={_accessibilityLabelledBy}
-          accessibilityValue={_accessibilityValue}
-          importantForAccessibility={
-            ariaHidden === true
-              ? 'no-hide-descendants'
-              : importantForAccessibility
-          }
-          nativeID={id ?? nativeID}
-          style={style}
-          pointerEvents={newPointerEvents}
-          ref={forwardedRef}
-        />
-      </TextAncestor.Provider>
+    const actualView = (
+      <ViewNativeComponent
+        {...otherProps}
+        accessibilityLiveRegion={
+          ariaLive === 'off' ? 'none' : ariaLive ?? accessibilityLiveRegion
+        }
+        accessibilityLabel={ariaLabel ?? accessibilityLabel}
+        focusable={tabIndex !== undefined ? !tabIndex : focusable}
+        accessibilityState={_accessibilityState}
+        accessibilityRole={
+          role ? getAccessibilityRoleFromRole(role) : accessibilityRole
+        }
+        accessibilityElementsHidden={ariaHidden ?? accessibilityElementsHidden}
+        accessibilityLabelledBy={_accessibilityLabelledBy}
+        accessibilityValue={_accessibilityValue}
+        importantForAccessibility={
+          ariaHidden === true
+            ? 'no-hide-descendants'
+            : importantForAccessibility
+        }
+        nativeID={id ?? nativeID}
+        style={style}
+        pointerEvents={newPointerEvents}
+        ref={forwardedRef}
+      />
     );
+
+    if (hasTextAncestor) {
+      return (
+        <TextAncestor.Provider value={false}>
+          {actualView}
+        </TextAncestor.Provider>
+      );
+    }
+
+    return actualView;
   },
 );
 

package/Libraries/Components/View/View.win32.js

@@ -61,7 +61,6 @@ const View: React.AbstractComponent<
       nativeID,
       pointerEvents,
       role,
-      style,
       tabIndex,
       ...otherProps
     }: ViewProps,
@@ -70,23 +69,43 @@ const View: React.AbstractComponent<
     const _accessibilityLabelledBy =
       ariaLabelledBy?.split(/\s*,\s*/g) ?? accessibilityLabelledBy;
 
-    const _accessibilityState = {
-      busy: ariaBusy ?? accessibilityState?.busy,
-      checked: ariaChecked ?? accessibilityState?.checked,
-      disabled: ariaDisabled ?? accessibilityState?.disabled,
-      expanded: ariaExpanded ?? accessibilityState?.expanded,
-      selected: ariaSelected ?? 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,
+      };
+    }
+    let _accessibilityValue;
+    if (
+      accessibilityValue != null ||
+      ariaValueMax != null ||
+      ariaValueMin != null ||
+      ariaValueNow != null ||
+      ariaValueText != null
+    ) {
+      _accessibilityValue = {
+        max: ariaValueMax ?? accessibilityValue?.max,
+        min: ariaValueMin ?? accessibilityValue?.min,
+        now: ariaValueNow ?? accessibilityValue?.now,
+        text: ariaValueText ?? accessibilityValue?.text,
+      };
+    }
 
-    const _accessibilityValue = {
-      max: ariaValueMax ?? accessibilityValue?.max,
-      min: ariaValueMin ?? accessibilityValue?.min,
-      now: ariaValueNow ?? accessibilityValue?.now,
-      text: ariaValueText ?? accessibilityValue?.text,
-    };
+    // $FlowFixMe[underconstrained-implicit-instantiation]
+    let style = flattenStyle(otherProps.style);
 
-    const flattenedStyle = flattenStyle(style);
-    const newPointerEvents = flattenedStyle?.pointerEvents || pointerEvents;
+    const newPointerEvents = style?.pointerEvents || pointerEvents;
 
     const _keyDown = (event: KeyEvent) => {
       if (otherProps.keyDownEvents && event.isPropagationStopped() !== true) {
@@ -141,7 +160,9 @@ const View: React.AbstractComponent<
     const childrenWithImportantForAccessibility = children => {
       return React.Children.map(children, child => {
         if (React.isValidElement(child)) {
+          // $FlowFixMe[incompatible-use]
           if (child.props.children) {
+            // $FlowFixMe[incompatible-type]
             return React.cloneElement(child, {
               accessible: false,
               children: childrenWithImportantForAccessibility(
@@ -149,6 +170,7 @@ const View: React.AbstractComponent<
               ),
             });
           } else {
+            // $FlowFixMe[incompatible-type]
             return React.cloneElement(child, {accessible: false});
           }
         }