react-native 0.66.0-rc.4 → 0.67.0-rc.1

package/Libraries/Core/ExceptionsManager.js

@@ -56,92 +56,57 @@ function reportException(
   isFatal: boolean,
   reportToConsole: boolean, // only true when coming from handleException; the error has not yet been logged
 ) {
-  const NativeExceptionsManager = require('./NativeExceptionsManager').default;
-  if (NativeExceptionsManager) {
-    const parseErrorStack = require('./Devtools/parseErrorStack');
-    const stack = parseErrorStack(e?.stack);
-    const currentExceptionID = ++exceptionID;
-    const originalMessage = e.message || '';
-    let message = originalMessage;
-    if (e.componentStack != null) {
-      message += `\n\nThis error is located at:${e.componentStack}`;
-    }
-    const namePrefix = e.name == null || e.name === '' ? '' : `${e.name}: `;
-
-    if (!message.startsWith(namePrefix)) {
-      message = namePrefix + message;
-    }
-
-    message =
-      e.jsEngine == null ? message : `${message}, js engine: ${e.jsEngine}`;
+  const parseErrorStack = require('./Devtools/parseErrorStack');
+  const stack = parseErrorStack(e?.stack);
+  const currentExceptionID = ++exceptionID;
+  const originalMessage = e.message || '';
+  let message = originalMessage;
+  if (e.componentStack != null) {
+    message += `\n\nThis error is located at:${e.componentStack}`;
+  }
+  const namePrefix = e.name == null || e.name === '' ? '' : `${e.name}: `;
 
-    const isHandledByLogBox =
-      e.forceRedbox !== true && !global.RN$Bridgeless && !global.RN$Express;
+  if (!message.startsWith(namePrefix)) {
+    message = namePrefix + message;
+  }
 
-    const data = preprocessException({
-      message,
-      originalMessage: message === originalMessage ? null : originalMessage,
-      name: e.name == null || e.name === '' ? null : e.name,
-      componentStack:
-        typeof e.componentStack === 'string' ? e.componentStack : null,
-      stack,
-      id: currentExceptionID,
-      isFatal,
-      extraData: {
-        jsEngine: e.jsEngine,
-        rawStack: e.stack,
+  message =
+    e.jsEngine == null ? message : `${message}, js engine: ${e.jsEngine}`;
+
+  const data = preprocessException({
+    message,
+    originalMessage: message === originalMessage ? null : originalMessage,
+    name: e.name == null || e.name === '' ? null : e.name,
+    componentStack:
+      typeof e.componentStack === 'string' ? e.componentStack : null,
+    stack,
+    id: currentExceptionID,
+    isFatal,
+    extraData: {
+      jsEngine: e.jsEngine,
+      rawStack: e.stack,
+    },
+  });
+
+  if (reportToConsole) {
+    // we feed back into console.error, to make sure any methods that are
+    // monkey patched on top of console.error are called when coming from
+    // handleException
+    console.error(data.message);
+  }
 
-        // Hack to hide native redboxes when in the LogBox experiment.
-        // This is intentionally untyped and stuffed here, because it is temporary.
-        suppressRedBox: isHandledByLogBox,
-      },
+  if (__DEV__) {
+    const LogBox = require('../LogBox/LogBox');
+    LogBox.addException({
+      ...data,
+      isComponentError: !!e.isComponentError,
     });
-
-    if (reportToConsole) {
-      // we feed back into console.error, to make sure any methods that are
-      // monkey patched on top of console.error are called when coming from
-      // handleException
-      console.error(data.message);
-    }
-
-    if (__DEV__ && isHandledByLogBox) {
-      const LogBox = require('../LogBox/LogBox');
-      LogBox.addException({
-        ...data,
-        isComponentError: !!e.isComponentError,
-      });
-    }
-
-    if (isFatal || e.type !== 'warn') {
+  } else if (isFatal || e.type !== 'warn') {
+    const NativeExceptionsManager = require('./NativeExceptionsManager')
+      .default;
+    if (NativeExceptionsManager) {
       NativeExceptionsManager.reportException(data);
-
-      if (__DEV__ && !global.RN$Express) {
-        if (e.preventSymbolication === true) {
-          return;
-        }
-        const symbolicateStackTrace = require('./Devtools/symbolicateStackTrace');
-        symbolicateStackTrace(stack)
-          .then(({stack: prettyStack}) => {
-            if (prettyStack) {
-              NativeExceptionsManager.updateExceptionMessage(
-                data.message,
-                prettyStack,
-                currentExceptionID,
-              );
-            } else {
-              throw new Error('The stack is null');
-            }
-          })
-          .catch(error => {
-            console.log('Unable to symbolicate stack trace: ' + error.message);
-          });
-      }
     }
-  } else if (reportToConsole) {
-    // we feed back into console.error, to make sure any methods that are
-    // monkey patched on top of console.error are called when coming from
-    // handleException
-    console.error(e);
   }
 }
 

package/Libraries/Core/ExtendedError.js

@@ -12,7 +12,6 @@ export type ExtendedError = Error & {
   jsEngine?: string,
   preventSymbolication?: boolean,
   componentStack?: string,
-  forceRedbox?: boolean,
   isComponentError?: boolean,
   type?: string,
   ...

package/Libraries/Core/ReactNativeVersion.js

@@ -11,7 +11,7 @@
 
 exports.version = {
   major: 0,
-  minor: 66,
+  minor: 67,
   patch: 0,
-  prerelease: 'rc.4',
+  prerelease: 'rc.1',
 };

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

@@ -14,15 +14,13 @@
  * Sets up global variables for React Native.
  * You can use this module directly, or just require InitializeCore.
  */
-if (global.GLOBAL === undefined) {
-  global.GLOBAL = global;
-}
-
 if (global.window === undefined) {
+  // $FlowFixMe[cannot-write]
   global.window = global;
 }
 
 if (global.self === undefined) {
+  // $FlowFixMe[cannot-write]
   global.self = global;
 }
 

package/Libraries/Core/setUpTimers.js

@@ -28,7 +28,7 @@ const hasNativePromise = isNativeFunction(Promise);
 const hasPromiseQueuedToJSVM = hasNativePromise || hasHermesPromiseQueuedToJSVM;
 
 // In bridgeless mode, timers are host functions installed from cpp.
-if (!global.RN$Bridgeless) {
+if (global.RN$Bridgeless !== true) {
   /**
    * Set up timers.
    * You can use this module directly, or just require InitializeCore.
@@ -65,7 +65,7 @@ if (hasPromiseQueuedToJSVM) {
   // 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) {
+  if (global.RN$Bridgeless !== true) {
     polyfillGlobal(
       'setImmediate',
       () => require('./Timers/JSTimers').queueReactNativeMicrotask,

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>,
+|}>;

package/Libraries/Image/RCTImageView.mm

@@ -234,6 +234,10 @@ RCT_NOT_IMPLEMENTED(- (instancetype)initWithFrame:(CGRect)frame)
 
   [_imageLoader trackURLImageRequestDidDestroy:_loaderRequest];
   _loaderRequest = nil;
+  
+  if (!self.image) {
+    self.image = _defaultImage;
+  }
 }
 
 - (void)clearImageIfDetached

package/Libraries/LogBox/Data/LogBoxData.js

@@ -100,7 +100,6 @@ export function reportLogBoxError(
 ): void {
   const ExceptionsManager = require('../../Core/ExceptionsManager');
 
-  error.forceRedbox = true;
   error.message = `${LOGBOX_ERROR_MESSAGE}\n\n${error.message}`;
   if (componentStack != null) {
     error.componentStack = componentStack;
@@ -320,40 +319,40 @@ export function checkWarningFilter(format: string): WarningInfo {
   return warningFilter(format);
 }
 
+export function getIgnorePatterns(): $ReadOnlyArray<IgnorePattern> {
+  return Array.from(ignorePatterns);
+}
+
 export function addIgnorePatterns(
   patterns: $ReadOnlyArray<IgnorePattern>,
 ): void {
+  const existingSize = ignorePatterns.size;
   // The same pattern may be added multiple times, but adding a new pattern
   // can be expensive so let's find only the ones that are new.
-  const newPatterns = patterns.filter((pattern: IgnorePattern) => {
+  patterns.forEach((pattern: IgnorePattern) => {
     if (pattern instanceof RegExp) {
-      for (const existingPattern of ignorePatterns.entries()) {
+      for (const existingPattern of ignorePatterns) {
         if (
           existingPattern instanceof RegExp &&
           existingPattern.toString() === pattern.toString()
         ) {
-          return false;
+          return;
         }
       }
-      return true;
+      ignorePatterns.add(pattern);
     }
-    return !ignorePatterns.has(pattern);
+    ignorePatterns.add(pattern);
   });
-
-  if (newPatterns.length === 0) {
+  if (ignorePatterns.size === existingSize) {
     return;
   }
-  for (const pattern of newPatterns) {
-    ignorePatterns.add(pattern);
-
-    // We need to recheck all of the existing logs.
-    // This allows adding an ignore pattern anywhere in the codebase.
-    // Without this, if you ignore a pattern after the a log is created,
-    // then we would keep showing the log.
-    logs = new Set(
-      Array.from(logs).filter(log => !isMessageIgnored(log.message.content)),
-    );
-  }
+  // We need to recheck all of the existing logs.
+  // This allows adding an ignore pattern anywhere in the codebase.
+  // Without this, if you ignore a pattern after the a log is created,
+  // then we would keep showing the log.
+  logs = new Set(
+    Array.from(logs).filter(log => !isMessageIgnored(log.message.content)),
+  );
   handleUpdate();
 }
 

package/Libraries/NativeAnimation/Nodes/RCTPropsAnimatedNode.m

@@ -16,7 +16,6 @@
 @implementation RCTPropsAnimatedNode
 {
   NSNumber *_connectedViewTag;
-  NSNumber *_rootTag;
   NSString *_connectedViewName;
   __weak RCTBridge *_bridge;
   __weak id<RCTSurfacePresenterStub> _surfacePresenter;
@@ -48,7 +47,6 @@
   _connectedViewTag = viewTag;
   _connectedViewName = viewName;
   _managedByFabric = RCTUIManagerTypeForTagIsFabric(viewTag);
-  _rootTag = nil;
 }
 
 - (void)disconnectFromView:(NSNumber *)viewTag
@@ -58,7 +56,6 @@
   _connectedViewTag = nil;
   _connectedViewName = nil;
   _managedByFabric = NO;
-  _rootTag = nil;
 }
 
 - (void)updateView

package/Libraries/NativeAnimation/RCTNativeAnimatedModule.mm

@@ -9,6 +9,7 @@
 #import <React/RCTNativeAnimatedModule.h>
 #import <React/RCTNativeAnimatedNodesManager.h>
 #import <React/RCTLog.h>
+#import <React/RCTInitializing.h>
 
 #import <RCTTypeSafety/RCTConvertHelpers.h>
 
@@ -16,6 +17,9 @@
 
 typedef void (^AnimatedOperation)(RCTNativeAnimatedNodesManager *nodesManager);
 
+@interface RCTNativeAnimatedModule () <RCTInitializing>
+@end
+
 @implementation RCTNativeAnimatedModule
 {
   RCTNativeAnimatedNodesManager *_nodesManager;
@@ -69,10 +73,9 @@ RCT_EXPORT_MODULE();
   [bridge.surfacePresenter addObserver:self];
 }
 
-- (void)setModuleRegistry:(RCTModuleRegistry *)moduleRegistry
+- (void)initialize
 {
-  [super setModuleRegistry:moduleRegistry];
-  [[moduleRegistry moduleForName:"EventDispatcher"] addDispatchObserver:self];
+  [[self.moduleRegistry moduleForName:"EventDispatcher"] addDispatchObserver:self];
 }
 
 /*

package/Libraries/NativeAnimation/RCTNativeAnimatedTurboModule.h

@@ -12,13 +12,12 @@
 #import <React/RCTUIManager.h>
 #import <React/RCTUIManagerObserverCoordinator.h>
 #import <React/RCTUIManagerUtils.h>
-#import <React/RCTInitializing.h>
 
 #import "RCTValueAnimatedNode.h"
 
 // TODO T69437152 @petetheheat - Delete this fork when Fabric ships to 100%.
 // NOTE: This module is temporarily forked (see RCTNativeAnimatedModule).
 // When making any changes, be sure to apply them to the fork as well.
-@interface RCTNativeAnimatedTurboModule: RCTEventEmitter <RCTBridgeModule, RCTValueAnimatedNodeObserver, RCTEventDispatcherObserver, RCTUIManagerObserver, RCTSurfacePresenterObserver, RCTInitializing>
+@interface RCTNativeAnimatedTurboModule: RCTEventEmitter <RCTBridgeModule, RCTValueAnimatedNodeObserver, RCTEventDispatcherObserver, RCTUIManagerObserver, RCTSurfacePresenterObserver>
 
 @end

package/Libraries/NativeAnimation/RCTNativeAnimatedTurboModule.mm

@@ -9,12 +9,13 @@
 #import <RCTTypeSafety/RCTConvertHelpers.h>
 #import <React/RCTNativeAnimatedTurboModule.h>
 #import <React/RCTNativeAnimatedNodesManager.h>
+#import <React/RCTInitializing.h>
 
 #import "RCTAnimationPlugins.h"
 
 typedef void (^AnimatedOperation)(RCTNativeAnimatedNodesManager *nodesManager);
 
-@interface RCTNativeAnimatedTurboModule() <NativeAnimatedModuleSpec>
+@interface RCTNativeAnimatedTurboModule() <NativeAnimatedModuleSpec, RCTInitializing>
 @end
 
 @implementation RCTNativeAnimatedTurboModule

package/Libraries/PermissionsAndroid/NativePermissionsAndroid.js

@@ -44,7 +44,8 @@ export type PermissionType =
   | 'android.permission.WRITE_EXTERNAL_STORAGE'
   | 'android.permission.BLUETOOTH_CONNECT'
   | 'android.permission.BLUETOOTH_SCAN'
-  | 'android.permission.BLUETOOTH_ADVERTISE';
+  | 'android.permission.BLUETOOTH_ADVERTISE'
+  | 'android.permission.ACCESS_MEDIA_LOCATION';
 */
 
 export interface Spec extends TurboModule {

package/Libraries/PermissionsAndroid/PermissionsAndroid.js

@@ -62,6 +62,7 @@ const PERMISSIONS = Object.freeze({
   BLUETOOTH_CONNECT: 'android.permission.BLUETOOTH_CONNECT',
   BLUETOOTH_SCAN: 'android.permission.BLUETOOTH_SCAN',
   BLUETOOTH_ADVERTISE: 'android.permission.BLUETOOTH_ADVERTISE',
+  ACCESS_MEDIA_LOCATION: 'android.permission.ACCESS_MEDIA_LOCATION',
 });
 
 /**
@@ -75,6 +76,7 @@ class PermissionsAndroid {
     ACCESS_BACKGROUND_LOCATION: string,
     ACCESS_COARSE_LOCATION: string,
     ACCESS_FINE_LOCATION: string,
+    ACCESS_MEDIA_LOCATION: string,
     ADD_VOICEMAIL: string,
     BLUETOOTH_ADVERTISE: string,
     BLUETOOTH_CONNECT: string,

package/Libraries/Pressability/Pressability.js

@@ -608,6 +608,19 @@ export default class Pressability {
    * and stores the new state. Validates the transition as well.
    */
   _receiveSignal(signal: TouchSignal, event: PressEvent): void {
+    // Especially on iOS, not all events have timestamps associated.
+    // For telemetry purposes, this doesn't matter too much, as long as *some* do.
+    // Since the native timestamp is integral for logging telemetry, just skip
+    // events if they don't have a timestamp attached.
+    if (event.nativeEvent.timestamp != null) {
+      PressabilityPerformanceEventEmitter.emitEvent(() => {
+        return {
+          signal,
+          nativeTimestamp: event.nativeEvent.timestamp,
+        };
+      });
+    }
+
     const prevState = this._touchState;
     const nextState = Transitions[prevState]?.[signal];
     if (this._responderID == null && signal === 'RESPONDER_RELEASE') {
@@ -623,19 +636,6 @@ export default class Pressability {
         : '<<host component>>',
     );
     if (prevState !== nextState) {
-      // Especially on iOS, not all events have timestamps associated.
-      // For telemetry purposes, this doesn't matter too much, as long as *some* do.
-      // Since the native timestamp is integral for logging telemetry, just skip
-      // events if they don't have a timestamp attached.
-      if (event.nativeEvent.timestamp != null) {
-        PressabilityPerformanceEventEmitter.emitEvent(() => {
-          return {
-            signal,
-            touchDelayMs: Date.now() - event.nativeEvent.timestamp,
-          };
-        });
-      }
-
       this._performTransitionSideEffects(prevState, nextState, signal, event);
       this._touchState = nextState;
     }

package/Libraries/Pressability/PressabilityPerformanceEventEmitter.js

@@ -12,7 +12,7 @@ import {type PressabilityTouchSignal as TouchSignal} from './PressabilityTypes.j
 
 export type PressabilityPerformanceEvent = $ReadOnly<{|
   signal: TouchSignal,
-  touchDelayMs: number,
+  nativeTimestamp: number,
 |}>;
 export type PressabilityPerformanceEventListener = PressabilityPerformanceEvent => void;
 

package/Libraries/PushNotificationIOS/RCTPushNotificationManager.mm

@@ -103,7 +103,6 @@ static NSDictionary *RCTFormatLocalNotification(UILocalNotification *notificatio
   return formattedLocalNotification;
 }
 
-API_AVAILABLE(ios(10.0))
 static NSDictionary *RCTFormatUNNotification(UNNotification *notification)
 {
   NSMutableDictionary *formattedNotification = [NSMutableDictionary dictionary];

package/Libraries/ReactNative/AppRegistry.js

@@ -189,8 +189,10 @@ const AppRegistry = {
     displayMode?: number,
   ): void {
     if (appKey !== 'LogBox') {
-      const msg =
-        'Running "' + appKey + '" with ' + JSON.stringify(appParameters);
+      const logParams = __DEV__
+        ? '" with ' + JSON.stringify(appParameters)
+        : '';
+      const msg = 'Running "' + appKey + logParams;
       infoLog(msg);
       BugReporting.addSource(
         'AppRegistry.runApplication' + runCount++,

package/Libraries/Renderer/REVISION

@@ -1 +1 @@
-bd5bf555e1167e7088a4391e5cd419dccb39714c
+afcb9cdc9343ddc134b03dcf4d7fbc0810b6002b