react-native-windows 0.68.1 → 0.69.0-preview.1

package/Libraries/Events/EventPolyfill.js

@@ -0,0 +1,239 @@
+/**
+ * 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.
+ *
+ * @format
+ * @flow strict-local
+ */
+
+// https://dom.spec.whatwg.org/#dictdef-eventinit
+type Event$Init = {
+  bubbles?: boolean,
+  cancelable?: boolean,
+  composed?: boolean,
+  /** Non-standard. See `composed` instead. */
+  scoped?: boolean,
+  ...
+};
+
+/**
+ * This is a copy of the Event interface defined in Flow:
+ * https://github.com/facebook/flow/blob/741104e69c43057ebd32804dd6bcc1b5e97548ea/lib/dom.js
+ * which is itself a faithful interface of the W3 spec:
+ * https://dom.spec.whatwg.org/#interface-event
+ *
+ * Since Flow assumes that Event is provided and is on the global object,
+ * we must provide an implementation of Event for CustomEvent (and future
+ * alignment of React Native's event system with the W3 spec).
+ */
+interface IEvent {
+  constructor(type: string, eventInitDict?: Event$Init): void;
+  /**
+   * Returns the type of event, e.g. "click", "hashchange", or "submit".
+   */
+  +type: string;
+  /**
+   * Returns the object to which event is dispatched (its target).
+   */
+  +target: EventTarget; // TODO: nullable
+  /** @deprecated */
+  +srcElement: Element; // TODO: nullable
+  /**
+   * Returns the object whose event listener's callback is currently being invoked.
+   */
+  +currentTarget: EventTarget; // TODO: nullable
+  /**
+   * Returns the invocation target objects of event's path (objects on which
+   * listeners will be invoked), except for any nodes in shadow trees of which
+   * the shadow root's mode is "closed" that are not reachable from event's
+   * currentTarget.
+   */
+  composedPath(): Array<EventTarget>;
+
+  +NONE: number;
+  +AT_TARGET: number;
+  +BUBBLING_PHASE: number;
+  +CAPTURING_PHASE: number;
+  /**
+   * Returns the event's phase, which is one of NONE, CAPTURING_PHASE, AT_TARGET,
+   * and BUBBLING_PHASE.
+   */
+  +eventPhase: number;
+
+  /**
+   * When dispatched in a tree, invoking this method prevents event from reaching
+   * any objects other than the current object.
+   */
+  stopPropagation(): void;
+  /**
+   * Invoking this method prevents event from reaching any registered event
+   * listeners after the current one finishes running and, when dispatched in a
+   * tree, also prevents event from reaching any other objects.
+   */
+  stopImmediatePropagation(): void;
+
+  /**
+   * Returns true or false depending on how event was initialized. True if
+   * event goes through its target's ancestors in reverse tree order, and
+   * false otherwise.
+   */
+  +bubbles: boolean;
+  /**
+   * Returns true or false depending on how event was initialized. Its
+   * return value does not always carry meaning, but true can indicate
+   * that part of the operation during which event was dispatched, can
+   * be canceled by invoking the preventDefault() method.
+   */
+  +cancelable: boolean;
+  // returnValue: boolean; // legacy, and some subclasses still define it as a string!
+  /**
+   * If invoked when the cancelable attribute value is true, and while
+   * executing a listener for the event with passive set to false, signals to
+   * the operation that caused event to be dispatched that it needs to be
+   * canceled.
+   */
+  preventDefault(): void;
+  /**
+   * Returns true if preventDefault() was invoked successfully to indicate
+   * cancelation, and false otherwise.
+   */
+  +defaultPrevented: boolean;
+  /**
+   * Returns true or false depending on how event was initialized. True if
+   * event invokes listeners past a ShadowRoot node that is the root of its
+   * target, and false otherwise.
+   */
+  +composed: boolean;
+
+  /**
+   * Returns true if event was dispatched by the user agent, and false otherwise.
+   */
+  +isTrusted: boolean;
+  /**
+   * Returns the event's timestamp as the number of milliseconds measured relative
+   * to the time origin.
+   */
+  +timeStamp: number;
+
+  /** Non-standard. See Event.prototype.composedPath */
+  +deepPath?: () => EventTarget[];
+  /** Non-standard. See Event.prototype.composed */
+  +scoped: boolean;
+
+  /**
+   * @deprecated
+   */
+  initEvent(type: string, bubbles: boolean, cancelable: boolean): void;
+}
+
+class EventPolyfill implements IEvent {
+  type: string;
+  bubbles: boolean;
+  cancelable: boolean;
+  composed: boolean;
+  // Non-standard. See `composed` instead.
+  scoped: boolean;
+  isTrusted: boolean;
+  defaultPrevented: boolean;
+  timeStamp: number;
+
+  // https://developer.mozilla.org/en-US/docs/Web/API/Event/eventPhase
+  NONE: number;
+  AT_TARGET: number;
+  BUBBLING_PHASE: number;
+  CAPTURING_PHASE: number;
+
+  eventPhase: number;
+
+  currentTarget: EventTarget; // TODO: nullable
+  target: EventTarget; // TODO: nullable
+  /** @deprecated */
+  srcElement: Element; // TODO: nullable
+
+  // React Native-specific: proxy data to a SyntheticEvent when
+  // certain methods are called.
+  // SyntheticEvent will also have a reference to this instance -
+  // it is circular - and both classes use this reference to keep
+  // data with the other in sync.
+  _syntheticEvent: mixed;
+
+  constructor(type: string, eventInitDict?: Event$Init): void {
+    this.type = type;
+    this.bubbles = !!(eventInitDict?.bubbles || false);
+    this.cancelable = !!(eventInitDict?.cancelable || false);
+    this.composed = !!(eventInitDict?.composed || false);
+    this.scoped = !!(eventInitDict?.scoped || false);
+
+    // TODO: somehow guarantee that only "private" instantiations of Event
+    // can set this to true
+    this.isTrusted = false;
+
+    // TODO: in the future we'll want to make sure this has the same
+    // time-basis as events originating from native
+    this.timeStamp = Date.now();
+
+    this.defaultPrevented = false;
+
+    // https://developer.mozilla.org/en-US/docs/Web/API/Event/eventPhase
+    this.NONE = 0;
+    this.AT_TARGET = 1;
+    this.BUBBLING_PHASE = 2;
+    this.CAPTURING_PHASE = 3;
+    this.eventPhase = this.NONE;
+
+    // $FlowFixMe
+    this.currentTarget = null;
+    // $FlowFixMe
+    this.target = null;
+    // $FlowFixMe
+    this.srcElement = null;
+  }
+
+  composedPath(): Array<EventTarget> {
+    throw new Error('TODO: not yet implemented');
+  }
+
+  preventDefault(): void {
+    this.defaultPrevented = true;
+
+    if (this._syntheticEvent != null) {
+      // $FlowFixMe
+      this._syntheticEvent.preventDefault();
+    }
+  }
+
+  initEvent(type: string, bubbles: boolean, cancelable: boolean): void {
+    throw new Error(
+      'TODO: not yet implemented. This method is also deprecated.',
+    );
+  }
+
+  stopImmediatePropagation(): void {
+    throw new Error('TODO: not yet implemented');
+  }
+
+  stopPropagation(): void {
+    if (this._syntheticEvent != null) {
+      // $FlowFixMe
+      this._syntheticEvent.stopPropagation();
+    }
+  }
+
+  setSyntheticEvent(value: mixed): void {
+    this._syntheticEvent = value;
+  }
+}
+
+// Assertion magic for polyfill follows.
+declare var checkEvent: Event;
+
+/*::
+// This can be a strict mode error at runtime so put it in a Flow comment.
+(checkEvent: IEvent);
+*/
+
+global.Event = EventPolyfill;
+
+export default EventPolyfill;

