@office-iss/react-native-win32 0.0.0-canary.282 → 0.0.0-canary.284

package/Libraries/Image/nativeImageSource.js

@@ -12,7 +12,7 @@ import type {ImageURISource} from './ImageSource';
 
 import Platform from '../Utilities/Platform';
 
-type NativeImageSourceSpec = $ReadOnly<{|
+type NativeImageSourceSpec = $ReadOnly<{
   android?: string,
   ios?: string,
   default?: string,
@@ -21,7 +21,7 @@ type NativeImageSourceSpec = $ReadOnly<{|
   // https://reactnative.dev/docs/images#why-not-automatically-size-everything
   height: number,
   width: number,
-|}>;
+}>;
 
 /**
  * In hybrid apps, use `nativeImageSource` to access images that are already

package/Libraries/Inspector/ElementProperties.js

@@ -13,6 +13,8 @@
 import type {InspectorData} from '../Renderer/shims/ReactNativeTypes';
 import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
 
+import React from 'react';
+
 const TouchableHighlight = require('../Components/Touchable/TouchableHighlight');
 const TouchableWithoutFeedback = require('../Components/Touchable/TouchableWithoutFeedback');
 const View = require('../Components/View/View');
@@ -22,15 +24,14 @@ const Text = require('../Text/Text');
 const mapWithSeparator = require('../Utilities/mapWithSeparator');
 const BoxInspector = require('./BoxInspector');
 const StyleInspector = require('./StyleInspector');
-const React = require('react');
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   hierarchy: ?InspectorData['hierarchy'],
   style?: ?ViewStyleProp,
   frame?: ?Object,
   selection?: ?number,
   setSelection?: number => mixed,
-|}>;
+}>;
 
 class ElementProperties extends React.Component<Props> {
   render(): React.Node {

package/Libraries/Inspector/Inspector.js

@@ -19,6 +19,7 @@ import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
 import type {ReactDevToolsAgent} from '../Types/ReactDevToolsTypes';
 
 import SafeAreaView from '../../src/private/components/SafeAreaView_INTERNAL_DO_NOT_USE';
+import React from 'react';
 
 const View = require('../Components/View/View');
 const PressabilityDebug = require('../Pressability/PressabilityDebug');
@@ -29,7 +30,6 @@ const Platform = require('../Utilities/Platform');
 const getInspectorDataForViewAtPoint = require('./getInspectorDataForViewAtPoint');
 const InspectorOverlay = require('./InspectorOverlay');
 const InspectorPanel = require('./InspectorPanel');
-const React = require('react');
 
 const {useState} = React;
 

package/Libraries/Inspector/Inspector.win32.js

@@ -19,6 +19,7 @@ import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
 import type {ReactDevToolsAgent} from '../Types/ReactDevToolsTypes';
 
 import SafeAreaView from '../../src/private/components/SafeAreaView_INTERNAL_DO_NOT_USE';
+import React from 'react';
 
 const PressabilityDebug = require('../Pressability/PressabilityDebug');
 const ReactNative = require('../Renderer/shims/ReactNative').default;
@@ -29,7 +30,6 @@ const View = require('../Components/View/View');
 const getInspectorDataForViewAtPoint = require('./getInspectorDataForViewAtPoint');
 const InspectorOverlay = require('./InspectorOverlay');
 const InspectorPanel = require('./InspectorPanel');
-const React = require('react');
 
 const {useState} = React;
 

package/Libraries/Inspector/InspectorOverlay.js

@@ -13,15 +13,16 @@
 import type {PressEvent} from '../Types/CoreEventTypes';
 import type {InspectedElement} from './Inspector';
 
+import React from 'react';
+
 const View = require('../Components/View/View');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const ElementBox = require('./ElementBox');
-const React = require('react');
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   inspected?: ?InspectedElement,
   onTouchPoint: (locationX: number, locationY: number) => void,
-|}>;
+}>;
 
 function InspectorOverlay({inspected, onTouchPoint}: Props): React.Node {
   const findViewForTouchEvent = (e: PressEvent) => {

package/Libraries/Inspector/InspectorOverlay.win32.js

@@ -13,17 +13,17 @@
 import type {PressEvent} from '../Types/CoreEventTypes';
 import type {InspectedElement} from './Inspector';
 
+import React from 'react';
 // import Dimensions from '../Utilities/Dimensions'; [Win32]
 
 const View = require('../Components/View/View');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const ElementBox = require('./ElementBox');
-const React = require('react');
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   inspected?: ?InspectedElement,
   onTouchPoint: (locationX: number, locationY: number) => void,
-|}>;
+}>;
 
 function InspectorOverlay({inspected, onTouchPoint}: Props): React.Node {
   const findViewForTouchEvent = (e: PressEvent) => {

package/Libraries/Inspector/InspectorPanel.js

@@ -13,8 +13,9 @@
 import type {ElementsHierarchy, InspectedElement} from './Inspector';
 
 import SafeAreaView from '../Components/SafeAreaView/SafeAreaView';
+import React from 'react';
 
-const ScrollView = require('../Components/ScrollView/ScrollView');
+const ScrollView = require('../Components/ScrollView/ScrollView').default;
 const TouchableHighlight = require('../Components/Touchable/TouchableHighlight');
 const View = require('../Components/View/View');
 const StyleSheet = require('../StyleSheet/StyleSheet');
@@ -22,9 +23,8 @@ const Text = require('../Text/Text');
 const ElementProperties = require('./ElementProperties');
 const NetworkOverlay = require('./NetworkOverlay');
 const PerformanceOverlay = require('./PerformanceOverlay');
-const React = require('react');
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   devtoolsIsOpen: boolean,
   inspecting: boolean,
   setInspecting: (val: boolean) => void,
@@ -38,7 +38,7 @@ type Props = $ReadOnly<{|
   selection?: ?number,
   setSelection: number => mixed,
   inspected?: ?InspectedElement,
-|}>;
+}>;
 
 class InspectorPanel extends React.Component<Props> {
   renderWaiting(): React.Node {
@@ -107,11 +107,11 @@ class InspectorPanel extends React.Component<Props> {
   }
 }
 
-type InspectorPanelButtonProps = $ReadOnly<{|
+type InspectorPanelButtonProps = $ReadOnly<{
   onClick: (val: boolean) => void,
   pressed: boolean,
   title: string,
-|}>;
+}>;
 
 class InspectorPanelButton extends React.Component<InspectorPanelButtonProps> {
   render(): React.Node {

package/Libraries/Inspector/NetworkOverlay.js

@@ -12,7 +12,9 @@
 
 import type {RenderItemProps} from '@react-native/virtualized-lists';
 
-const ScrollView = require('../Components/ScrollView/ScrollView');
+import ScrollView from '../Components/ScrollView/ScrollView';
+import React from 'react';
+
 const TouchableHighlight = require('../Components/Touchable/TouchableHighlight');
 const View = require('../Components/View/View');
 const FlatList = require('../Lists/FlatList');
@@ -20,7 +22,6 @@ const XHRInterceptor = require('../Network/XHRInterceptor');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const Text = require('../Text/Text');
 const WebSocketInterceptor = require('../WebSocket/WebSocketInterceptor');
-const React = require('react');
 
 const LISTVIEW_CELL_HEIGHT = 15;
 
@@ -49,11 +50,11 @@ type NetworkRequestInfo = {
   ...
 };
 
-type Props = $ReadOnly<{||}>;
-type State = {|
+type Props = $ReadOnly<{}>;
+type State = {
   detailRowId: ?number,
   requests: Array<NetworkRequestInfo>,
-|};
+};
 
 function getStringByValue(value: any): string {
   if (value === undefined) {

package/Libraries/Inspector/PerformanceOverlay.js

@@ -10,11 +10,12 @@
 
 'use strict';
 
+import React from 'react';
+
 const View = require('../Components/View/View');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const Text = require('../Text/Text');
 const PerformanceLogger = require('../Utilities/GlobalPerformanceLogger');
-const React = require('react');
 
 class PerformanceOverlay extends React.Component<{...}> {
   render(): React.Node {

package/Libraries/Inspector/resolveBoxStyle.js

@@ -25,12 +25,12 @@ const I18nManager = require('../ReactNative/I18nManager');
 function resolveBoxStyle(
   prefix: string,
   style: Object,
-): ?$ReadOnly<{|
+): ?$ReadOnly<{
   bottom: number,
   left: number,
   right: number,
   top: number,
-|}> {
+}> {
   let hasParts = false;
   const result = {
     bottom: 0,

package/Libraries/Interaction/InteractionManager.js

@@ -13,7 +13,7 @@ import type {Task} from './TaskQueue';
 import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
 import EventEmitter from '../vendor/emitter/EventEmitter';
 
-const BatchedBridge = require('../BatchedBridge/BatchedBridge');
+const BatchedBridge = require('../BatchedBridge/BatchedBridge').default;
 const infoLog = require('../Utilities/infoLog');
 const TaskQueue = require('./TaskQueue');
 const invariant = require('invariant');
@@ -138,8 +138,9 @@ const InteractionManager = {
     _deleteInteractionSet.add(handle);
   },
 
+  // $FlowFixMe[unclear-type] unclear type of _emitter
   // $FlowFixMe[method-unbinding] added when improving typing for this parameters
-  addListener: (_emitter.addListener.bind(_emitter): $FlowFixMe),
+  addListener: _emitter.addListener.bind(_emitter) as Function,
 
   /**
    * A positive number will use setTimeout to schedule any tasks after the

package/Libraries/Interaction/PanResponder.js

@@ -124,7 +124,7 @@ const currentCentroidY = TouchHistoryMath.currentCentroidY;
  * [PanResponder example in RNTester](https://github.com/facebook/react-native/blob/HEAD/packages/rn-tester/js/examples/PanResponder/PanResponderExample.js)
  */
 
-export type GestureState = {|
+export type GestureState = {
   /**
    * ID of the gestureState - persisted as long as there at least one touch on screen
    */
@@ -181,7 +181,7 @@ export type GestureState = {|
    * @private
    */
   _accountsForMovesUpTo: number,
-|};
+};
 
 type ActiveCallback = (
   event: PressEvent,
@@ -190,7 +190,7 @@ type ActiveCallback = (
 
 type PassiveCallback = (event: PressEvent, gestureState: GestureState) => mixed;
 
-export type PanHandlers = {|
+export type PanHandlers = {
   onMoveShouldSetResponder: (event: PressEvent) => boolean,
   onMoveShouldSetResponderCapture: (event: PressEvent) => boolean,
   onResponderEnd: (event: PressEvent) => void,
@@ -203,9 +203,9 @@ export type PanHandlers = {|
   onResponderTerminationRequest: (event: PressEvent) => boolean,
   onStartShouldSetResponder: (event: PressEvent) => boolean,
   onStartShouldSetResponderCapture: (event: PressEvent) => boolean,
-|};
+};
 
-type PanResponderConfig = $ReadOnly<{|
+type PanResponderConfig = $ReadOnly<{
   onMoveShouldSetPanResponder?: ?ActiveCallback,
   onMoveShouldSetPanResponderCapture?: ?ActiveCallback,
   onStartShouldSetPanResponder?: ?ActiveCallback,
@@ -224,7 +224,7 @@ type PanResponderConfig = $ReadOnly<{|
   onPanResponderTerminate?: ?PassiveCallback,
   onPanResponderTerminationRequest?: ?ActiveCallback,
   onShouldBlockNativeResponder?: ?ActiveCallback,
-|}>;
+}>;
 
 const PanResponder = {
   /**

package/Libraries/Interaction/TouchHistoryMath.js

@@ -151,6 +151,32 @@ const TouchHistoryMath = {
   },
 
   noCentroid: -1,
+} as {
+  centroidDimension: (
+    touchHistory: TouchHistoryMath,
+    touchesChangedAfter: number,
+    isXAxis: boolean,
+    ofCurrent: boolean,
+  ) => number,
+  currentCentroidXOfTouchesChangedAfter: (
+    touchHistory: TouchHistoryMath,
+    touchesChangedAfter: number,
+  ) => number,
+  currentCentroidYOfTouchesChangedAfter: (
+    touchHistory: TouchHistoryMath,
+    touchesChangedAfter: number,
+  ) => number,
+  previousCentroidXOfTouchesChangedAfter: (
+    touchHistory: TouchHistoryMath,
+    touchesChangedAfter: number,
+  ) => number,
+  previousCentroidYOfTouchesChangedAfter: (
+    touchHistory: TouchHistoryMath,
+    touchesChangedAfter: number,
+  ) => number,
+  currentCentroidX: (touchHistory: TouchHistoryMath) => number,
+  currentCentroidY: (touchHistory: TouchHistoryMath) => number,
+  noCentroid: number,
 };
 
 module.exports = TouchHistoryMath;

package/Libraries/JSInspector/NetworkAgent.js

@@ -12,8 +12,9 @@
 
 import type EventSender from './InspectorAgent';
 
+import InspectorAgent from './InspectorAgent';
+
 const XMLHttpRequest = require('../Network/XMLHttpRequest');
-const InspectorAgent = require('./InspectorAgent');
 const JSInspector = require('./JSInspector');
 
 type RequestId = string;

package/Libraries/LayoutAnimation/LayoutAnimation.js

@@ -174,13 +174,13 @@ const LayoutAnimation = {
     easeIn: 'easeIn',
     easeOut: 'easeOut',
     keyboard: 'keyboard',
-  }),
+  }) as $ReadOnly<{[K in LayoutAnimationType]: K}>,
   Properties: Object.freeze({
     opacity: 'opacity',
     scaleX: 'scaleX',
     scaleY: 'scaleY',
     scaleXY: 'scaleXY',
-  }),
+  }) as $ReadOnly<{[K in LayoutAnimationProperty]: K}>,
   checkConfig(...args: Array<mixed>) {
     console.error('LayoutAnimation.checkConfig(...) has been disabled.');
   },

package/Libraries/Linking/Linking.js

@@ -41,7 +41,6 @@ class Linking extends NativeEventEmitter<LinkingEventDefinitions> {
   addEventListener<K: $Keys<LinkingEventDefinitions>>(
     eventType: K,
     listener: (...$ElementType<LinkingEventDefinitions, K>) => mixed,
-    context: $FlowFixMe,
   ): EventSubscription {
     return this.addListener(eventType, listener);
   }

package/Libraries/Lists/FlatList.js

@@ -19,27 +19,27 @@ import type {
 
 import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
 import {type ScrollResponderType} from '../Components/ScrollView/ScrollView';
+import View from '../Components/View/View';
 import {
   VirtualizedList,
   keyExtractor as defaultKeyExtractor,
 } from '@react-native/virtualized-lists';
 import memoizeOne from 'memoize-one';
+import React from 'react';
 
-const View = require('../Components/View/View');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const deepDiffer = require('../Utilities/differ/deepDiffer');
 const Platform = require('../Utilities/Platform');
 const invariant = require('invariant');
-const React = require('react');
 
-type RequiredProps<ItemT> = {|
+type RequiredProps<ItemT> = {
   /**
    * An array (or array-like list) of items to render. Other data types can be
    * used by targeting VirtualizedList directly.
    */
   data: ?$ReadOnly<$ArrayLike<ItemT>>,
-|};
-type OptionalProps<ItemT> = {|
+};
+type OptionalProps<ItemT> = {
   /**
    * Takes an item from `data` and renders it into the list. Example usage:
    *
@@ -150,7 +150,7 @@ type OptionalProps<ItemT> = {|
    * Enable an optimization to memoize the item renderer to prevent unnecessary rerenders.
    */
   strictMode?: boolean,
-|};
+};
 
 /**
  * Default Props Helper Functions
@@ -176,10 +176,10 @@ function isArrayLike(data: mixed): boolean {
   return typeof Object(data).length === 'number';
 }
 
-type FlatListProps<ItemT> = {|
+type FlatListProps<ItemT> = {
   ...RequiredProps<ItemT>,
   ...OptionalProps<ItemT>,
-|};
+};
 
 type VirtualizedListProps = React.ElementConfig<typeof VirtualizedList>;
 
@@ -672,8 +672,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
       : {renderItem: renderProp};
   };
 
-  // $FlowFixMe[missing-local-annot]
-  _memoizedRenderer = memoizeOne(this._renderer);
+  _memoizedRenderer: ReturnType<typeof memoizeOne> = memoizeOne(this._renderer);
 
   render(): React.Node {
     const {

package/Libraries/Lists/SectionList.js

@@ -25,7 +25,7 @@ type Item = any;
 
 export type SectionBase<SectionItemT> = _SectionBase<SectionItemT>;
 
-type RequiredProps<SectionT: SectionBase<any>> = {|
+type RequiredProps<SectionT: SectionBase<any>> = {
   /**
    * The actual data to render, akin to the `data` prop in [`<FlatList>`](https://reactnative.dev/docs/flatlist).
    *
@@ -38,9 +38,9 @@ type RequiredProps<SectionT: SectionBase<any>> = {|
    *     }>
    */
   sections: $ReadOnlyArray<SectionT>,
-|};
+};
 
-type OptionalProps<SectionT: SectionBase<any>> = {|
+type OptionalProps<SectionT: SectionBase<any>> = {
   /**
    * Default renderer for every item in every section. Can be over-ridden on a per-section basis.
    */
@@ -90,9 +90,9 @@ type OptionalProps<SectionT: SectionBase<any>> = {|
    * This may improve scroll performance for large lists.
    */
   removeClippedSubviews?: boolean,
-|};
+};
 
-export type Props<SectionT> = {|
+export type Props<SectionT> = {
   ...$Diff<
     VirtualizedSectionListProps<SectionT>,
     {
@@ -114,7 +114,7 @@ export type Props<SectionT> = {|
   >,
   ...RequiredProps<SectionT>,
   ...OptionalProps<SectionT>,
-|};
+};
 
 /**
  * A performant interface for rendering sectioned lists, supporting the most handy features:
@@ -261,9 +261,7 @@ export default class SectionList<
   }
 
   _wrapperListRef: ?React.ElementRef<typeof VirtualizedSectionList>;
-  /* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
-   * LTI update could not be added via codemod */
-  _captureRef = ref => {
+  _captureRef = (ref: ?React.RefOf<VirtualizedSectionList>) => {
     this._wrapperListRef = ref;
   };
 }

package/Libraries/Lists/SectionListModern.js

@@ -26,7 +26,7 @@ type Item = any;
 
 export type SectionBase<SectionItemT> = _SectionBase<SectionItemT>;
 
-type RequiredProps<SectionT: SectionBase<any>> = {|
+type RequiredProps<SectionT: SectionBase<any>> = {
   /**
    * The actual data to render, akin to the `data` prop in [`<FlatList>`](https://reactnative.dev/docs/flatlist).
    *
@@ -39,9 +39,9 @@ type RequiredProps<SectionT: SectionBase<any>> = {|
    *     }>
    */
   sections: $ReadOnlyArray<SectionT>,
-|};
+};
 
-type OptionalProps<SectionT: SectionBase<any>> = {|
+type OptionalProps<SectionT: SectionBase<any>> = {
   /**
    * Default renderer for every item in every section. Can be over-ridden on a per-section basis.
    */
@@ -91,9 +91,9 @@ type OptionalProps<SectionT: SectionBase<any>> = {|
    * This may improve scroll performance for large lists.
    */
   removeClippedSubviews?: boolean,
-|};
+};
 
-export type Props<SectionT: SectionBase<any>> = $ReadOnly<{|
+export type Props<SectionT: SectionBase<any>> = $ReadOnly<{
   ...$Diff<
     VirtualizedSectionListProps<SectionT>,
     {
@@ -115,7 +115,7 @@ export type Props<SectionT: SectionBase<any>> = $ReadOnly<{|
   >,
   ...RequiredProps<SectionT>,
   ...OptionalProps<SectionT>,
-|}>;
+}>;
 
 /**
  * A performant interface for rendering sectioned lists, supporting the most handy features:

package/Libraries/LogBox/Data/LogBoxData.js

@@ -37,20 +37,20 @@ export type LogData = $ReadOnly<{
 }>;
 
 export type Observer = (
-  $ReadOnly<{|
+  $ReadOnly<{
     logs: LogBoxLogs,
     isDisabled: boolean,
     selectedLogIndex: number,
-  |}>,
+  }>,
 ) => void;
 
 export type IgnorePattern = string | RegExp;
 
-export type Subscription = $ReadOnly<{|
+export type Subscription = $ReadOnly<{
   unsubscribe: () => void,
-|}>;
+}>;
 
-export type WarningInfo = {|
+export type WarningInfo = {
   finalFormat: string,
   forceDialogImmediately: boolean,
   suppressDialog_LEGACY: boolean,
@@ -58,15 +58,15 @@ export type WarningInfo = {|
   monitorEvent: string | null,
   monitorListVersion: number,
   monitorSampleRate: number,
-|};
+};
 
 export type WarningFilter = (format: string) => WarningInfo;
 
-type AppInfo = $ReadOnly<{|
+type AppInfo = $ReadOnly<{
   appVersion: string,
   engine: string,
   onPress?: ?() => void,
-|}>;
+}>;
 
 const observers: Set<{observer: Observer, ...}> = new Set();
 const ignorePatterns: Set<IgnorePattern> = new Set();
@@ -413,25 +413,25 @@ export function observe(observer: Observer): Subscription {
   };
 }
 
-type Props = $ReadOnly<{||}>;
-type State = $ReadOnly<{|
+type Props = $ReadOnly<{}>;
+type State = $ReadOnly<{
   logs: LogBoxLogs,
   isDisabled: boolean,
   hasError: boolean,
   selectedLogIndex: number,
-|}>;
+}>;
 
 type SubscribedComponent = React.ComponentType<
-  $ReadOnly<{|
+  $ReadOnly<{
     logs: $ReadOnlyArray<LogBoxLog>,
     isDisabled: boolean,
     selectedLogIndex: number,
-  |}>,
+  }>,
 >;
 
 export function withSubscription(
   WrappedComponent: SubscribedComponent,
-): React.ComponentType<{||}> {
+): React.ComponentType<{}> {
   class LogBoxStateSubscription extends React.Component<Props, State> {
     static getDerivedStateFromError(): {hasError: boolean} {
       return {hasError: true};