react-native 0.0.0-16bb2ae4f → 0.0.0-18697adec

package/Libraries/Components/TextInput/AndroidTextInputViewConfig.js

@@ -83,6 +83,7 @@ const AndroidTextInputViewConfig = {
     multiline: true,
     color: {process: require('../../StyleSheet/processColor')},
     autoCompleteType: true,
+    autoComplete: true,
     numberOfLines: true,
     letterSpacing: true,
     returnKeyLabel: true,

package/Libraries/Components/TextInput/TextInput.js

@@ -331,19 +331,43 @@ type AndroidProps = $ReadOnly<{|
    *
    * @platform android
    */
-  autoCompleteType?: ?(
+  autoComplete?: ?(
+    | 'birthdate-day'
+    | 'birthdate-full'
+    | 'birthdate-month'
+    | 'birthdate-year'
     | 'cc-csc'
     | 'cc-exp'
+    | 'cc-exp-day'
     | 'cc-exp-month'
     | 'cc-exp-year'
     | 'cc-number'
     | 'email'
+    | 'gender'
     | 'name'
+    | 'name-family'
+    | 'name-given'
+    | 'name-middle'
+    | 'name-middle-initial'
+    | 'name-prefix'
+    | 'name-suffix'
     | 'password'
+    | 'password-new'
+    | 'postal-address'
+    | 'postal-address-country'
+    | 'postal-address-extended'
+    | 'postal-address-extended-postal-code'
+    | 'postal-address-locality'
+    | 'postal-address-region'
     | 'postal-code'
     | 'street-address'
+    | 'sms-otp'
     | 'tel'
+    | 'tel-country-code'
+    | 'tel-national'
+    | 'tel-device'
     | 'username'
+    | 'username-new'
     | 'off'
   ),
 
@@ -1139,6 +1163,7 @@ function InternalTextInput(props: Props): React.Node {
   } else if (Platform.OS === 'android') {
     const style = [props.style];
     const autoCapitalize = props.autoCapitalize || 'sentences';
+    const placeholder = props.placeholder ?? '';
     let children = props.children;
     const childCount = React.Children.count(children);
     invariant(
@@ -1181,6 +1206,7 @@ function InternalTextInput(props: Props): React.Node {
          * to get fixed */
         onScroll={_onScroll}
         onSelectionChange={_onSelectionChange}
+        placeholder={placeholder}
         selection={selection}
         style={style}
         text={text}

package/Libraries/Components/TextInput/TextInputState.js

@@ -110,7 +110,7 @@ function blurTextInput(textField: ?ComponentRef) {
   if (typeof textField === 'number') {
     if (__DEV__) {
       console.error(
-        'focusTextInput must be called with a host component. Passing a react tag is deprecated.',
+        'blurTextInput must be called with a host component. Passing a react tag is deprecated.',
       );
     }
 

package/Libraries/Components/View/ViewAccessibility.js

@@ -39,6 +39,7 @@ export type AccessibilityRole =
   | 'spinbutton'
   | 'switch'
   | 'tab'
+  | 'tabbar'
   | 'tablist'
   | 'timer'
   | 'list'

package/Libraries/Core/ExceptionsManager.js

@@ -76,7 +76,9 @@ function reportException(
       e.jsEngine == null ? message : `${message}, js engine: ${e.jsEngine}`;
 
     const isHandledByLogBox =
-      e.forceRedbox !== true && !global.RN$Bridgeless && !global.RN$Express;
+      e.forceRedbox !== true &&
+      global.RN$Bridgeless !== true &&
+      !global.RN$Express;
 
     const data = preprocessException({
       message,

package/Libraries/Core/ReactNativeVersion.js

@@ -13,5 +13,5 @@ exports.version = {
   major: 0,
   minor: 0,
   patch: 0,
-  prerelease: '16bb2ae4f',
+  prerelease: '18697adec',
 };

package/Libraries/Core/Timers/JSTimers.js

@@ -25,7 +25,7 @@ export type JSTimerType =
   | 'setTimeout'
   | 'setInterval'
   | 'requestAnimationFrame'
-  | 'setImmediate'
+  | 'queueReactNativeMicrotask'
   | 'requestIdleCallback';
 
 // These timing constants should be kept in sync with the ones in native ios and
@@ -37,7 +37,7 @@ const IDLE_CALLBACK_FRAME_DEADLINE = 1;
 const callbacks: Array<?Function> = [];
 const types: Array<?JSTimerType> = [];
 const timerIDs: Array<?number> = [];
-let immediates: Array<number> = [];
+let reactNativeMicrotasks: Array<number> = [];
 let requestIdleCallbacks: Array<number> = [];
 const requestIdleCallbackTimeouts: {[number]: number, ...} = {};
 
@@ -107,7 +107,7 @@ function _callTimer(timerID: number, frameTime: number, didTimeout: ?boolean) {
     if (
       type === 'setTimeout' ||
       type === 'setInterval' ||
-      type === 'setImmediate'
+      type === 'queueReactNativeMicrotask'
     ) {
       callback();
     } else if (type === 'requestAnimationFrame') {
@@ -143,33 +143,33 @@ function _callTimer(timerID: number, frameTime: number, didTimeout: ?boolean) {
 }
 
 /**
- * Performs a single pass over the enqueued immediates. Returns whether
- * more immediates are queued up (can be used as a condition a while loop).
+ * Performs a single pass over the enqueued reactNativeMicrotasks. Returns whether
+ * more reactNativeMicrotasks are queued up (can be used as a condition a while loop).
  */
-function _callImmediatesPass() {
-  if (immediates.length === 0) {
+function _callReactNativeMicrotasksPass() {
+  if (reactNativeMicrotasks.length === 0) {
     return false;
   }
 
   if (__DEV__) {
-    Systrace.beginEvent('callImmediatesPass()');
+    Systrace.beginEvent('callReactNativeMicrotasksPass()');
   }
 
   // The main reason to extract a single pass is so that we can track
   // in the system trace
-  const passImmediates = immediates;
-  immediates = [];
+  const passReactNativeMicrotasks = reactNativeMicrotasks;
+  reactNativeMicrotasks = [];
 
   // Use for loop rather than forEach as per @vjeux's advice
   // https://github.com/facebook/react-native/commit/c8fd9f7588ad02d2293cac7224715f4af7b0f352#commitcomment-14570051
-  for (let i = 0; i < passImmediates.length; ++i) {
-    _callTimer(passImmediates[i], 0);
+  for (let i = 0; i < passReactNativeMicrotasks.length; ++i) {
+    _callTimer(passReactNativeMicrotasks[i], 0);
   }
 
   if (__DEV__) {
     Systrace.endEvent();
   }
-  return immediates.length > 0;
+  return reactNativeMicrotasks.length > 0;
 }
 
 function _clearIndex(i: number) {
@@ -190,7 +190,10 @@ function _freeCallback(timerID: number) {
   if (index !== -1) {
     const type = types[index];
     _clearIndex(index);
-    if (type !== 'setImmediate' && type !== 'requestIdleCallback') {
+    if (
+      type !== 'queueReactNativeMicrotask' &&
+      type !== 'requestIdleCallback'
+    ) {
       deleteTimer(timerID);
     }
   }
@@ -233,15 +236,19 @@ const JSTimers = {
   },
 
   /**
+   * The React Native microtask mechanism is used to back public APIs e.g.
+   * `queueMicrotask`, `clearImmediate`, and `setImmediate` (which is used by
+   * the Promise polyfill) when the JSVM microtask mechanism is not used.
+   *
    * @param {function} func Callback to be invoked before the end of the
    * current JavaScript execution loop.
    */
-  setImmediate: function(func: Function, ...args: any) {
+  queueReactNativeMicrotask: function(func: Function, ...args: any) {
     const id = _allocateCallback(
       () => func.apply(undefined, args),
-      'setImmediate',
+      'queueReactNativeMicrotask',
     );
-    immediates.push(id);
+    reactNativeMicrotasks.push(id);
     return id;
   },
 
@@ -323,11 +330,11 @@ const JSTimers = {
     _freeCallback(timerID);
   },
 
-  clearImmediate: function(timerID: number) {
+  clearReactNativeMicrotask: function(timerID: number) {
     _freeCallback(timerID);
-    const index = immediates.indexOf(timerID);
+    const index = reactNativeMicrotasks.indexOf(timerID);
     if (index !== -1) {
-      immediates.splice(index, 1);
+      reactNativeMicrotasks.splice(index, 1);
     }
   },
 
@@ -406,9 +413,9 @@ const JSTimers = {
    * This is called after we execute any command we receive from native but
    * before we hand control back to native.
    */
-  callImmediates() {
+  callReactNativeMicrotasks() {
     errors = (null: ?Array<Error>);
-    while (_callImmediatesPass()) {}
+    while (_callReactNativeMicrotasksPass()) {}
     if (errors) {
       errors.forEach(error =>
         JSTimers.setTimeout(() => {
@@ -452,17 +459,17 @@ function setSendIdleEvents(sendIdleEvents: boolean): void {
 
 let ExportedJSTimers: {|
   callIdleCallbacks: (frameTime: number) => any | void,
-  callImmediates: () => void,
+  callReactNativeMicrotasks: () => void,
   callTimers: (timersToCall: Array<number>) => any | void,
   cancelAnimationFrame: (timerID: number) => void,
   cancelIdleCallback: (timerID: number) => void,
-  clearImmediate: (timerID: number) => void,
+  clearReactNativeMicrotask: (timerID: number) => void,
   clearInterval: (timerID: number) => void,
   clearTimeout: (timerID: number) => void,
   emitTimeDriftWarning: (warningMessage: string) => any | void,
   requestAnimationFrame: (func: any) => any | number,
   requestIdleCallback: (func: any, options: ?any) => any | number,
-  setImmediate: (func: any, ...args: any) => number,
+  queueReactNativeMicrotask: (func: any, ...args: any) => number,
   setInterval: (func: any, duration: number, ...args: any) => number,
   setTimeout: (func: any, duration: number, ...args: any) => number,
 |};
@@ -471,13 +478,15 @@ if (!NativeTiming) {
   console.warn("Timing native module is not available, can't set timers.");
   // $FlowFixMe[prop-missing] : we can assume timers are generally available
   ExportedJSTimers = ({
-    callImmediates: JSTimers.callImmediates,
-    setImmediate: JSTimers.setImmediate,
+    callReactNativeMicrotasks: JSTimers.callReactNativeMicrotasks,
+    queueReactNativeMicrotask: JSTimers.queueReactNativeMicrotask,
   }: typeof JSTimers);
 } else {
   ExportedJSTimers = JSTimers;
 }
 
-BatchedBridge.setImmediatesCallback(JSTimers.callImmediates);
+BatchedBridge.setReactNativeMicrotasksCallback(
+  JSTimers.callReactNativeMicrotasks,
+);
 
 module.exports = ExportedJSTimers;

package/Libraries/Core/Timers/immediateShim.js

@@ -0,0 +1,67 @@
+/**
+ * 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
+ * @flow
+ */
+
+'use strict';
+
+// Globally Unique Immediate ID.
+let GUIID = 1;
+
+// A global set of the currently cleared immediates.
+const clearedImmediates: Set<number> = new Set();
+
+/**
+ * Shim the setImmediate API on top of queueMicrotask.
+ * @param {function} func Callback to be invoked before the end of the
+ * current JavaScript execution loop.
+ */
+function setImmediate(callback: Function, ...args: any): number {
+  if (arguments.length < 1) {
+    throw new TypeError(
+      'setImmediate must be called with at least one argument (a function to call)',
+    );
+  }
+  if (typeof callback !== 'function') {
+    throw new TypeError(
+      'The first argument to setImmediate must be a function.',
+    );
+  }
+
+  const id = GUIID++;
+  // This is an edgey case in which the sequentially assigned ID has been
+  // "guessed" and "cleared" ahead of time, so we need to clear it up first.
+  if (clearedImmediates.has(id)) {
+    clearedImmediates.delete(id);
+  }
+
+  global.queueMicrotask(() => {
+    if (!clearedImmediates.has(id)) {
+      callback.apply(undefined, args);
+    } else {
+      // Free up the Set entry.
+      clearedImmediates.delete(id);
+    }
+  });
+
+  return id;
+}
+
+/**
+ * @param {number} immediateID The ID of the immediate to be clearred.
+ */
+function clearImmediate(immediateID: number) {
+  clearedImmediates.add(immediateID);
+}
+
+const immediateShim = {
+  setImmediate: setImmediate,
+  clearImmediate: clearImmediate,
+};
+
+module.exports = immediateShim;

package/Libraries/Core/Timers/queueMicrotask.js

@@ -0,0 +1,41 @@
+/**
+ * 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
+ * @flow
+ */
+
+'use strict';
+
+let resolvedPromise;
+
+/**
+ * Polyfill for the microtask queuening API defined by WHATWG HTMP spec.
+ * https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#dom-queuemicrotask
+ *
+ * The method must queue a microtask to invoke @param {function} callback, and
+ * if the callback throws an exception, report the exception.
+ */
+export default function queueMicrotask(callback: Function) {
+  if (arguments.length < 1) {
+    throw new TypeError(
+      'queueMicrotask must be called with at least one argument (a function to call)',
+    );
+  }
+  if (typeof callback !== 'function') {
+    throw new TypeError('The argument to queueMicrotask must be a function.');
+  }
+
+  // Try to reuse a lazily allocated resolved promise from closure.
+  (resolvedPromise || (resolvedPromise = Promise.resolve()))
+    .then(callback)
+    .catch(error =>
+      // Report the exception until the next tick.
+      setTimeout(() => {
+        throw error;
+      }, 0),
+    );
+}

package/Libraries/Core/polyfillPromise.js

@@ -29,7 +29,7 @@ if (global?.HermesInternal?.hasPromise?.()) {
     if (typeof HermesPromise !== 'function') {
       console.error('HermesPromise does not exist');
     }
-    global.HermesInternal.enablePromiseRejectionTracker(
+    global.HermesInternal?.enablePromiseRejectionTracker?.(
       require('../promiseRejectionTrackingOptions').default,
     );
   }

package/Libraries/Core/setUpBatchedBridge.js

@@ -11,7 +11,7 @@
 'use strict';
 
 let registerModule;
-if (global.RN$Bridgeless && global.RN$registerCallableModule) {
+if (global.RN$Bridgeless === true && global.RN$registerCallableModule) {
   registerModule = global.RN$registerCallableModule;
 } else {
   const BatchedBridge = require('../BatchedBridge/BatchedBridge');

package/Libraries/Core/setUpGlobals.js

@@ -19,10 +19,12 @@ if (global.GLOBAL === undefined) {
 }
 
 if (global.window === undefined) {
+  // $FlowFixMe[cannot-write]
   global.window = global;
 }
 
 if (global.self === undefined) {
+  // $FlowFixMe[cannot-write]
   global.self = global;
 }
 

package/Libraries/Core/setUpRegeneratorRuntime.js

@@ -11,17 +11,34 @@
 'use strict';
 
 const {polyfillGlobal} = require('../Utilities/PolyfillFunctions');
+const {hasNativeConstructor} = require('../Utilities/FeatureDetection');
 
 /**
  * Set up regenerator.
  * You can use this module directly, or just require InitializeCore.
  */
-polyfillGlobal('regeneratorRuntime', () => {
-  // The require just sets up the global, so make sure when we first
-  // invoke it the global does not exist
-  delete global.regeneratorRuntime;
 
-  // regenerator-runtime/runtime exports the regeneratorRuntime object, so we
-  // can return it safely.
-  return require('regenerator-runtime/runtime'); // flowlint-line untyped-import:off
-});
+let hasNativeGenerator;
+try {
+  // If this function was lowered by regenerator-transform, it will try to
+  // access `global.regeneratorRuntime` which doesn't exist yet and will throw.
+  hasNativeGenerator = hasNativeConstructor(function*() {},
+  'GeneratorFunction');
+} catch {
+  // In this case, we know generators are not provided natively.
+  hasNativeGenerator = false;
+}
+
+// If generators are provided natively, which suggests that there was no
+// regenerator-transform, then there is no need to set up the runtime.
+if (!hasNativeGenerator) {
+  polyfillGlobal('regeneratorRuntime', () => {
+    // The require just sets up the global, so make sure when we first
+    // invoke it the global does not exist
+    delete global.regeneratorRuntime;
+
+    // regenerator-runtime/runtime exports the regeneratorRuntime object, so we
+    // can return it safely.
+    return require('regenerator-runtime/runtime'); // flowlint-line untyped-import:off
+  });
+}

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/DeprecatedTextInputPropTypes.js

@@ -64,7 +64,7 @@ module.exports = {
    *
    * @platform android
    */
-  autoCompleteType: (PropTypes.oneOf([
+  autoComplete: (PropTypes.oneOf([
     'cc-csc',
     'cc-exp',
     'cc-exp-month',

package/Libraries/Image/Image.ios.js

@@ -12,6 +12,7 @@ import DeprecatedImagePropType from '../DeprecatedPropTypes/DeprecatedImagePropT
 import * as React from 'react';
 import StyleSheet from '../StyleSheet/StyleSheet';
 
+import ImageInjection from './ImageInjection';
 import ImageAnalyticsTagContext from './ImageAnalyticsTagContext';
 import flattenStyle from '../StyleSheet/flattenStyle';
 import resolveAssetSource from './resolveAssetSource';
@@ -168,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/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>,
+|}>;