package/Libraries/Image/Image.android.js

@@ -306,12 +306,6 @@ Image.queryCache = queryCache;
  * comment and run Flow. */
 Image.resolveAssetSource = resolveAssetSource;
 
-/**
- * Switch to `deprecated-react-native-prop-types` for compatibility with future
- * releases. This is deprecated and will be removed in the future.
- */
-Image.propTypes = require('deprecated-react-native-prop-types').ImagePropTypes;
-
 const styles = StyleSheet.create({
   base: {
     overflow: 'hidden',

package/Libraries/Image/Image.ios.js

@@ -232,12 +232,6 @@ Image.queryCache = queryCache;
  * delete this comment and run Flow. */
 Image.resolveAssetSource = resolveAssetSource;
 
-/**
- * Switch to `deprecated-react-native-prop-types` for compatibility with future
- * releases. This is deprecated and will be removed in the future.
- */
-Image.propTypes = require('deprecated-react-native-prop-types').ImagePropTypes;
-
 const styles = StyleSheet.create({
   base: {
     overflow: 'hidden',

package/Libraries/Image/Image.windows.js

@@ -145,7 +145,7 @@ let Image = (props: ImagePropsType, forwardedRef) => {
   return (
     // [Windows
     <TextAncestor.Consumer>
-      {(hasTextAncestor) => {
+      {hasTextAncestor => {
         invariant(
           !hasTextAncestor,
           'Nesting of <Image> within <Text> is not currently supported.',
@@ -154,7 +154,7 @@ let Image = (props: ImagePropsType, forwardedRef) => {
 
         return (
           <ImageAnalyticsTagContext.Consumer>
-            {(analyticTag) => {
+            {analyticTag => {
               return (
                 <ImageViewNativeComponent
                   {...props}
@@ -248,12 +248,6 @@ Image.queryCache = queryCache;
  * delete this comment and run Flow. */
 Image.resolveAssetSource = resolveAssetSource;
 
-/**
- * Switch to `deprecated-react-native-prop-types` for compatibility with future
- * releases. This is deprecated and will be removed in the future.
- */
-Image.propTypes = require('deprecated-react-native-prop-types').ImagePropTypes;
-
 const styles = StyleSheet.create({
   base: {
     overflow: 'hidden',

package/Libraries/Image/ImageViewNativeComponent.js

@@ -12,7 +12,11 @@ import type {ResolvedAssetSource} from './AssetSourceResolver';
 import type {ImageProps} from './ImageProps';
 import type {ViewProps} from '../Components/View/ViewPropTypes';
 import * as NativeComponentRegistry from '../NativeComponent/NativeComponentRegistry';
-import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
+import {ConditionallyIgnoredEventHandlers} from '../NativeComponent/ViewConfigIgnore';
+import type {
+  HostComponent,
+  PartialViewConfig,
+} from '../Renderer/shims/ReactNativeTypes';
 import type {
   ColorValue,
   DangerouslyImpreciseStyle,
@@ -37,7 +41,7 @@ type Props = $ReadOnly<{
   loadingIndicatorSrc?: ?string,
 }>;
 
-const ImageViewViewConfig =
+export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
   Platform.OS === 'android'
     ? {
         uiViewClassName: 'RCTImageView',
@@ -125,10 +129,21 @@ const ImageViewViewConfig =
           tintColor: {
             process: require('../StyleSheet/processColor'),
           },
+          ...ConditionallyIgnoredEventHandlers({
+            onLoadStart: true,
+            onLoad: true,
+            onLoadEnd: true,
+            onProgress: true,
+            onError: true,
+            onPartialLoad: true,
+          }),
         },
       };
 
 const ImageViewNativeComponent: HostComponent<Props> =
-  NativeComponentRegistry.get<Props>('RCTImageView', () => ImageViewViewConfig);
+  NativeComponentRegistry.get<Props>(
+    'RCTImageView',
+    () => __INTERNAL_VIEW_CONFIG,
+  );
 
 export default ImageViewNativeComponent;

package/Libraries/Image/TextInlineImageNativeComponent.js

@@ -10,7 +10,10 @@
 
 'use strict';
 
-import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
+import type {
+  HostComponent,
+  PartialViewConfig,
+} from '../Renderer/shims/ReactNativeTypes';
 import type {ViewProps} from '../Components/View/ViewPropTypes';
 import type {ImageResizeMode} from './ImageResizeMode';
 import * as NativeComponentRegistry from '../NativeComponent/NativeComponentRegistry';
@@ -24,19 +27,24 @@ type NativeProps = $ReadOnly<{
   headers?: ?{[string]: string},
 }>;
 
-const TextInlineImage: HostComponent<NativeProps> =
-  NativeComponentRegistry.get<NativeProps>('RCTTextInlineImage', () => ({
-    uiViewClassName: 'RCTTextInlineImage',
-    bubblingEventTypes: {},
-    directEventTypes: {},
-    validAttributes: {
-      resizeMode: true,
-      src: true,
-      tintColor: {
-        process: require('../StyleSheet/processColor'),
-      },
-      headers: true,
+export const __INTERNAL_VIEW_CONFIG: PartialViewConfig = {
+  uiViewClassName: 'RCTTextInlineImage',
+  bubblingEventTypes: {},
+  directEventTypes: {},
+  validAttributes: {
+    resizeMode: true,
+    src: true,
+    tintColor: {
+      process: require('../StyleSheet/processColor'),
     },
-  }));
+    headers: true,
+  },
+};
+
+const TextInlineImage: HostComponent<NativeProps> =
+  NativeComponentRegistry.get<NativeProps>(
+    'RCTTextInlineImage',
+    () => __INTERNAL_VIEW_CONFIG,
+  );
 
-module.exports = TextInlineImage;
+export default TextInlineImage;

package/Libraries/Inspector/Inspector.js

@@ -19,6 +19,7 @@ const React = require('react');
 const ReactNative = require('../Renderer/shims/ReactNative');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const View = require('../Components/View/View');
+const ReactNativeStyleAttributes = require('../Components/View/ReactNativeStyleAttributes');
 
 const invariant = require('invariant');
 
@@ -47,10 +48,7 @@ const renderers = findRenderers();
 // Required for React DevTools to view/edit React Native styles in Flipper.
 // Flipper doesn't inject these values when initializing DevTools.
 hook.resolveRNStyle = require('../StyleSheet/flattenStyle');
-const viewConfig = require('../Components/View/ReactNativeViewViewConfig');
-hook.nativeStyleEditorValidAttributes = Object.keys(
-  viewConfig.validAttributes.style,
-);
+hook.nativeStyleEditorValidAttributes = Object.keys(ReactNativeStyleAttributes);
 
 function findRenderers(): $ReadOnlyArray<ReactRenderer> {
   const allRenderers = Array.from(hook.renderers.values());

package/Libraries/Interaction/BridgeSpyStallHandler.js

@@ -10,14 +10,15 @@
 
 'use strict';
 
+import type {SpyData} from '../BatchedBridge/MessageQueue';
 const JSEventLoopWatchdog = require('./JSEventLoopWatchdog');
-const MessageQueue = require('../BatchedBridge/MessageQueue');
 
+const MessageQueue = require('../BatchedBridge/MessageQueue');
 const infoLog = require('../Utilities/infoLog');
 
 const BridgeSpyStallHandler = {
   register: function () {
-    let spyBuffer = [];
+    let spyBuffer: Array<SpyData> = [];
     MessageQueue.spy(data => {
       spyBuffer.push(data);
     });
@@ -27,7 +28,7 @@ const BridgeSpyStallHandler = {
         infoLog(
           spyBuffer.length + ' bridge messages during stall: ',
           spyBuffer.map(info => {
-            let args = '<args>';
+            let args: string | Array<?string> = '<args>';
             try {
               args = JSON.stringify(info.args);
             } catch (e1) {

package/Libraries/Interaction/InteractionManager.js

@@ -91,7 +91,6 @@ const InteractionManager = {
       onFulfill?: ?(void) => ?(Promise<U> | U),
       onReject?: ?(error: mixed) => ?(Promise<U> | U),
     ) => Promise<U>,
-    done: () => void,
     cancel: () => void,
     ...
   } {
@@ -110,16 +109,6 @@ const InteractionManager = {
     return {
       // $FlowFixMe[method-unbinding] added when improving typing for this parameters
       then: promise.then.bind(promise),
-      done: (...args) => {
-        // $FlowFixMe[method-unbinding] added when improving typing for this parameters
-        if (promise.done) {
-          return promise.done(...args);
-        } else {
-          console.warn(
-            'Tried to call done when not supported by current Promise implementation.',
-          );
-        }
-      },
       cancel: function () {
         _taskQueue.cancelTasks(tasks);
       },
@@ -165,7 +154,7 @@ const _interactionSet = new Set();
 const _addInteractionSet = new Set();
 const _deleteInteractionSet = new Set();
 const _taskQueue = new TaskQueue({onMoreTasks: _scheduleUpdate});
-let _nextUpdateHandle = 0;
+let _nextUpdateHandle: $FlowFixMe | TimeoutID = 0;
 let _inc = 0;
 let _deadline = -1;
 

package/Libraries/Interaction/TaskQueue.js

@@ -171,10 +171,11 @@ class TaskQueue {
         this.hasTasksToProcess() && this._onMoreTasks();
       })
       .catch(ex => {
-        ex.message = `TaskQueue: Error resolving Promise in task ${task.name}: ${ex.message}`;
-        throw ex;
-      })
-      .done();
+        setTimeout(() => {
+          ex.message = `TaskQueue: Error resolving Promise in task ${task.name}: ${ex.message}`;
+          throw ex;
+        }, 0);
+      });
   }
 }
 

package/Libraries/LayoutAnimation/LayoutAnimation.js

@@ -19,6 +19,7 @@ import type {
 } from '../Renderer/shims/ReactNativeTypes';
 
 import Platform from '../Utilities/Platform';
+import ReactNativeFeatureFlags from '../ReactNative/ReactNativeFeatureFlags';
 
 // Reexport type
 export type LayoutAnimationConfig = LayoutAnimationConfig_;
@@ -26,6 +27,13 @@ export type LayoutAnimationConfig = LayoutAnimationConfig_;
 type OnAnimationDidEndCallback = () => void;
 type OnAnimationDidFailCallback = () => void;
 
+let isLayoutAnimationEnabled: boolean =
+  ReactNativeFeatureFlags.isLayoutAnimationEnabled();
+
+function setEnabled(value: boolean) {
+  isLayoutAnimationEnabled = isLayoutAnimationEnabled;
+}
+
 /**
  * Configures the next commit to be animated.
  *
@@ -43,6 +51,10 @@ function configureNext(
     return;
   }
 
+  if (!isLayoutAnimationEnabled) {
+    return;
+  }
+
   // Since LayoutAnimations may possibly be disabled for now on iOS (Fabric),
   // or Android (non-Fabric) we race a setTimeout with animation completion,
   // in case onComplete is never called
@@ -181,6 +193,7 @@ const LayoutAnimation = {
   spring: (configureNext.bind(null, Presets.spring): (
     onAnimationDidEnd?: OnAnimationDidEndCallback,
   ) => void),
+  setEnabled,
 };
 
 module.exports = LayoutAnimation;

package/Libraries/Linking/Linking.js

@@ -8,7 +8,7 @@
  * @flow strict-local
  */
 
-import {type EventSubscription} from '../vendor/emitter/EventEmitter';
+import type {EventSubscription} from '../vendor/emitter/EventEmitter';
 import NativeEventEmitter from '../EventEmitter/NativeEventEmitter';
 import InteractionManager from '../Interaction/InteractionManager';
 import Platform from '../Utilities/Platform';

package/Libraries/Lists/FlatList.js

@@ -26,6 +26,7 @@ import type {
 } from './ViewabilityHelper';
 import type {RenderItemType, RenderItemProps} from './VirtualizedList';
 import {keyExtractor as defaultKeyExtractor} from './VirtualizeUtils';
+import memoizeOne from 'memoize-one';
 
 type RequiredProps<ItemT> = {|
   /**
@@ -141,6 +142,10 @@ type OptionalProps<ItemT> = {|
    * See `ScrollView` for flow type and further documentation.
    */
   fadingEdgeLength?: ?number,
+  /**
+   * Enable an optimization to memoize the item renderer to prevent unnecessary rerenders.
+   */
+  strictMode?: boolean,
 |};
 
 /**
@@ -578,9 +583,14 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
     };
   }
 
-  _renderer = () => {
-    const {ListItemComponent, renderItem, columnWrapperStyle} = this.props;
-    const numColumns = numColumnsOrDefault(this.props.numColumns);
+  _renderer = (
+    ListItemComponent: ?(React.ComponentType<any> | React.Element<any>),
+    renderItem: ?RenderItemType<ItemT>,
+    columnWrapperStyle: ?ViewStyleProp,
+    numColumns: ?number,
+    extraData: ?any,
+  ) => {
+    const cols = numColumnsOrDefault(numColumns);
 
     let virtualizedListRenderKey = ListItemComponent
       ? 'ListItemComponent'
@@ -605,7 +615,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
        * This comment suppresses an error found when Flow v0.111 was deployed.
        * To see the error, delete this comment and run Flow. */
       [virtualizedListRenderKey]: (info: RenderItemProps<ItemT>) => {
-        if (numColumns > 1) {
+        if (cols > 1) {
           const {item, index} = info;
           invariant(
             Array.isArray(item),
@@ -616,7 +626,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
               {item.map((it, kk) => {
                 const element = renderer({
                   item: it,
-                  index: index * numColumns + kk,
+                  index: index * cols + kk,
                   separators: info.separators,
                 });
                 return element != null ? (
@@ -632,14 +642,19 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
     };
   };
 
+  _memoizedRenderer = memoizeOne(this._renderer);
+
   render(): React.Node {
     const {
       numColumns,
       columnWrapperStyle,
       removeClippedSubviews: _removeClippedSubviews,
+      strictMode = false,
       ...restProps
     } = this.props;
 
+    const renderer = strictMode ? this._memoizedRenderer : this._renderer;
+
     return (
       <VirtualizedList
         {...restProps}
@@ -651,7 +666,13 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
         removeClippedSubviews={removeClippedSubviewsOrDefault(
           _removeClippedSubviews,
         )}
-        {...this._renderer()}
+        {...renderer(
+          this.props.ListItemComponent,
+          this.props.renderItem,
+          columnWrapperStyle,
+          numColumns,
+          this.props.extraData,
+        )}
       />
     );
   }