react-native 0.0.0-263478b91 → 0.0.0-268efb102

package/Libraries/Core/setUpTimers.js

@@ -10,10 +10,25 @@
 
 'use strict';
 
-// In bridgeless mode, timers are host functions installed from cpp.
-if (!global.RN$Bridgeless) {
-  const {polyfillGlobal} = require('../Utilities/PolyfillFunctions');
+const {polyfillGlobal} = require('../Utilities/PolyfillFunctions');
+const {isNativeFunction} = require('../Utilities/FeatureDetection');
+
+if (__DEV__) {
+  if (typeof global.Promise !== 'function') {
+    console.error('Promise should exist before setting up timers.');
+  }
+}
+
+// Currently, Hermes `Promise` is implemented via Internal Bytecode.
+const hasHermesPromiseQueuedToJSVM =
+  global.HermesInternal?.hasPromise?.() === true &&
+  global.HermesInternal?.useEngineQueue?.() === true;
 
+const hasNativePromise = isNativeFunction(Promise);
+const hasPromiseQueuedToJSVM = hasNativePromise || hasHermesPromiseQueuedToJSVM;
+
+// In bridgeless mode, timers are host functions installed from cpp.
+if (global.RN$Bridgeless !== true) {
   /**
    * Set up timers.
    * You can use this module directly, or just require InitializeCore.
@@ -22,13 +37,57 @@ if (!global.RN$Bridgeless) {
     polyfillGlobal(name, () => require('./Timers/JSTimers')[name]);
   };
   defineLazyTimer('setTimeout');
-  defineLazyTimer('setInterval');
-  defineLazyTimer('setImmediate');
   defineLazyTimer('clearTimeout');
+  defineLazyTimer('setInterval');
   defineLazyTimer('clearInterval');
-  defineLazyTimer('clearImmediate');
   defineLazyTimer('requestAnimationFrame');
   defineLazyTimer('cancelAnimationFrame');
   defineLazyTimer('requestIdleCallback');
   defineLazyTimer('cancelIdleCallback');
 }
+
+/**
+ * Set up immediate APIs, which is required to use the same microtask queue
+ * as the Promise.
+ */
+if (hasPromiseQueuedToJSVM) {
+  // When promise queues to the JSVM microtasks queue, we shim the immedaite
+  // APIs via `queueMicrotask` to maintain the backward compatibility.
+  polyfillGlobal(
+    'setImmediate',
+    () => require('./Timers/immediateShim').setImmediate,
+  );
+  polyfillGlobal(
+    'clearImmediate',
+    () => require('./Timers/immediateShim').clearImmediate,
+  );
+} else {
+  // When promise was polyfilled hence is queued to the RN microtask queue,
+  // we polyfill the immediate APIs as aliases to the ReactNativeMicrotask APIs.
+  // Note that in bridgeless mode, immediate APIs are installed from cpp.
+  if (global.RN$Bridgeless !== true) {
+    polyfillGlobal(
+      'setImmediate',
+      () => require('./Timers/JSTimers').queueReactNativeMicrotask,
+    );
+    polyfillGlobal(
+      'clearImmediate',
+      () => require('./Timers/JSTimers').clearReactNativeMicrotask,
+    );
+  }
+}
+
+/**
+ * Set up the microtask queueing API, which is required to use the same
+ * microtask queue as the Promise.
+ */
+if (hasHermesPromiseQueuedToJSVM) {
+  // Fast path for Hermes.
+  polyfillGlobal('queueMicrotask', () => global.HermesInternal?.enqueueJob);
+} else {
+  // Polyfill it with promise (regardless it's polyfiled or native) otherwise.
+  polyfillGlobal(
+    'queueMicrotask',
+    () => require('./Timers/queueMicrotask.js').default,
+  );
+}

package/Libraries/DeprecatedPropTypes/DeprecatedImagePropType.android.js

@@ -0,0 +1,131 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+'use strict';
+
+const DeprecatedImageStylePropTypes = require('./DeprecatedImageStylePropTypes');
+const DeprecatedStyleSheetPropType = require('./DeprecatedStyleSheetPropType');
+const DeprecatedViewPropTypes = require('./DeprecatedViewPropTypes');
+const PropTypes = require('prop-types');
+
+const DeprecatedImagePropType = {
+  ...DeprecatedViewPropTypes,
+  style: (DeprecatedStyleSheetPropType(
+    DeprecatedImageStylePropTypes,
+  ): ReactPropsCheckType),
+  /**
+   * See https://reactnative.dev/docs/image.html#source
+   */
+  source: (PropTypes.oneOfType([
+    PropTypes.shape({
+      uri: PropTypes.string,
+      headers: PropTypes.objectOf(PropTypes.string),
+    }),
+    // Opaque type returned by require('./image.jpg')
+    PropTypes.number,
+    // Multiple sources
+    PropTypes.arrayOf(
+      PropTypes.shape({
+        uri: PropTypes.string,
+        width: PropTypes.number,
+        height: PropTypes.number,
+        headers: PropTypes.objectOf(PropTypes.string),
+      }),
+    ),
+  ]): React$PropType$Primitive<
+    | {
+        headers?: {[string]: string, ...},
+        uri?: string,
+        ...
+      }
+    | number
+    | Array<{
+        headers?: {[string]: string, ...},
+        height?: number,
+        uri?: string,
+        width?: number,
+        ...
+      }>,
+  >),
+  /**
+   * blurRadius: the blur radius of the blur filter added to the image
+   *
+   * See https://reactnative.dev/docs/image.html#blurradius
+   */
+  blurRadius: PropTypes.number,
+  /**
+   * See https://reactnative.dev/docs/image.html#defaultsource
+   */
+  defaultSource: PropTypes.number,
+  /**
+   * See https://reactnative.dev/docs/image.html#loadingindicatorsource
+   */
+  loadingIndicatorSource: (PropTypes.oneOfType([
+    PropTypes.shape({
+      uri: PropTypes.string,
+    }),
+    // Opaque type returned by require('./image.jpg')
+    PropTypes.number,
+  ]): React$PropType$Primitive<{uri?: string, ...} | number>),
+  progressiveRenderingEnabled: PropTypes.bool,
+  fadeDuration: PropTypes.number,
+  /**
+   * Analytics Tag used by this Image
+   */
+  internal_analyticTag: PropTypes.string,
+  /**
+   * Invoked on load start
+   */
+  onLoadStart: PropTypes.func,
+  /**
+   * Invoked on load error
+   */
+  onError: PropTypes.func,
+  /**
+   * Invoked when load completes successfully
+   */
+  onLoad: PropTypes.func,
+  /**
+   * Invoked when load either succeeds or fails
+   */
+  onLoadEnd: PropTypes.func,
+  /**
+   * Used to locate this view in end-to-end tests.
+   */
+  testID: PropTypes.string,
+  /**
+   * The mechanism that should be used to resize the image when the image's dimensions
+   * differ from the image view's dimensions. Defaults to `auto`.
+   *
+   * See https://reactnative.dev/docs/image.html#resizemethod
+   */
+  resizeMethod: (PropTypes.oneOf([
+    'auto',
+    'resize',
+    'scale',
+  ]): React$PropType$Primitive<'auto' | 'resize' | 'scale'>),
+  /**
+   * Determines how to resize the image when the frame doesn't match the raw
+   * image dimensions.
+   *
+   * See https://reactnative.dev/docs/image.html#resizemode
+   */
+  resizeMode: (PropTypes.oneOf([
+    'cover',
+    'contain',
+    'stretch',
+    'repeat',
+    'center',
+  ]): React$PropType$Primitive<
+    'cover' | 'contain' | 'stretch' | 'repeat' | 'center',
+  >),
+};
+
+module.exports = DeprecatedImagePropType;

package/Libraries/DeprecatedPropTypes/DeprecatedTextInputPropTypes.js

@@ -11,9 +11,9 @@
 'use strict';
 
 const DeprecatedColorPropType = require('./DeprecatedColorPropType');
+const DeprecatedTextPropTypes = require('./DeprecatedTextPropTypes');
 const DeprecatedViewPropTypes = require('./DeprecatedViewPropTypes');
 const PropTypes = require('prop-types');
-const Text = require('../Text/Text');
 
 const DataDetectorTypes = [
   'phoneNumber',
@@ -64,7 +64,7 @@ module.exports = {
    *
    * @platform android
    */
-  autoCompleteType: (PropTypes.oneOf([
+  autoComplete: (PropTypes.oneOf([
     'cc-csc',
     'cc-exp',
     'cc-exp-month',
@@ -136,6 +136,7 @@ module.exports = {
    * - `decimal-pad`
    * - `email-address`
    * - `phone-pad`
+   * - `url`
    *
    * *iOS Only*
    *
@@ -143,7 +144,6 @@ module.exports = {
    *
    * - `ascii-capable`
    * - `numbers-and-punctuation`
-   * - `url`
    * - `name-phone-pad`
    * - `twitter`
    * - `web-search`
@@ -162,10 +162,10 @@ module.exports = {
     'numeric',
     'phone-pad',
     'number-pad',
+    'url',
     // iOS-only
     'ascii-capable',
     'numbers-and-punctuation',
-    'url',
     'name-phone-pad',
     'decimal-pad',
     'twitter',
@@ -467,7 +467,7 @@ module.exports = {
    * [Styles](docs/style.html)
    */
   // $FlowFixMe[incompatible-use]
-  style: Text.propTypes.style,
+  style: DeprecatedTextPropTypes.style,
   /**
    * The color of the `TextInput` underline.
    * @platform android

package/Libraries/DeprecatedPropTypes/DeprecatedViewAccessibility.js

@@ -40,6 +40,7 @@ module.exports = {
     'tab',
     'tablist',
     'timer',
+    'list',
     'toolbar',
   ],
 };

package/Libraries/EventEmitter/NativeEventEmitter.js

@@ -48,8 +48,10 @@ export default class NativeEventEmitter<TEventToArgsMap: {...}>
     }
 
     const hasAddListener =
+      // $FlowFixMe[method-unbinding] added when improving typing for this parameters
       !!nativeModule && typeof nativeModule.addListener === 'function';
     const hasRemoveListeners =
+      // $FlowFixMe[method-unbinding] added when improving typing for this parameters
       !!nativeModule && typeof nativeModule.removeListeners === 'function';
 
     if (nativeModule && hasAddListener && hasRemoveListeners) {

package/Libraries/Image/Image.android.js

@@ -8,23 +8,19 @@
  * @format
  */
 
-const DeprecatedImageStylePropTypes = require('../DeprecatedPropTypes/DeprecatedImageStylePropTypes');
-const DeprecatedStyleSheetPropType = require('../DeprecatedPropTypes/DeprecatedStyleSheetPropType');
-const DeprecatedViewPropTypes = require('../DeprecatedPropTypes/DeprecatedViewPropTypes');
+import DeprecatedImagePropType from '../DeprecatedPropTypes/DeprecatedImagePropType';
 import ImageViewNativeComponent from './ImageViewNativeComponent';
-const PropTypes = require('prop-types');
-const React = require('react');
-const ReactNative = require('../Renderer/shims/ReactNative'); // eslint-disable-line no-unused-vars
-const StyleSheet = require('../StyleSheet/StyleSheet');
-const TextAncestor = require('../Text/TextAncestor');
-
-const ImageAnalyticsTagContext = require('./ImageAnalyticsTagContext').default;
-const flattenStyle = require('../StyleSheet/flattenStyle');
-const resolveAssetSource = require('./resolveAssetSource');
+import * as React from 'react';
+import StyleSheet from '../StyleSheet/StyleSheet';
+import TextAncestor from '../Text/TextAncestor';
+import ImageInjection from './ImageInjection';
+import ImageAnalyticsTagContext from './ImageAnalyticsTagContext';
+import flattenStyle from '../StyleSheet/flattenStyle';
+import resolveAssetSource from './resolveAssetSource';
 
 import NativeImageLoaderAndroid from './NativeImageLoaderAndroid';
 
-const TextInlineImageNativeComponent = require('./TextInlineImageNativeComponent');
+import TextInlineImageNativeComponent from './TextInlineImageNativeComponent';
 
 import type {ImageProps as ImagePropsType} from './ImageProps';
 import type {RootTag} from '../Types/RootTagTypes';
@@ -34,119 +30,6 @@ function generateRequestId() {
   return _requestId++;
 }
 
-const ImageProps = {
-  ...DeprecatedViewPropTypes,
-  style: (DeprecatedStyleSheetPropType(
-    DeprecatedImageStylePropTypes,
-  ): ReactPropsCheckType),
-  /**
-   * See https://reactnative.dev/docs/image.html#source
-   */
-  source: (PropTypes.oneOfType([
-    PropTypes.shape({
-      uri: PropTypes.string,
-      headers: PropTypes.objectOf(PropTypes.string),
-    }),
-    // Opaque type returned by require('./image.jpg')
-    PropTypes.number,
-    // Multiple sources
-    PropTypes.arrayOf(
-      PropTypes.shape({
-        uri: PropTypes.string,
-        width: PropTypes.number,
-        height: PropTypes.number,
-        headers: PropTypes.objectOf(PropTypes.string),
-      }),
-    ),
-  ]): React$PropType$Primitive<
-    | {
-        headers?: {[string]: string, ...},
-        uri?: string,
-        ...
-      }
-    | number
-    | Array<{
-        headers?: {[string]: string, ...},
-        height?: number,
-        uri?: string,
-        width?: number,
-        ...
-      }>,
-  >),
-  /**
-   * blurRadius: the blur radius of the blur filter added to the image
-   *
-   * See https://reactnative.dev/docs/image.html#blurradius
-   */
-  blurRadius: PropTypes.number,
-  /**
-   * See https://reactnative.dev/docs/image.html#defaultsource
-   */
-  defaultSource: PropTypes.number,
-  /**
-   * See https://reactnative.dev/docs/image.html#loadingindicatorsource
-   */
-  loadingIndicatorSource: (PropTypes.oneOfType([
-    PropTypes.shape({
-      uri: PropTypes.string,
-    }),
-    // Opaque type returned by require('./image.jpg')
-    PropTypes.number,
-  ]): React$PropType$Primitive<{uri?: string, ...} | number>),
-  progressiveRenderingEnabled: PropTypes.bool,
-  fadeDuration: PropTypes.number,
-  /**
-   * Analytics Tag used by this Image
-   */
-  internal_analyticTag: PropTypes.string,
-  /**
-   * Invoked on load start
-   */
-  onLoadStart: PropTypes.func,
-  /**
-   * Invoked on load error
-   */
-  onError: PropTypes.func,
-  /**
-   * Invoked when load completes successfully
-   */
-  onLoad: PropTypes.func,
-  /**
-   * Invoked when load either succeeds or fails
-   */
-  onLoadEnd: PropTypes.func,
-  /**
-   * Used to locate this view in end-to-end tests.
-   */
-  testID: PropTypes.string,
-  /**
-   * The mechanism that should be used to resize the image when the image's dimensions
-   * differ from the image view's dimensions. Defaults to `auto`.
-   *
-   * See https://reactnative.dev/docs/image.html#resizemethod
-   */
-  resizeMethod: (PropTypes.oneOf([
-    'auto',
-    'resize',
-    'scale',
-  ]): React$PropType$Primitive<'auto' | 'resize' | 'scale'>),
-  /**
-   * Determines how to resize the image when the frame doesn't match the raw
-   * image dimensions.
-   *
-   * See https://reactnative.dev/docs/image.html#resizemode
-   */
-  resizeMode: (PropTypes.oneOf([
-    'cover',
-    'contain',
-    'stretch',
-    'repeat',
-    'center',
-  ]): React$PropType$Primitive<
-    'cover' | 'contain' | 'stretch' | 'repeat' | 'center',
-  >),
-};
-
 /**
  * Retrieve the width and height (in pixels) of an image prior to displaying it
  *
@@ -232,7 +115,7 @@ type ImageComponentStatics = $ReadOnly<{|
   abortPrefetch: typeof abortPrefetch,
   queryCache: typeof queryCache,
   resolveAssetSource: typeof resolveAssetSource,
-  propTypes: typeof ImageProps,
+  propTypes: typeof DeprecatedImagePropType,
 |}>;
 
 /**
@@ -249,8 +132,11 @@ let Image = (props: ImagePropsType, forwardedRef) => {
     props.loadingIndicatorSource,
   );
 
-  if (source && source.uri === '') {
-    console.warn('source.uri should not be an empty string');
+  if (source) {
+    const uri = source.uri;
+    if (uri === '') {
+      console.warn('source.uri should not be an empty string');
+    }
   }
 
   if (props.src) {
@@ -334,6 +220,10 @@ Image = React.forwardRef<
   | React.ElementRef<typeof ImageViewNativeComponent>,
 >(Image);
 
+if (ImageInjection.unstable_createImageComponent != null) {
+  Image = ImageInjection.unstable_createImageComponent(Image);
+}
+
 Image.displayName = 'Image';
 
 /**
@@ -412,7 +302,7 @@ Image.resolveAssetSource = resolveAssetSource;
 /* $FlowFixMe(>=0.89.0 site=react_native_android_fb) This comment suppresses an
  * error found when Flow v0.89 was deployed. To see the error, delete this
  * comment and run Flow. */
-Image.propTypes = ImageProps;
+Image.propTypes = DeprecatedImagePropType;
 
 const styles = StyleSheet.create({
   base: {

package/Libraries/Image/Image.ios.js

@@ -8,14 +8,14 @@
  * @format
  */
 
-const DeprecatedImagePropType = require('../DeprecatedPropTypes/DeprecatedImagePropType');
-const React = require('react');
-const ReactNative = require('../Renderer/shims/ReactNative'); // eslint-disable-line no-unused-vars
-const StyleSheet = require('../StyleSheet/StyleSheet');
+import DeprecatedImagePropType from '../DeprecatedPropTypes/DeprecatedImagePropType';
+import * as React from 'react';
+import StyleSheet from '../StyleSheet/StyleSheet';
 
-const ImageAnalyticsTagContext = require('./ImageAnalyticsTagContext').default;
-const flattenStyle = require('../StyleSheet/flattenStyle');
-const resolveAssetSource = require('./resolveAssetSource');
+import ImageInjection from './ImageInjection';
+import ImageAnalyticsTagContext from './ImageAnalyticsTagContext';
+import flattenStyle from '../StyleSheet/flattenStyle';
+import resolveAssetSource from './resolveAssetSource';
 
 import type {ImageProps as ImagePropsType} from './ImageProps';
 
@@ -169,6 +169,11 @@ Image = React.forwardRef<
   ImagePropsType,
   React.ElementRef<typeof ImageViewNativeComponent>,
 >(Image);
+
+if (ImageInjection.unstable_createImageComponent != null) {
+  Image = ImageInjection.unstable_createImageComponent(Image);
+}
+
 Image.displayName = 'Image';
 
 /**

package/Libraries/Image/ImageBackground.js

@@ -10,10 +10,12 @@
 
 'use strict';
 
-const Image = require('./Image');
-const React = require('react');
-const StyleSheet = require('../StyleSheet/StyleSheet');
-const View = require('../Components/View/View');
+import Image from './Image';
+import * as React from 'react';
+import StyleSheet from '../StyleSheet/StyleSheet';
+import flattenStyle from '../StyleSheet/flattenStyle';
+import View from '../Components/View/View';
+import type {ImageBackgroundProps} from './ImageProps';
 
 /**
  * Very simple drop-in replacement for <Image> which supports nesting views.
@@ -39,7 +41,7 @@ const View = require('../Components/View/View');
  * AppRegistry.registerComponent('DisplayAnImageBackground', () => DisplayAnImageBackground);
  * ```
  */
-class ImageBackground extends React.Component<$FlowFixMeProps> {
+class ImageBackground extends React.Component<ImageBackgroundProps> {
   setNativeProps(props: Object) {
     // Work-around flow
     const viewRef = this._viewRef;
@@ -56,7 +58,7 @@ class ImageBackground extends React.Component<$FlowFixMeProps> {
 
   render(): React.Node {
     const {children, style, imageStyle, imageRef, ...props} = this.props;
-
+    const flattenedStyle = flattenStyle(style);
     return (
       <View
         accessibilityIgnoresInvertColors={true}
@@ -74,8 +76,8 @@ class ImageBackground extends React.Component<$FlowFixMeProps> {
               // So, we have to proxy/reapply these styles explicitly for actual <Image> component.
               // This workaround should be removed after implementing proper support of
               // intrinsic content size of the <Image>.
-              width: style.width,
-              height: style.height,
+              width: flattenedStyle?.width,
+              height: flattenedStyle?.height,
             },
             imageStyle,
           ]}

package/Libraries/Image/ImageInjection.js

@@ -0,0 +1,28 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format strict-local
+ * @flow
+ */
+
+import * as React from 'react';
+import type {ImageProps as ImagePropsType} from './ImageProps';
+import ImageViewNativeComponent from './ImageViewNativeComponent';
+import TextInlineImageNativeComponent from './TextInlineImageNativeComponent';
+
+export default {
+  unstable_createImageComponent: (null: ?(
+    Image: React.AbstractComponent<
+      ImagePropsType,
+      | React.ElementRef<typeof TextInlineImageNativeComponent>
+      | React.ElementRef<typeof ImageViewNativeComponent>,
+    >,
+  ) => React.AbstractComponent<
+    ImagePropsType,
+    | React.ElementRef<typeof TextInlineImageNativeComponent>
+    | React.ElementRef<typeof ImageViewNativeComponent>,
+  >),
+};

package/Libraries/Image/ImageProps.js

@@ -15,6 +15,8 @@ import type {EdgeInsetsProp} from '../StyleSheet/EdgeInsetsPropType';
 import type {ImageSource} from './ImageSource';
 import type {ViewStyleProp, ImageStyleProp} from '../StyleSheet/StyleSheet';
 import type {ViewProps} from '../Components/View/ViewPropTypes';
+import type {Node, Ref} from 'react';
+import typeof Image from './Image';
 
 export type ImageLoadEvent = SyntheticEvent<
   $ReadOnly<{|
@@ -171,3 +173,29 @@ export type ImageProps = {|
   src?: empty,
   children?: empty,
 |};
+
+export type ImageBackgroundProps = $ReadOnly<{|
+  ...ImageProps,
+  children?: Node,
+
+  /**
+   * Style applied to the outer View component
+   *
+   * See https://reactnative.dev/docs/imagebackground#style
+   */
+  style?: ?ViewStyleProp,
+
+  /**
+   * Style applied to the inner Image component
+   *
+   * See https://reactnative.dev/docs/imagebackground#imagestyle
+   */
+  imageStyle?: ?ImageStyleProp,
+
+  /**
+   * Allows to set a reference to the inner Image component
+   *
+   * See https://reactnative.dev/docs/imagebackground#imageref
+   */
+  imageRef?: Ref<Image>,
+|}>;