react-native-windows 0.80.1 → 0.81.0-preview.4

package/Libraries/Interaction/InteractionManager.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 
 import type {EventSubscription} from '../vendor/emitter/EventEmitter';
@@ -15,7 +15,6 @@ import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNa
 import EventEmitter from '../vendor/emitter/EventEmitter';
 
 const BatchedBridge = require('../BatchedBridge/BatchedBridge').default;
-const infoLog = require('../Utilities/infoLog').default;
 const TaskQueue = require('./TaskQueue').default;
 const invariant = require('invariant');
 
@@ -31,55 +30,6 @@ const _emitter = new EventEmitter<{
 const DEBUG_DELAY: 0 = 0;
 const DEBUG: false = false;
 
-/**
- * InteractionManager allows long-running work to be scheduled after any
- * interactions/animations have completed. In particular, this allows JavaScript
- * animations to run smoothly.
- *
- * Applications can schedule tasks to run after interactions with the following:
- *
- * ```
- * InteractionManager.runAfterInteractions(() => {
- *   // ...long-running synchronous task...
- * });
- * ```
- *
- * Compare this to other scheduling alternatives:
- *
- * - requestAnimationFrame(): for code that animates a view over time.
- * - setImmediate/setTimeout(): run code later, note this may delay animations.
- * - runAfterInteractions(): run code later, without delaying active animations.
- *
- * The touch handling system considers one or more active touches to be an
- * 'interaction' and will delay `runAfterInteractions()` callbacks until all
- * touches have ended or been cancelled.
- *
- * InteractionManager also allows applications to register animations by
- * creating an interaction 'handle' on animation start, and clearing it upon
- * completion:
- *
- * ```
- * var handle = InteractionManager.createInteractionHandle();
- * // run animation... (`runAfterInteractions` tasks are queued)
- * // later, on animation completion:
- * InteractionManager.clearInteractionHandle(handle);
- * // queued tasks run if all handles were cleared
- * ```
- *
- * `runAfterInteractions` takes either a plain callback function, or a
- * `PromiseTask` object with a `gen` method that returns a `Promise`.  If a
- * `PromiseTask` is supplied, then it is fully resolved (including asynchronous
- * dependencies that also schedule more tasks via `runAfterInteractions`) before
- * starting on the next task that might have been queued up synchronously
- * earlier.
- *
- * By default, queued tasks are executed together in a loop in one
- * `setImmediate` batch. If `setDeadline` is called with a positive number, then
- * tasks will only be executed until the deadline (in terms of js event loop run
- * time) approaches, at which point execution will yield via setTimeout,
- * allowing events such as touches to start interactions and block queued tasks
- * from executing, making apps more responsive.
- */
 const InteractionManagerImpl = {
   Events: {
     interactionStart: 'interactionStart',
@@ -123,7 +73,7 @@ const InteractionManagerImpl = {
    * Notify manager that an interaction has started.
    */
   createInteractionHandle(): Handle {
-    DEBUG && infoLog('InteractionManager: create interaction handle');
+    DEBUG && console.log('InteractionManager: create interaction handle');
     _scheduleUpdate();
     const handle = ++_inc;
     _addInteractionSet.add(handle);
@@ -134,7 +84,7 @@ const InteractionManagerImpl = {
    * Notify manager that an interaction has completed.
    */
   clearInteractionHandle(handle: Handle) {
-    DEBUG && infoLog('InteractionManager: clear interaction handle');
+    DEBUG && console.log('InteractionManager: clear interaction handle');
     invariant(!!handle, 'InteractionManager: Must provide a handle to clear.');
     _scheduleUpdate();
     _addInteractionSet.delete(handle);
@@ -194,9 +144,17 @@ function _processUpdate() {
 
   if (interactionCount !== 0 && nextInteractionCount === 0) {
     // transition from 1+ --> 0 interactions
+    /* $FlowFixMe[prop-missing] Natural Inference rollout. See
+     * https://fburl.com/workplace/6291gfvu */
+    /* $FlowFixMe[invalid-computed-prop] Natural Inference rollout. See
+     * https://fburl.com/workplace/6291gfvu */
     _emitter.emit(InteractionManager.Events.interactionComplete);
   } else if (interactionCount === 0 && nextInteractionCount !== 0) {
     // transition from 0 --> 1+ interactions
+    /* $FlowFixMe[prop-missing] Natural Inference rollout. See
+     * https://fburl.com/workplace/6291gfvu */
+    /* $FlowFixMe[invalid-computed-prop] Natural Inference rollout. See
+     * https://fburl.com/workplace/6291gfvu */
     _emitter.emit(InteractionManager.Events.interactionStart);
   }
 
@@ -218,9 +176,61 @@ function _processUpdate() {
   _deleteInteractionSet.clear();
 }
 
+/**
+ * InteractionManager allows long-running work to be scheduled after any
+ * interactions/animations have completed. In particular, this allows JavaScript
+ * animations to run smoothly.
+ *
+ * Applications can schedule tasks to run after interactions with the following:
+ *
+ * ```
+ * InteractionManager.runAfterInteractions(() => {
+ *   // ...long-running synchronous task...
+ * });
+ * ```
+ *
+ * Compare this to other scheduling alternatives:
+ *
+ * - requestAnimationFrame(): for code that animates a view over time.
+ * - setImmediate/setTimeout(): run code later, note this may delay animations.
+ * - runAfterInteractions(): run code later, without delaying active animations.
+ *
+ * The touch handling system considers one or more active touches to be an
+ * 'interaction' and will delay `runAfterInteractions()` callbacks until all
+ * touches have ended or been cancelled.
+ *
+ * InteractionManager also allows applications to register animations by
+ * creating an interaction 'handle' on animation start, and clearing it upon
+ * completion:
+ *
+ * ```
+ * var handle = InteractionManager.createInteractionHandle();
+ * // run animation... (`runAfterInteractions` tasks are queued)
+ * // later, on animation completion:
+ * InteractionManager.clearInteractionHandle(handle);
+ * // queued tasks run if all handles were cleared
+ * ```
+ *
+ * `runAfterInteractions` takes either a plain callback function, or a
+ * `PromiseTask` object with a `gen` method that returns a `Promise`.  If a
+ * `PromiseTask` is supplied, then it is fully resolved (including asynchronous
+ * dependencies that also schedule more tasks via `runAfterInteractions`) before
+ * starting on the next task that might have been queued up synchronously
+ * earlier.
+ *
+ * By default, queued tasks are executed together in a loop in one
+ * `setImmediate` batch. If `setDeadline` is called with a positive number, then
+ * tasks will only be executed until the deadline (in terms of js event loop run
+ * time) approaches, at which point execution will yield via setTimeout,
+ * allowing events such as touches to start interactions and block queued tasks
+ * from executing, making apps more responsive.
+ *
+ * @deprecated
+ */
 const InteractionManager = (
   ReactNativeFeatureFlags.disableInteractionManager()
-    ? require('./InteractionManagerStub').default
+    ? // $FlowFixMe[incompatible-variance]
+      require('./InteractionManagerStub').default
     : InteractionManagerImpl
 ) as typeof InteractionManagerImpl;
 

package/Libraries/Interaction/NativeFrameRateLogger.js

@@ -10,4 +10,5 @@
 
 export * from '../../src/private/specs_DEPRECATED/modules/NativeFrameRateLogger';
 import NativeFrameRateLogger from '../../src/private/specs_DEPRECATED/modules/NativeFrameRateLogger';
+
 export default NativeFrameRateLogger;

package/Libraries/Interaction/TaskQueue.js

@@ -4,13 +4,12 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict
+ * @format
  */
 
 'use strict';
 
-const infoLog = require('../Utilities/infoLog').default;
 const invariant = require('invariant');
 
 export type SimpleTask = {
@@ -100,10 +99,10 @@ class TaskQueue {
       const task = queue.shift();
       try {
         if (typeof task === 'object' && task.gen) {
-          DEBUG && infoLog('TaskQueue: genPromise for task ' + task.name);
+          DEBUG && console.log('TaskQueue: genPromise for task ' + task.name);
           this._genPromise(task);
         } else if (typeof task === 'object' && task.run) {
-          DEBUG && infoLog('TaskQueue: run task ' + task.name);
+          DEBUG && console.log('TaskQueue: run task ' + task.name);
           task.run();
         } else {
           invariant(
@@ -111,7 +110,7 @@ class TaskQueue {
             'Expected Function, SimpleTask, or PromiseTask, but got:\n' +
               JSON.stringify(task, null, 2),
           );
-          DEBUG && infoLog('TaskQueue: run anonymous task');
+          DEBUG && console.log('TaskQueue: run anonymous task');
           task();
         }
       } catch (e) {
@@ -141,7 +140,7 @@ class TaskQueue {
     ) {
       this._queueStack.pop();
       DEBUG &&
-        infoLog('TaskQueue: popped queue: ', {
+        console.log('TaskQueue: popped queue: ', {
           stackIdx,
           queueStackSize: this._queueStack.length,
         });
@@ -159,13 +158,13 @@ class TaskQueue {
     this._queueStack.push({tasks: [], popable: false});
     const stackIdx = this._queueStack.length - 1;
     const stackItem = this._queueStack[stackIdx];
-    DEBUG && infoLog('TaskQueue: push new queue: ', {stackIdx});
-    DEBUG && infoLog('TaskQueue: exec gen task ' + task.name);
+    DEBUG && console.log('TaskQueue: push new queue: ', {stackIdx});
+    DEBUG && console.log('TaskQueue: exec gen task ' + task.name);
     task
       .gen()
       .then(() => {
         DEBUG &&
-          infoLog('TaskQueue: onThen for gen task ' + task.name, {
+          console.log('TaskQueue: onThen for gen task ' + task.name, {
             stackIdx,
             queueStackSize: this._queueStack.length,
           });

package/Libraries/Interaction/TouchHistoryMath.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 
 // $FlowFixMe[definition-cycle]

package/Libraries/LayoutAnimation/LayoutAnimation.js

@@ -11,7 +11,7 @@
 'use strict';
 
 import type {
-  LayoutAnimationConfig as LayoutAnimationConfig_,
+  LayoutAnimationConfig,
   LayoutAnimationProperty,
   LayoutAnimationType,
 } from '../Renderer/shims/ReactNativeTypes';
@@ -29,7 +29,7 @@ export type {
 } from '../Renderer/shims/ReactNativeTypes';
 
 // Reexport type
-export type LayoutAnimationConfig = LayoutAnimationConfig_;
+export type {LayoutAnimationConfig} from '../Renderer/shims/ReactNativeTypes';
 
 export type LayoutAnimationTypes = $ReadOnly<{
   [type in LayoutAnimationType]: type,
@@ -45,7 +45,7 @@ type OnAnimationDidFailCallback = () => void;
 let isLayoutAnimationEnabled: boolean =
   ReactNativeFeatureFlags.isLayoutAnimationEnabled();
 
-function setEnabled(value: boolean) {
+function setLayoutAnimationEnabled(value: boolean) {
   isLayoutAnimationEnabled = isLayoutAnimationEnabled;
 }
 
@@ -115,7 +115,7 @@ function configureNext(
   }
 }
 
-function create(
+function createLayoutAnimation(
   duration: number,
   type?: LayoutAnimationType,
   property?: LayoutAnimationProperty,
@@ -129,12 +129,16 @@ function create(
 }
 
 const Presets = {
-  easeInEaseOut: (create(
+  easeInEaseOut: (createLayoutAnimation(
     300,
     'easeInEaseOut',
     'opacity',
   ): LayoutAnimationConfig),
-  linear: (create(500, 'linear', 'opacity'): LayoutAnimationConfig),
+  linear: (createLayoutAnimation(
+    500,
+    'linear',
+    'opacity',
+  ): LayoutAnimationConfig),
   spring: ({
     duration: 700,
     create: {
@@ -180,7 +184,7 @@ const LayoutAnimation = {
   /**
    * Helper for creating a config for `configureNext`.
    */
-  create,
+  create: createLayoutAnimation,
   Types: Object.freeze({
     spring: 'spring',
     linear: 'linear',
@@ -208,7 +212,7 @@ const LayoutAnimation = {
   spring: (configureNext.bind(null, Presets.spring): (
     onAnimationDidEnd?: OnAnimationDidEndCallback,
   ) => void),
-  setEnabled,
+  setEnabled: setLayoutAnimationEnabled,
 };
 
 export default LayoutAnimation;

package/Libraries/Linking/Linking.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 
 import type {EventSubscription} from '../vendor/emitter/EventEmitter';

package/Libraries/Linking/NativeIntentAndroid.js

@@ -10,4 +10,5 @@
 
 export * from '../../src/private/specs_DEPRECATED/modules/NativeIntentAndroid';
 import NativeIntentAndroid from '../../src/private/specs_DEPRECATED/modules/NativeIntentAndroid';
+
 export default NativeIntentAndroid;

package/Libraries/Linking/NativeLinkingManager.js

@@ -10,4 +10,5 @@
 
 export * from '../../src/private/specs_DEPRECATED/modules/NativeLinkingManager';
 import NativeLinkingManager from '../../src/private/specs_DEPRECATED/modules/NativeLinkingManager';
+
 export default NativeLinkingManager;

package/Libraries/Lists/FlatList.d.ts

@@ -155,16 +155,20 @@ export interface FlatListProps<ItemT> extends VirtualizedListProps<ItemT> {
   removeClippedSubviews?: boolean | undefined;
 
   /**
-   * Fades out the edges of the scroll content.
+   * Controls the fading effect at the edges of the scroll content.
    *
-   * If the value is greater than 0, the fading edges will be set accordingly
-   * to the current scroll direction and position,
-   * indicating if there is more content to show.
+   * A value greater than 0 will apply the fading effect, indicating more content is available
+   * to scroll.
+   *
+   * You can specify a single number to apply the same fading length to both edges.
+   * Alternatively, use an object with `start` and `end` properties to set different
+   * fading lengths for the start and end of the scroll content.
    *
    * The default value is 0.
+   *
    * @platform android
    */
-  fadingEdgeLength?: number | undefined;
+  fadingEdgeLength?: number | {start: number; end: number} | undefined;
 }
 
 export abstract class FlatListComponent<

package/Libraries/Lists/FlatList.js

@@ -15,6 +15,7 @@ import type {
   ListRenderItemInfo,
   ViewabilityConfigCallbackPair,
   ViewToken,
+  VirtualizedListProps,
 } from '@react-native/virtualized-lists';
 
 import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
@@ -32,14 +33,14 @@ const invariant = require('invariant');
 const VirtualizedList = VirtualizedLists.VirtualizedList;
 const defaultKeyExtractor = VirtualizedLists.keyExtractor;
 
-type RequiredProps<ItemT> = {
+type RequiredFlatListProps<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 OptionalFlatListProps<ItemT> = {
   /**
    * Takes an item from `data` and renders it into the list. Example usage:
    *
@@ -145,7 +146,7 @@ type OptionalProps<ItemT> = {
   /**
    * See `ScrollView` for flow type and further documentation.
    */
-  fadingEdgeLength?: ?number,
+  fadingEdgeLength?: ?number | {start: number, end: number},
   /**
    * Enable an optimization to memoize the item renderer to prevent unnecessary rerenders.
    */
@@ -177,12 +178,10 @@ function isArrayLike(data: mixed): boolean {
 }
 
 type FlatListBaseProps<ItemT> = {
-  ...RequiredProps<ItemT>,
-  ...OptionalProps<ItemT>,
+  ...RequiredFlatListProps<ItemT>,
+  ...OptionalFlatListProps<ItemT>,
 };
 
-type VirtualizedListProps = React.ElementConfig<typeof VirtualizedList>;
-
 export type FlatListProps<ItemT> = {
   ...Omit<
     VirtualizedListProps,

package/Libraries/Lists/SectionList.js

@@ -39,7 +39,7 @@ export type {
   ScrollToLocationParamsType as SectionListScrollParams,
 };
 
-type RequiredProps<ItemT, SectionT = DefaultSectionT> = {
+type RequiredSectionListProps<ItemT, SectionT = DefaultSectionT> = {
   /**
    * The actual data to render, akin to the `data` prop in [`<FlatList>`](https://reactnative.dev/docs/flatlist).
    *
@@ -64,7 +64,7 @@ export type SectionListRenderItem<ItemT, SectionT = DefaultSectionT> = (
   info: SectionListRenderItemInfo<ItemT, SectionT>,
 ) => React.Node | null;
 
-type OptionalProps<ItemT, SectionT = DefaultSectionT> = {
+type OptionalSectionListProps<ItemT, SectionT = DefaultSectionT> = {
   /**
    * Default renderer for every item in every section. Can be over-ridden on a per-section basis.
    */
@@ -110,8 +110,8 @@ export type SectionListProps<ItemT, SectionT = DefaultSectionT> = {
     VirtualizedSectionListProps<ItemT, SectionT>,
     'getItem' | 'getItemCount' | 'renderItem' | 'keyExtractor',
   >,
-  ...RequiredProps<ItemT, SectionT>,
-  ...OptionalProps<ItemT, SectionT>,
+  ...RequiredSectionListProps<ItemT, SectionT>,
+  ...OptionalSectionListProps<ItemT, SectionT>,
 };
 
 /**

package/Libraries/Lists/SectionListModern.js

@@ -21,7 +21,7 @@ import type {
 import Platform from '../Utilities/Platform';
 import VirtualizedLists from '@react-native/virtualized-lists';
 import * as React from 'react';
-import {forwardRef, useImperativeHandle, useRef} from 'react';
+import {useImperativeHandle, useRef} from 'react';
 
 const VirtualizedSectionList = VirtualizedLists.VirtualizedSectionList;
 
@@ -168,7 +168,13 @@ export type Props<ItemT, SectionT = DefaultSectionT> = $ReadOnly<{
 const SectionList: component(
   ref?: React.RefSetter<any>,
   ...Props<any, DefaultSectionT>
-) = forwardRef<Props<any, DefaultSectionT>, any>((props, ref) => {
+) = ({
+  ref,
+  ...props
+}: {
+  ref?: React.RefSetter<any>,
+  ...Props<any, DefaultSectionT>,
+}) => {
   const propsWithDefaults = {
     stickySectionHeadersEnabled: Platform.OS === 'ios',
     ...props,
@@ -237,6 +243,6 @@ const SectionList: component(
       getItem={(items, index) => items[index]}
     />
   );
-});
+};
 
 export default SectionList;

package/Libraries/Lists/VirtualizedList.js

@@ -13,7 +13,8 @@
 import VirtualizedLists from '@react-native/virtualized-lists';
 
 type VirtualizedListType = typeof VirtualizedLists.VirtualizedList;
-const VirtualizedList: VirtualizedListType = VirtualizedLists.VirtualizedList;
+const VirtualizedListComponent: VirtualizedListType =
+  VirtualizedLists.VirtualizedList;
 
 export type {
   ListRenderItemInfo,
@@ -21,4 +22,4 @@ export type {
   Separators,
   VirtualizedListProps,
 } from '@react-native/virtualized-lists';
-export default VirtualizedList;
+export default VirtualizedListComponent;

package/Libraries/LogBox/Data/LogBoxData.js

@@ -413,8 +413,8 @@ export function observe(observer: Observer): Subscription {
   };
 }
 
-type Props = $ReadOnly<{}>;
-type State = $ReadOnly<{
+type LogBoxStateSubscriptionProps = $ReadOnly<{}>;
+type LogBoxStateSubscriptionState = $ReadOnly<{
   logs: LogBoxLogs,
   isDisabled: boolean,
   hasError: boolean,
@@ -432,7 +432,10 @@ type SubscribedComponent = React.ComponentType<
 export function withSubscription(
   WrappedComponent: SubscribedComponent,
 ): React.ComponentType<{}> {
-  class LogBoxStateSubscription extends React.Component<Props, State> {
+  class LogBoxStateSubscription extends React.Component<
+    LogBoxStateSubscriptionProps,
+    LogBoxStateSubscriptionState,
+  > {
     static getDerivedStateFromError(): {hasError: boolean} {
       return {hasError: true};
     }
@@ -446,7 +449,7 @@ export function withSubscription(
 
     _subscription: ?Subscription;
 
-    state: State = {
+    state: LogBoxStateSubscriptionState = {
       logs: new Set(),
       isDisabled: false,
       hasError: false,

package/Libraries/LogBox/Data/parseLogBoxLog.js

@@ -509,6 +509,8 @@ export function parseLogBoxLog(args: $ReadOnlyArray<mixed>): {
   return {
     ...parseInterpolation(argsWithoutComponentStack),
     componentStack,
+    /* $FlowFixMe[incompatible-return] Natural Inference rollout. See
+     * https://fburl.com/workplace/6291gfvu */
     componentStackType,
   };
 }