react-native-windows 0.71.8 → 0.72.0-preview.1

package/Libraries/Inspector/DevtoolsOverlay.js

@@ -8,6 +8,7 @@
  * @flow
  */
 
+import type {PointerEvent} from '../Types/CoreEventTypes';
 import type {PressEvent} from '../Types/CoreEventTypes';
 import type {HostRef} from './getInspectorDataForViewAtPoint';
 
@@ -50,8 +51,15 @@ export default function DevtoolsOverlay({
 
     function onAgentShowNativeHighlight(node: any) {
       clearTimeout(hideTimeoutId);
-      // Shape of `node` is different in Fabric.
-      const component = node.canonical ?? node;
+
+      // `canonical.publicInstance` => Fabric
+      // `canonical` => Legacy Fabric
+      // `node` => Legacy renderer
+      const component =
+        (node.canonical && node.canonical.publicInstance) ??
+        // TODO: remove this check when syncing the new version of the renderer from React to React Native.
+        node.canonical ??
+        node;
       if (!component || !component.measure) {
         return;
       }
@@ -125,11 +133,11 @@ export default function DevtoolsOverlay({
       getInspectorDataForViewAtPoint(inspectedView, x, y, viewData => {
         const {touchedViewTag, closestInstance, frame} = viewData;
         if (closestInstance != null || touchedViewTag != null) {
+          // We call `selectNode` for both non-fabric(viewTag) and fabric(instance),
+          // this makes sure it works for both architectures.
+          agent.selectNode(findNodeHandle(touchedViewTag));
           if (closestInstance != null) {
-            // Fabric
             agent.selectNode(closestInstance);
-          } else {
-            agent.selectNode(findNodeHandle(touchedViewTag));
           }
           setInspected({
             frame,
@@ -153,14 +161,14 @@ export default function DevtoolsOverlay({
   }, []);
 
   const onPointerMove = useCallback(
-    e => {
+    (e: PointerEvent) => {
       findViewForLocation(e.nativeEvent.x, e.nativeEvent.y);
     },
     [findViewForLocation],
   );
 
   const onResponderMove = useCallback(
-    e => {
+    (e: PressEvent) => {
       findViewForLocation(
         e.nativeEvent.touches[0].locationX,
         e.nativeEvent.touches[0].locationY,
@@ -169,7 +177,7 @@ export default function DevtoolsOverlay({
     [findViewForLocation],
   );
 
-  const shouldSetResponser = useCallback(
+  const shouldSetResponder = useCallback(
     (e: PressEvent): boolean => {
       onResponderMove(e);
       return true;
@@ -179,17 +187,19 @@ export default function DevtoolsOverlay({
 
   let highlight = inspected ? <ElementBox frame={inspected.frame} /> : null;
   if (isInspecting) {
-    const events = ReactNativeFeatureFlags.shouldEmitW3CPointerEvents
-      ? {
-          onPointerMove,
-          onPointerDown: onPointerMove,
-          onPointerUp: stopInspecting,
-        }
-      : {
-          onStartShouldSetResponder: shouldSetResponser,
-          onResponderMove: onResponderMove,
-          onResponderRelease: stopInspecting,
-        };
+    const events =
+      // Pointer events only work on fabric
+      ReactNativeFeatureFlags.shouldEmitW3CPointerEvents()
+        ? {
+            onPointerMove,
+            onPointerDown: onPointerMove,
+            onPointerUp: stopInspecting,
+          }
+        : {
+            onStartShouldSetResponder: shouldSetResponder,
+            onResponderMove: onResponderMove,
+            onResponderRelease: stopInspecting,
+          };
     return (
       <View
         nativeID="devToolsInspectorOverlay"

package/Libraries/Inspector/ElementBox.js

@@ -13,13 +13,14 @@
 const View = require('../Components/View/View');
 const flattenStyle = require('../StyleSheet/flattenStyle');
 const StyleSheet = require('../StyleSheet/StyleSheet');
-const Dimensions = require('../Utilities/Dimensions');
+const Dimensions = require('../Utilities/Dimensions').default;
 const BorderBox = require('./BorderBox');
 const resolveBoxStyle = require('./resolveBoxStyle');
 const React = require('react');
 
 class ElementBox extends React.Component<$FlowFixMeProps> {
   render(): React.Node {
+    // $FlowFixMe[underconstrained-implicit-instantiation]
     const style = flattenStyle(this.props.style) || {};
     let margin = resolveBoxStyle('margin', style);
     let padding = resolveBoxStyle('padding', style);
@@ -123,12 +124,14 @@ function resolveSizeInPlace(
 ) {
   if (style[direction] !== null && typeof style[direction] === 'string') {
     if (style[direction].indexOf('%') !== -1) {
+      // $FlowFixMe[prop-missing]
       style[direction] =
         (parseFloat(style[direction]) / 100.0) *
         Dimensions.get('window')[dimension];
     }
     if (style[direction] === 'auto') {
       // Ignore auto sizing in frame drawing due to complexity of correctly rendering this
+      // $FlowFixMe[prop-missing]
       style[direction] = 0;
     }
   }

package/Libraries/Inspector/Inspector.js

@@ -18,7 +18,7 @@ const View = require('../Components/View/View');
 const PressabilityDebug = require('../Pressability/PressabilityDebug');
 const {findNodeHandle} = require('../ReactNative/RendererProxy');
 const StyleSheet = require('../StyleSheet/StyleSheet');
-const Dimensions = require('../Utilities/Dimensions');
+const Dimensions = require('../Utilities/Dimensions').default;
 const Platform = require('../Utilities/Platform');
 const getInspectorDataForViewAtPoint = require('./getInspectorDataForViewAtPoint');
 const InspectorOverlay = require('./InspectorOverlay');
@@ -142,12 +142,11 @@ class Inspector extends React.Component<
       // Sync the touched view with React DevTools.
       // Note: This is Paper only. To support Fabric,
       // DevTools needs to be updated to not rely on view tags.
-      if (this.state.devtoolsAgent) {
+      const agent = this.state.devtoolsAgent;
+      if (agent) {
+        agent.selectNode(findNodeHandle(touchedViewTag));
         if (closestInstance != null) {
-          // Fabric
-          this.state.devtoolsAgent.selectNode(closestInstance);
-        } else if (touchedViewTag != null) {
-          this.state.devtoolsAgent.selectNode(findNodeHandle(touchedViewTag));
+          agent.selectNode(closestInstance);
         }
       }
 

package/Libraries/Inspector/InspectorOverlay.js

@@ -15,7 +15,7 @@ import type {PressEvent} from '../Types/CoreEventTypes';
 
 const View = require('../Components/View/View');
 const StyleSheet = require('../StyleSheet/StyleSheet');
-const Dimensions = require('../Utilities/Dimensions');
+const Dimensions = require('../Utilities/Dimensions').default;
 const ElementBox = require('./ElementBox');
 const React = require('react');
 
@@ -36,7 +36,7 @@ class InspectorOverlay extends React.Component<Props> {
     this.props.onTouchPoint(locationX, locationY);
   };
 
-  shouldSetResponser: (e: PressEvent) => boolean = (e: PressEvent): boolean => {
+  shouldSetResponder: (e: PressEvent) => boolean = (e: PressEvent): boolean => {
     this.findViewForTouchEvent(e);
     return true;
   };
@@ -54,7 +54,7 @@ class InspectorOverlay extends React.Component<Props> {
 
     return (
       <View
-        onStartShouldSetResponder={this.shouldSetResponser}
+        onStartShouldSetResponder={this.shouldSetResponder}
         onResponderMove={this.findViewForTouchEvent}
         nativeID="inspectorOverlay" /* TODO: T68258846. */
         style={[styles.inspector, {height: Dimensions.get('window').height}]}>

package/Libraries/Inspector/NetworkOverlay.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-import type {RenderItemProps} from '../Lists/VirtualizedList';
+import type {RenderItemProps} from '@react-native/virtualized-lists';
 
 const ScrollView = require('../Components/ScrollView/ScrollView');
 const TouchableHighlight = require('../Components/Touchable/TouchableHighlight');

package/Libraries/Interaction/JSEventLoopWatchdog.js

@@ -27,7 +27,7 @@ type Handler = {
  * other events from being processed in a timely manner.
  *
  * The "stall" time is defined as the amount of time in access of the acceptable
- * threshold, which is typically around 100-200ms. So if the treshold is set to
+ * threshold, which is typically around 100-200ms. So if the threshold is set to
  * 100 and a timer fires 150 ms later than it was scheduled because the event
  * loop was tied up, that would be considered a 50ms stall.
  *

package/Libraries/Interaction/PanResponder.js

@@ -11,7 +11,6 @@
 'use strict';
 
 import type {PressEvent} from '../Types/CoreEventTypes';
-import type {PanResponderType} from './PanResponder.flow.js';
 
 const InteractionManager = require('./InteractionManager');
 const TouchHistoryMath = require('./TouchHistoryMath');
@@ -191,7 +190,7 @@ type ActiveCallback = (
 
 type PassiveCallback = (event: PressEvent, gestureState: GestureState) => mixed;
 
-type PanHandlers = {|
+export type PanHandlers = {|
   onMoveShouldSetResponder: (event: PressEvent) => boolean,
   onMoveShouldSetResponderCapture: (event: PressEvent) => boolean,
   onResponderEnd: (event: PressEvent) => void,
@@ -227,7 +226,7 @@ type PanResponderConfig = $ReadOnly<{|
   onShouldBlockNativeResponder?: ?ActiveCallback,
 |}>;
 
-const PanResponder: PanResponderType = {
+const PanResponder = {
   /**
    *
    * A graphical explanation of the touch data flow:
@@ -399,10 +398,10 @@ const PanResponder: PanResponderType = {
    *  accordingly. (numberActiveTouches) may not be totally accurate unless you
    *  are the responder.
    */
-  create(config: PanResponderConfig): $TEMPORARY$object<{|
+  create(config: PanResponderConfig): {
     getInteractionHandle: () => ?number,
     panHandlers: PanHandlers,
-  |}> {
+  } {
     const interactionState = {
       handle: (null: ?number),
     };
@@ -580,4 +579,4 @@ export type PanResponderInstance = $Call<
   PanResponderConfig,
 >;
 
-module.exports = PanResponder;
+export default PanResponder;

package/Libraries/LayoutAnimation/LayoutAnimation.js

@@ -17,6 +17,7 @@ import type {
   LayoutAnimationType,
 } from '../Renderer/shims/ReactNativeTypes';
 
+import {getFabricUIManager} from '../ReactNative/FabricUIManager';
 import ReactNativeFeatureFlags from '../ReactNative/ReactNativeFeatureFlags';
 import Platform from '../Utilities/Platform';
 
@@ -77,7 +78,7 @@ function configureNext(
 
   // In Fabric, LayoutAnimations are unconditionally enabled for Android, and
   // conditionally enabled on iOS (pending fully shipping; this is a temporary state).
-  const FabricUIManager: FabricUIManagerSpec = global?.nativeFabricUIManager;
+  const FabricUIManager = getFabricUIManager();
   if (FabricUIManager?.configureNextLayoutAnimation) {
     global?.nativeFabricUIManager?.configureNextLayoutAnimation(
       config,

package/Libraries/Linking/Linking.js

@@ -11,7 +11,6 @@
 import type {EventSubscription} from '../vendor/emitter/EventEmitter';
 
 import NativeEventEmitter from '../EventEmitter/NativeEventEmitter';
-import InteractionManager from '../Interaction/InteractionManager';
 import Platform from '../Utilities/Platform';
 import NativeIntentAndroid from './NativeIntentAndroid';
 import NativeLinkingManager from './NativeLinkingManager';
@@ -96,9 +95,7 @@ class Linking extends NativeEventEmitter<LinkingEventDefinitions> {
    */
   getInitialURL(): Promise<?string> {
     return Platform.OS === 'android'
-      ? InteractionManager.runAfterInteractions().then(() =>
-          nullthrows(NativeIntentAndroid).getInitialURL(),
-        )
+      ? nullthrows(NativeIntentAndroid).getInitialURL()
       : nullthrows(NativeLinkingManager).getInitialURL();
   }
 

package/Libraries/Lists/FillRateHelper.js

@@ -10,244 +10,10 @@
 
 'use strict';
 
-import type {FrameMetricProps} from './VirtualizedListProps';
+import {typeof FillRateHelper as FillRateHelperType} from '@react-native/virtualized-lists';
 
-export type FillRateInfo = Info;
-
-class Info {
-  any_blank_count: number = 0;
-  any_blank_ms: number = 0;
-  any_blank_speed_sum: number = 0;
-  mostly_blank_count: number = 0;
-  mostly_blank_ms: number = 0;
-  pixels_blank: number = 0;
-  pixels_sampled: number = 0;
-  pixels_scrolled: number = 0;
-  total_time_spent: number = 0;
-  sample_count: number = 0;
-}
-
-type FrameMetrics = {
-  inLayout?: boolean,
-  length: number,
-  offset: number,
-  ...
-};
-
-const DEBUG = false;
-
-let _listeners: Array<(Info) => void> = [];
-let _minSampleCount = 10;
-let _sampleRate = DEBUG ? 1 : null;
-
-/**
- * A helper class for detecting when the maximem fill rate of `VirtualizedList` is exceeded.
- * By default the sampling rate is set to zero and this will do nothing. If you want to collect
- * samples (e.g. to log them), make sure to call `FillRateHelper.setSampleRate(0.0-1.0)`.
- *
- * Listeners and sample rate are global for all `VirtualizedList`s - typical usage will combine with
- * `SceneTracker.getActiveScene` to determine the context of the events.
- */
-class FillRateHelper {
-  _anyBlankStartTime: ?number = null;
-  _enabled = false;
-  _getFrameMetrics: (index: number, props: FrameMetricProps) => ?FrameMetrics;
-  _info: Info = new Info();
-  _mostlyBlankStartTime: ?number = null;
-  _samplesStartTime: ?number = null;
-
-  static addListener(callback: FillRateInfo => void): {
-    remove: () => void,
-    ...
-  } {
-    if (_sampleRate === null) {
-      console.warn('Call `FillRateHelper.setSampleRate` before `addListener`.');
-    }
-    _listeners.push(callback);
-    return {
-      remove: () => {
-        _listeners = _listeners.filter(listener => callback !== listener);
-      },
-    };
-  }
-
-  static setSampleRate(sampleRate: number) {
-    _sampleRate = sampleRate;
-  }
-
-  static setMinSampleCount(minSampleCount: number) {
-    _minSampleCount = minSampleCount;
-  }
-
-  constructor(
-    getFrameMetrics: (index: number, props: FrameMetricProps) => ?FrameMetrics,
-  ) {
-    this._getFrameMetrics = getFrameMetrics;
-    this._enabled = (_sampleRate || 0) > Math.random();
-    this._resetData();
-  }
-
-  activate() {
-    if (this._enabled && this._samplesStartTime == null) {
-      DEBUG && console.debug('FillRateHelper: activate');
-      this._samplesStartTime = global.performance.now();
-    }
-  }
-
-  deactivateAndFlush() {
-    if (!this._enabled) {
-      return;
-    }
-    const start = this._samplesStartTime; // const for flow
-    if (start == null) {
-      DEBUG &&
-        console.debug('FillRateHelper: bail on deactivate with no start time');
-      return;
-    }
-    if (this._info.sample_count < _minSampleCount) {
-      // Don't bother with under-sampled events.
-      this._resetData();
-      return;
-    }
-    const total_time_spent = global.performance.now() - start;
-    const info: any = {
-      ...this._info,
-      total_time_spent,
-    };
-    if (DEBUG) {
-      const derived = {
-        avg_blankness: this._info.pixels_blank / this._info.pixels_sampled,
-        avg_speed: this._info.pixels_scrolled / (total_time_spent / 1000),
-        avg_speed_when_any_blank:
-          this._info.any_blank_speed_sum / this._info.any_blank_count,
-        any_blank_per_min:
-          this._info.any_blank_count / (total_time_spent / 1000 / 60),
-        any_blank_time_frac: this._info.any_blank_ms / total_time_spent,
-        mostly_blank_per_min:
-          this._info.mostly_blank_count / (total_time_spent / 1000 / 60),
-        mostly_blank_time_frac: this._info.mostly_blank_ms / total_time_spent,
-      };
-      for (const key in derived) {
-        // $FlowFixMe[prop-missing]
-        derived[key] = Math.round(1000 * derived[key]) / 1000;
-      }
-      console.debug('FillRateHelper deactivateAndFlush: ', {derived, info});
-    }
-    _listeners.forEach(listener => listener(info));
-    this._resetData();
-  }
-
-  computeBlankness(
-    props: {
-      ...FrameMetricProps,
-      initialNumToRender?: ?number,
-      ...
-    },
-    cellsAroundViewport: {
-      first: number,
-      last: number,
-      ...
-    },
-    scrollMetrics: {
-      dOffset: number,
-      offset: number,
-      velocity: number,
-      visibleLength: number,
-      ...
-    },
-  ): number {
-    if (
-      !this._enabled ||
-      props.getItemCount(props.data) === 0 ||
-      cellsAroundViewport.last < cellsAroundViewport.first ||
-      this._samplesStartTime == null
-    ) {
-      return 0;
-    }
-    const {dOffset, offset, velocity, visibleLength} = scrollMetrics;
-
-    // Denominator metrics that we track for all events - most of the time there is no blankness and
-    // we want to capture that.
-    this._info.sample_count++;
-    this._info.pixels_sampled += Math.round(visibleLength);
-    this._info.pixels_scrolled += Math.round(Math.abs(dOffset));
-    const scrollSpeed = Math.round(Math.abs(velocity) * 1000); // px / sec
-
-    // Whether blank now or not, record the elapsed time blank if we were blank last time.
-    const now = global.performance.now();
-    if (this._anyBlankStartTime != null) {
-      this._info.any_blank_ms += now - this._anyBlankStartTime;
-    }
-    this._anyBlankStartTime = null;
-    if (this._mostlyBlankStartTime != null) {
-      this._info.mostly_blank_ms += now - this._mostlyBlankStartTime;
-    }
-    this._mostlyBlankStartTime = null;
-
-    let blankTop = 0;
-    let first = cellsAroundViewport.first;
-    let firstFrame = this._getFrameMetrics(first, props);
-    while (
-      first <= cellsAroundViewport.last &&
-      (!firstFrame || !firstFrame.inLayout)
-    ) {
-      firstFrame = this._getFrameMetrics(first, props);
-      first++;
-    }
-    // Only count blankTop if we aren't rendering the first item, otherwise we will count the header
-    // as blank.
-    if (firstFrame && first > 0) {
-      blankTop = Math.min(
-        visibleLength,
-        Math.max(0, firstFrame.offset - offset),
-      );
-    }
-    let blankBottom = 0;
-    let last = cellsAroundViewport.last;
-    let lastFrame = this._getFrameMetrics(last, props);
-    while (
-      last >= cellsAroundViewport.first &&
-      (!lastFrame || !lastFrame.inLayout)
-    ) {
-      lastFrame = this._getFrameMetrics(last, props);
-      last--;
-    }
-    // Only count blankBottom if we aren't rendering the last item, otherwise we will count the
-    // footer as blank.
-    if (lastFrame && last < props.getItemCount(props.data) - 1) {
-      const bottomEdge = lastFrame.offset + lastFrame.length;
-      blankBottom = Math.min(
-        visibleLength,
-        Math.max(0, offset + visibleLength - bottomEdge),
-      );
-    }
-    const pixels_blank = Math.round(blankTop + blankBottom);
-    const blankness = pixels_blank / visibleLength;
-    if (blankness > 0) {
-      this._anyBlankStartTime = now;
-      this._info.any_blank_speed_sum += scrollSpeed;
-      this._info.any_blank_count++;
-      this._info.pixels_blank += pixels_blank;
-      if (blankness > 0.5) {
-        this._mostlyBlankStartTime = now;
-        this._info.mostly_blank_count++;
-      }
-    } else if (scrollSpeed < 0.01 || Math.abs(dOffset) < 1) {
-      this.deactivateAndFlush();
-    }
-    return blankness;
-  }
-
-  enabled(): boolean {
-    return this._enabled;
-  }
-
-  _resetData() {
-    this._anyBlankStartTime = null;
-    this._info = new Info();
-    this._mostlyBlankStartTime = null;
-    this._samplesStartTime = null;
-  }
-}
+const FillRateHelper: FillRateHelperType =
+  require('@react-native/virtualized-lists').FillRateHelper;
 
+export type {FillRateInfo} from '@react-native/virtualized-lists';
 module.exports = FillRateHelper;

package/Libraries/Lists/FlatList.d.ts

@@ -12,7 +12,7 @@ import type {
   ListRenderItem,
   ViewToken,
   VirtualizedListProps,
-} from './VirtualizedList';
+} from '@react-native/virtualized-lists';
 import type {ScrollViewComponent} from '../Components/ScrollView/ScrollView';
 import type {StyleProp} from '../StyleSheet/StyleSheet';
 import type {ViewStyle} from '../StyleSheet/StyleSheetTypes';
@@ -41,7 +41,7 @@ export interface FlatListProps<ItemT> extends VirtualizedListProps<ItemT> {
 
   /**
    * An array (or array-like list) of items to render. Other data types can be
-   * used by targetting VirtualizedList directly.
+   * used by targeting VirtualizedList directly.
    */
   data: ArrayLike<ItemT> | null | undefined;
 
@@ -50,7 +50,7 @@ export interface FlatListProps<ItemT> extends VirtualizedListProps<ItemT> {
    * If any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the `data` prop,
    * stick it here and treat it immutably.
    */
-  extraData?: any;
+  extraData?: any | undefined;
 
   /**
    * `getItemLayout` is an optional optimization that lets us skip measurement of dynamic
@@ -66,7 +66,7 @@ export interface FlatListProps<ItemT> extends VirtualizedListProps<ItemT> {
    */
   getItemLayout?:
     | ((
-        data: Array<ItemT> | null | undefined,
+        data: ArrayLike<ItemT> | null | undefined,
         index: number,
       ) => {length: number; offset: number; index: number})
     | undefined;
@@ -104,19 +104,6 @@ export interface FlatListProps<ItemT> extends VirtualizedListProps<ItemT> {
    */
   numColumns?: number | undefined;
 
-  /**
-   * Called once when the scroll position gets within onEndReachedThreshold of the rendered content.
-   */
-  onEndReached?: ((info: {distanceFromEnd: number}) => void) | null | undefined;
-
-  /**
-   * How far from the end (in units of visible length of the list) the bottom edge of the
-   * list must be from the end of the content to trigger the `onEndReached` callback.
-   * Thus a value of 0.5 will trigger `onEndReached` when the end of the content is
-   * within half the visible length of the list.
-   */
-  onEndReachedThreshold?: number | null | undefined;
-
   /**
    * If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality.
    * Make sure to also set the refreshing prop correctly.
@@ -145,7 +132,7 @@ export interface FlatListProps<ItemT> extends VirtualizedListProps<ItemT> {
    * _renderItem = ({item}) => (
    *   <TouchableOpacity onPress={() => this._onPress(item)}>
    *     <Text>{item.title}</Text>
-   *   <TouchableOpacity/>
+   *   </TouchableOpacity>
    * );
    * ...
    * <FlatList data={[{title: 'Title Text', key: 'item1'}]} renderItem={this._renderItem} />
@@ -157,7 +144,7 @@ export interface FlatListProps<ItemT> extends VirtualizedListProps<ItemT> {
   /**
    * See `ViewabilityHelper` for flow type and further documentation.
    */
-  viewabilityConfig?: any;
+  viewabilityConfig?: any | undefined;
 
   /**
    * Note: may have bugs (missing content) in some circumstances - use at your own risk.
@@ -179,9 +166,10 @@ export interface FlatListProps<ItemT> extends VirtualizedListProps<ItemT> {
   fadingEdgeLength?: number | undefined;
 }
 
-export class FlatList<ItemT = any> extends React.Component<
-  FlatListProps<ItemT>
-> {
+export abstract class FlatListComponent<
+  ItemT,
+  Props,
+> extends React.Component<Props> {
   /**
    * Scrolls to the end of the content. May be janky without `getItemLayout` prop.
    */
@@ -249,3 +237,8 @@ export class FlatList<ItemT = any> extends React.Component<
   // TODO: use `unknown` instead of `any` for Typescript >= 3.0
   setNativeProps: (props: {[key: string]: any}) => void;
 }
+
+export class FlatList<ItemT = any> extends FlatListComponent<
+  ItemT,
+  FlatListProps<ItemT>
+> {}

package/Libraries/Lists/FlatList.js

@@ -11,14 +11,17 @@
 import typeof ScrollViewNativeComponent from '../Components/ScrollView/ScrollViewNativeComponent';
 import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
 import type {
+  RenderItemProps,
+  RenderItemType,
   ViewabilityConfigCallbackPair,
   ViewToken,
-} from './ViewabilityHelper';
-import type {RenderItemProps, RenderItemType} from './VirtualizedList';
+} from '@react-native/virtualized-lists';
 
 import {type ScrollResponderType} from '../Components/ScrollView/ScrollView';
-import VirtualizedList from './VirtualizedList';
-import {keyExtractor as defaultKeyExtractor} from './VirtualizeUtils';
+import {
+  VirtualizedList,
+  keyExtractor as defaultKeyExtractor,
+} from '@react-native/virtualized-lists';
 import memoizeOne from 'memoize-one';
 
 const View = require('../Components/View/View');
@@ -31,7 +34,7 @@ const React = require('react');
 type RequiredProps<ItemT> = {|
   /**
    * An array (or array-like list) of items to render. Other data types can be
-   * used by targetting VirtualizedList directly.
+   * used by targeting VirtualizedList directly.
    */
   data: ?$ArrayLike<ItemT>,
 |};
@@ -88,7 +91,7 @@ type OptionalProps<ItemT> = {|
    * specify `ItemSeparatorComponent`.
    */
   getItemLayout?: (
-    data: ?Array<ItemT>,
+    data: ?$ArrayLike<ItemT>,
     index: number,
   ) => {
     length: number,