Replace legacy compat types with their new names in TS based lib.dom.d.ts in xplat: 2/n

packages/jest-preset/jest/setup.js

@@ -28,7 +28,7 @@ Object.defineProperties(global, {
   cancelAnimationFrame: {
     configurable: true,
     enumerable: true,
-    value(id: TimeoutID): void {
+    value(id: ReturnType<typeof setTimeout>): void {
       return clearTimeout(id);
     },
     writable: true,
@@ -57,7 +57,7 @@ Object.defineProperties(global, {
   requestAnimationFrame: {
     configurable: true,
     enumerable: true,
-    value(callback: number => void): TimeoutID {
+    value(callback: number => void): ReturnType<typeof setTimeout> {
       return setTimeout(() => callback(jest.now()), 0);
     },
     writable: true,

packages/react-native/Libraries/Animated/animations/SpringAnimation.js

@@ -99,7 +99,7 @@ export default class SpringAnimation extends Animation {
   _mass: number;
   _initialVelocity: number;
   _delay: number;
-  _timeout: ?TimeoutID;
+  _timeout: ?ReturnType<typeof setTimeout>;
   _startTime: number;
   _lastTime: number;
   _frameTime: number;

packages/react-native/Libraries/Animated/animations/TimingAnimation.js

@@ -69,7 +69,7 @@ export default class TimingAnimation extends Animation {
   _easing: (value: number) => number;
   _onUpdate: (value: number) => void;
   _animationFrame: ?number;
-  _timeout: ?TimeoutID;
+  _timeout: ?ReturnType<typeof setTimeout>;
   _platformConfig: ?PlatformConfig;
   _deferredStart: boolean;
 

packages/react-native/Libraries/Components/ScrollView/ScrollViewStickyHeader.js

@@ -119,7 +119,7 @@ const ScrollViewStickyHeader: component(
   );
 
   const haveReceivedInitialZeroTranslateY = useRef<boolean>(true);
-  const translateYDebounceTimer = useRef<?TimeoutID>(null);
+  const translateYDebounceTimer = useRef<?ReturnType<typeof setTimeout>>(null);
 
   useEffect(() => {
     if (translateY !== 0 && translateY != null) {

packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js

@@ -93,7 +93,7 @@ class TouchableHighlightImpl extends React.Component<
   TouchableHighlightProps,
   TouchableHighlightState,
 > {
-  _hideTimeout: ?TimeoutID;
+  _hideTimeout: ?ReturnType<typeof setTimeout>;
   _isMounted: boolean = false;
 
   state: TouchableHighlightState = {

packages/react-native/Libraries/LogBox/Data/LogBoxData.js

@@ -476,7 +476,7 @@ export function withSubscription(
     }
 
     _subscription: ?Subscription;
-    _updateStateOnMountTimeoutId: ?TimeoutID;
+    _updateStateOnMountTimeoutId: ?ReturnType<typeof setTimeout>;
 
     state: LogBoxStateSubscriptionState = {
       hasError: false,

packages/react-native/Libraries/Pressability/Pressability.js

@@ -371,12 +371,12 @@ let longPressDeactivationDistance = DEFAULT_LONG_PRESS_DEACTIVATION_DISTANCE;
 export default class Pressability {
   _config: PressabilityConfig;
   _eventHandlers: ?EventHandlers = null;
-  _hoverInDelayTimeout: ?TimeoutID = null;
-  _hoverOutDelayTimeout: ?TimeoutID = null;
+  _hoverInDelayTimeout: ?ReturnType<typeof setTimeout> = null;
+  _hoverOutDelayTimeout: ?ReturnType<typeof setTimeout> = null;
   _isHovered: boolean = false;
-  _longPressDelayTimeout: ?TimeoutID = null;
-  _pressDelayTimeout: ?TimeoutID = null;
-  _pressOutDelayTimeout: ?TimeoutID = null;
+  _longPressDelayTimeout: ?ReturnType<typeof setTimeout> = null;
+  _pressDelayTimeout: ?ReturnType<typeof setTimeout> = null;
+  _pressOutDelayTimeout: ?ReturnType<typeof setTimeout> = null;
   _responderID: ?number | HostInstance = null;
   _responderRegion: ?Readonly<{
     bottom: number,

packages/react-native/src/private/animated/createAnimatedPropsHook.js

@@ -56,7 +56,7 @@ export default function createAnimatedPropsHook(
   ): [ReducedProps<TProps>, React.RefCallback<TInstance>] {
     const [, scheduleUpdate] = useReducer<number, void>(count => count + 1, 0);
     const onUpdateRef = useRef<UpdateCallback | null>(null);
-    const timerRef = useRef<TimeoutID | null>(null);
+    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
     const rootTag = useContext(RootTagContext);
 

packages/rn-tester/IntegrationTests/TimersTest.js

@@ -27,10 +27,10 @@ type ImmediateID = Object;
 
 class TimersTest extends React.Component<Props, State> {
   _nextTest = () => {};
-  _interval: ?IntervalID = null;
+  _interval: ?ReturnType<typeof setInterval> = null;
 
-  _timeoutIDs: Set<TimeoutID> = new Set();
-  _intervalIDs: Set<IntervalID> = new Set();
+  _timeoutIDs: Set<ReturnType<typeof setTimeout>> = new Set();
+  _intervalIDs: Set<ReturnType<typeof setInterval>> = new Set();
   _immediateIDs: Set<ImmediateID> = new Set();
   _animationFrameIDs: Set<number> = new Set();
 
@@ -39,8 +39,8 @@ class TimersTest extends React.Component<Props, State> {
     done: false,
   };
 
-  setTimeout(fn: () => void, time: number): TimeoutID {
-    const id: TimeoutID = setTimeout(() => {
+  setTimeout(fn: () => void, time: number): ReturnType<typeof setTimeout> {
+    const id: ReturnType<typeof setTimeout> = setTimeout(() => {
       this._timeoutIDs.delete(id);
       fn();
     }, time);
@@ -50,12 +50,12 @@ class TimersTest extends React.Component<Props, State> {
     return id;
   }
 
-  clearTimeout(id: TimeoutID) {
+  clearTimeout(id: ReturnType<typeof setTimeout>) {
     this._timeoutIDs.delete(id);
     clearTimeout(id);
   }
 
-  setInterval(fn: () => void, time: number): IntervalID {
+  setInterval(fn: () => void, time: number): ReturnType<typeof setInterval> {
     const id = setInterval(() => {
       fn();
     }, time);
@@ -65,7 +65,7 @@ class TimersTest extends React.Component<Props, State> {
     return id;
   }
 
-  clearInterval(id: IntervalID) {
+  clearInterval(id: ReturnType<typeof setInterval>) {
     this._intervalIDs.delete(id);
     clearInterval(id);
   }

packages/rn-tester/js/examples/Accessibility/AccessibilityExample.js

@@ -1251,13 +1251,13 @@ class FakeSliderExampleForAccessibilityValue extends React.Component<
 }
 
 class AnnounceForAccessibility extends React.Component<{}> {
-  _handleOnPress = (): TimeoutID =>
+  _handleOnPress = (): ReturnType<typeof setTimeout> =>
     setTimeout(
       () => AccessibilityInfo.announceForAccessibility('Announcement Test'),
       1000,
     );
 
-  _handleOnPressQueued = (): TimeoutID =>
+  _handleOnPressQueued = (): ReturnType<typeof setTimeout> =>
     setTimeout(
       () =>
         AccessibilityInfo.announceForAccessibilityWithOptions(

packages/rn-tester/js/examples/ActivityIndicator/ActivityIndicatorExample.js

@@ -16,7 +16,7 @@ import {useCallback, useEffect, useRef, useState} from 'react';
 import {ActivityIndicator, StyleSheet, View} from 'react-native';
 
 function ToggleAnimatingActivityIndicator() {
-  const timer = useRef<void | TimeoutID>();
+  const timer = useRef<void | ReturnType<typeof setTimeout>>();
 
   const [animating, setAnimating] = useState(true);
 

packages/rn-tester/js/examples/Experimental/PlatformTest/usePlatformTestHarness.js

@@ -42,7 +42,7 @@ function constructAsyncTestHook(
   return (description: string, timeoutMs?: number = 10000) => {
     const assertionsRef = useRef<Array<PlatformTestAssertionResult>>([]);
 
-    const timeoutIDRef = useRef<TimeoutID | null>(null);
+    const timeoutIDRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
     const timeoutHandler = useCallback(() => {
       timeoutIDRef.current = null;
@@ -148,7 +148,9 @@ export default function usePlatformTestHarness(): PlatformTestHarnessHookResult
   // we use a basic debouncing logic to minimize the number of re-renders
   // caused by adding test results
   const resultQueueRef = useRef<Array<PlatformTestResult>>([]);
-  const schedulerTimeoutIdRef = useRef<null | TimeoutID>(null);
+  const schedulerTimeoutIdRef = useRef<null | ReturnType<typeof setTimeout>>(
+    null,
+  );
 
   const commitResults = useCallback(() => {
     const queuedResults = resultQueueRef.current;

packages/rn-tester/js/examples/Layout/LayoutAnimationExample.js

@@ -265,7 +265,7 @@ class LayoutUpdateExample extends React.Component<
     height: 100,
   };
 
-  timeout: TimeoutID | null = null;
+  timeout: ReturnType<typeof setTimeout> | null = null;
 
   componentWillUnmount() {
     this._clearTimeout();

packages/rn-tester/js/examples/Timer/TimerExample.js

@@ -155,9 +155,9 @@ class TimerTester extends React.Component<TimerTesterProps> {
   _ii = 0;
   _iters = 0;
   _start = 0;
-  _timerId: ?TimeoutID = null;
+  _timerId: ?ReturnType<typeof setTimeout> = null;
   _rafId: ?number = null;
-  _intervalId: ?IntervalID = null;
+  _intervalId: ?ReturnType<typeof setInterval> = null;
   _immediateId: ?Object = null;
   _timerFn: ?() => any = null;
 

packages/rn-tester/js/examples/XHR/XHRExampleFetch.js

@@ -24,7 +24,7 @@ import {
 class XHRExampleFetch extends React.Component<any, any> {
   responseURL: ?string;
   responseHeaders: ?Object;
-  intervalId: ?IntervalID;
+  intervalId: ?ReturnType<typeof setInterval>;
 
   constructor(props: any) {
     super(props);

packages/rn-tester/js/types/RNTesterTypes.js

@@ -66,7 +66,7 @@ export type RNTesterNavigationState = {
 };
 
 export type RNTesterJsStallsState = {
-  stallIntervalId: ?IntervalID,
+  stallIntervalId: ?ReturnType<typeof setInterval>,
   busyTime: null | number,
   filteredStall: number,
   tracking: boolean,

packages/virtualized-lists/Lists/ViewabilityHelper.js

@@ -226,7 +226,7 @@ class ViewabilityHelper {
     }
     this._viewableIndices = viewableIndices;
     if (this._config.minimumViewTime) {
-      const handle: TimeoutID = setTimeout(() => {
+      const handle: ReturnType<typeof setTimeout> = setTimeout(() => {
         /* $FlowFixMe[incompatible-type] (>=0.63.0 site=react_native_fb) This
          * comment suppresses an error found when Flow v0.63 was deployed. To
          * see the error delete this comment and run Flow. */

packages/virtualized-lists/Lists/VirtualizedList.js

@@ -1272,7 +1272,7 @@ class VirtualizedList extends StateSafePureComponent<
   _scrollRef: ?React.ElementRef<typeof ScrollView> = null;
   _sentStartForContentLength = 0;
   _sentEndForContentLength = 0;
-  _updateCellsToRenderTimeoutID: ?TimeoutID = null;
+  _updateCellsToRenderTimeoutID: ?ReturnType<typeof setTimeout> = null;
   _viewabilityTuples: Array<ViewabilityHelperCallbackTuple> = [];
 
   _captureScrollRef = (ref: ?React.ElementRef<typeof ScrollView>) => {