react-native-windows 0.75.4 → 0.76.0-preview.1

package/Libraries/Core/ReactNativeVersion.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @flow strict
- * @generated by scripts/releases/set-rn-version.js
+ * @generated by scripts/releases/set-version.js
  */
 
 const version: $ReadOnly<{
@@ -15,9 +15,9 @@ const version: $ReadOnly<{
   prerelease: string | null,
 }> = {
   major: 0,
-  minor: 75,
-  patch: 3,
-  prerelease: null,
+  minor: 76,
+  patch: 0,
+  prerelease: 'rc.0',
 };
 
 module.exports = {version};

package/Libraries/Core/setUpErrorHandling.js

@@ -21,7 +21,13 @@ ExceptionsManager.installConsoleErrorReporter();
 if (!global.__fbDisableExceptionsManager) {
   const handleError = (e: mixed, isFatal: boolean) => {
     try {
-      ExceptionsManager.handleException(e, isFatal);
+      // TODO(T196834299): We should really use a c++ turbomodule for this
+      if (
+        !global.RN$handleException ||
+        !global.RN$handleException(e, isFatal)
+      ) {
+        ExceptionsManager.handleException(e, isFatal);
+      }
     } catch (ee) {
       console.log('Failed to print error: ', ee.message);
       throw e;

package/Libraries/Core/setUpGlobals.js

@@ -8,6 +8,7 @@
  * @format
  */
 
+'use client';
 'use strict';
 
 /**

package/Libraries/Core/setUpReactRefresh.js

@@ -36,10 +36,6 @@ if (__DEV__) {
     register: ReactRefreshRuntime.register,
 
     performReactRefresh() {
-      if (ReactRefreshRuntime.hasUnrecoverableErrors()) {
-        DevSettings.reload('Fast Refresh - Unrecoverable');
-        return;
-      }
       ReactRefreshRuntime.performReactRefresh();
       DevSettings.onFastRefresh();
     },

package/Libraries/Image/AssetSourceResolver.js

@@ -18,7 +18,10 @@ export type ResolvedAssetSource = {|
   +scale: number,
 |};
 
-import type {PackagerAsset} from '@react-native/assets-registry/registry';
+import type {
+  AssetDestPathResolver,
+  PackagerAsset,
+} from '@react-native/assets-registry/registry';
 
 const PixelRatio = require('../Utilities/PixelRatio').default;
 const Platform = require('../Utilities/Platform');
@@ -76,6 +79,10 @@ class AssetSourceResolver {
       return this.assetServerURL();
     }
 
+    if (this.asset.resolver != null) {
+      return this.getAssetUsingResolver(this.asset.resolver);
+    }
+
     if (Platform.OS === 'android') {
       return this.isLoadedFromFileSystem()
         ? this.drawableFolderInBundle()
@@ -85,6 +92,26 @@ class AssetSourceResolver {
     }
   }
 
+  getAssetUsingResolver(resolver: AssetDestPathResolver): ResolvedAssetSource {
+    switch (resolver) {
+      case 'android':
+        return this.isLoadedFromFileSystem()
+          ? this.drawableFolderInBundle()
+          : this.resourceIdentifierWithoutScale();
+      case 'generic':
+        return this.scaledAssetURLNearBundle();
+      default:
+        throw new Error(
+          "Don't know how to get asset via provided resolver: " +
+            resolver +
+            '\nAsset: ' +
+            JSON.stringify(this.asset, null, '\t') +
+            '\nPossible resolvers are:' +
+            JSON.stringify(['android', 'generic'], null, '\t'),
+        );
+    }
+  }
+
   /**
    * Returns an absolute URL which can be used to fetch the asset
    * from the devserver

package/Libraries/Image/AssetSourceResolver.windows.js

@@ -18,7 +18,10 @@ export type ResolvedAssetSource = {|
   +scale: number,
 |};
 
-import type {PackagerAsset} from '@react-native/assets-registry/registry';
+import type {
+  AssetDestPathResolver,
+  PackagerAsset,
+} from '@react-native/assets-registry/registry';
 
 const PixelRatio = require('../Utilities/PixelRatio').default;
 const Platform = require('../Utilities/Platform');
@@ -98,6 +101,10 @@ class AssetSourceResolver {
       return this.assetServerURL();
     }
 
+    if (this.asset.resolver != null) {
+      return this.getAssetUsingResolver(this.asset.resolver);
+    }
+
     if (Platform.OS === 'android') {
       return this.isLoadedFromFileSystem()
         ? this.drawableFolderInBundle()
@@ -107,6 +114,26 @@ class AssetSourceResolver {
     }
   }
 
+  getAssetUsingResolver(resolver: AssetDestPathResolver): ResolvedAssetSource {
+    switch (resolver) {
+      case 'android':
+        return this.isLoadedFromFileSystem()
+          ? this.drawableFolderInBundle()
+          : this.resourceIdentifierWithoutScale();
+      case 'generic':
+        return this.scaledAssetURLNearBundle();
+      default:
+        throw new Error(
+          "Don't know how to get asset via provided resolver: " +
+            resolver +
+            '\nAsset: ' +
+            JSON.stringify(this.asset, null, '\t') +
+            '\nPossible resolvers are:' +
+            JSON.stringify(['android', 'generic'], null, '\t'),
+        );
+    }
+  }
+
   /**
    * Returns an absolute URL which can be used to fetch the asset
    * from the devserver

package/Libraries/Image/Image.android.js

@@ -150,24 +150,20 @@ let BaseImage: AbstractImageAndroid = React.forwardRef(
       );
     }
 
-    let style;
+    let style: ImageStyleProp;
     let sources;
     if (Array.isArray(source)) {
-      style = flattenStyle<ImageStyleProp>([styles.base, props.style]);
+      style = [styles.base, props.style];
       sources = source;
     } else {
       const {uri} = source;
-      const width = source.width ?? props.width;
-      const height = source.height ?? props.height;
-      style = flattenStyle<ImageStyleProp>([
-        {width, height},
-        styles.base,
-        props.style,
-      ]);
-      sources = [source];
       if (uri === '') {
         console.warn('source.uri should not be an empty string');
       }
+      const width = source.width ?? props.width;
+      const height = source.height ?? props.height;
+      style = [{width, height}, styles.base, props.style];
+      sources = [source];
     }
 
     const {height, width, ...restProps} = props;
@@ -203,11 +199,10 @@ let BaseImage: AbstractImageAndroid = React.forwardRef(
       },
     };
 
-    const objectFit = style?.objectFit
-      ? convertObjectFitToResizeMode(style.objectFit)
-      : null;
+    const flattenedStyle = flattenStyle<ImageStyleProp>(style);
+    const objectFit = convertObjectFitToResizeMode(flattenedStyle?.objectFit);
     const resizeMode =
-      objectFit || props.resizeMode || style?.resizeMode || 'cover';
+      objectFit || props.resizeMode || flattenedStyle?.resizeMode || 'cover';
 
     const actualRef = useWrapRefWithImageAttachedCallbacks(forwardedRef);
 

package/Libraries/Image/Image.ios.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import type {ImageStyle, ImageStyleProp} from '../StyleSheet/StyleSheet';
+import type {ImageStyleProp} from '../StyleSheet/StyleSheet';
 import type {RootTag} from '../Types/RootTagTypes';
 import type {AbstractImageIOS, ImageIOS} from './ImageTypes.flow';
 import type {ImageSize} from './NativeImageLoaderAndroid';
@@ -112,38 +112,27 @@ let BaseImage: AbstractImageIOS = React.forwardRef((props, forwardedRef) => {
     height: undefined,
   };
 
+  let style: ImageStyleProp;
   let sources;
-  let style: ImageStyle;
-
   if (Array.isArray(source)) {
-    style =
-      flattenStyle<ImageStyleProp>([styles.base, props.style]) ||
-      ({}: ImageStyle);
+    style = [styles.base, props.style];
     sources = source;
   } else {
     const {uri} = source;
-    const width = source.width ?? props.width;
-    const height = source.height ?? props.height;
-    style =
-      flattenStyle<ImageStyleProp>([
-        {width, height},
-        styles.base,
-        props.style,
-      ]) || ({}: ImageStyle);
-    sources = [source];
-
     if (uri === '') {
       console.warn('source.uri should not be an empty string');
     }
+    const width = source.width ?? props.width;
+    const height = source.height ?? props.height;
+    style = [{width, height}, styles.base, props.style];
+    sources = [source];
   }
 
-  const objectFit =
-    style.objectFit != null
-      ? convertObjectFitToResizeMode(style.objectFit)
-      : null;
+  const flattenedStyle = flattenStyle<ImageStyleProp>(style);
+  const objectFit = convertObjectFitToResizeMode(flattenedStyle?.objectFit);
   const resizeMode =
-    objectFit || props.resizeMode || style.resizeMode || 'cover';
-  const tintColor = props.tintColor ?? style.tintColor;
+    objectFit || props.resizeMode || flattenedStyle?.resizeMode || 'cover';
+  const tintColor = props.tintColor ?? flattenedStyle?.tintColor;
 
   if (props.children != null) {
     throw new Error(

package/Libraries/Image/Image.windows.js

@@ -8,7 +8,7 @@
  * @format
  */
 
-import type {ImageStyle, ImageStyleProp} from '../StyleSheet/StyleSheet';
+import type {ImageStyleProp} from '../StyleSheet/StyleSheet';
 import type {RootTag} from '../Types/RootTagTypes';
 import type {AbstractImageIOS, ImageIOS} from './ImageTypes.flow';
 import type {ImageSize} from './NativeImageLoaderAndroid';
@@ -114,38 +114,27 @@ let BaseImage: AbstractImageIOS = React.forwardRef((props, forwardedRef) => {
     height: undefined,
   };
 
+  let style: ImageStyleProp;
   let sources;
-  let style: ImageStyle;
-
   if (Array.isArray(source)) {
-    style =
-      flattenStyle<ImageStyleProp>([styles.base, props.style]) ||
-      ({}: ImageStyle);
+    style = [styles.base, props.style];
     sources = source;
   } else {
     const {uri} = source;
-    const width = source.width ?? props.width;
-    const height = source.height ?? props.height;
-    style =
-      flattenStyle<ImageStyleProp>([
-        {width, height},
-        styles.base,
-        props.style,
-      ]) || ({}: ImageStyle);
-    sources = [source];
-
     if (uri === '') {
       console.warn('source.uri should not be an empty string');
     }
+    const width = source.width ?? props.width;
+    const height = source.height ?? props.height;
+    style = [{width, height}, styles.base, props.style];
+    sources = [source];
   }
 
-  const objectFit =
-    style.objectFit != null
-      ? convertObjectFitToResizeMode(style.objectFit)
-      : null;
+  const flattenedStyle = flattenStyle<ImageStyleProp>(style);
+  const objectFit = convertObjectFitToResizeMode(flattenedStyle?.objectFit);
   const resizeMode =
-    objectFit || props.resizeMode || style.resizeMode || 'cover';
-  const tintColor = props.tintColor ?? style.tintColor;
+    objectFit || props.resizeMode || flattenedStyle?.resizeMode || 'cover';
+  const tintColor = props.tintColor ?? flattenedStyle?.tintColor;
 
   if (props.children != null) {
     throw new Error(

package/Libraries/Image/ImageBackground.js

@@ -55,14 +55,7 @@ class ImageBackground extends React.Component<ImageBackgroundProps> {
 
   _viewRef: ?React.ElementRef<typeof View> = null;
 
-  _captureRef = (
-    ref: null | React$ElementRef<
-      React$AbstractComponent<
-        ViewProps,
-        React.ElementRef<HostComponent<ViewProps>>,
-      >,
-    >,
-  ) => {
+  _captureRef = (ref: null | React.ElementRef<HostComponent<ViewProps>>) => {
     this._viewRef = ref;
   };
 

package/Libraries/Image/ImageUtils.js

@@ -10,13 +10,13 @@
 
 type ResizeMode = 'cover' | 'contain' | 'stretch' | 'repeat' | 'center';
 
-export function convertObjectFitToResizeMode(objectFit: string): ResizeMode {
-  const objectFitMap = {
-    contain: 'contain',
-    cover: 'cover',
-    fill: 'stretch',
-    'scale-down': 'contain',
-  };
-  // $FlowFixMe[invalid-computed-prop]
-  return objectFitMap[objectFit];
+const objectFitMap: {[string]: ResizeMode} = {
+  contain: 'contain',
+  cover: 'cover',
+  fill: 'stretch',
+  'scale-down': 'contain',
+};
+
+export function convertObjectFitToResizeMode(objectFit: ?string): ?ResizeMode {
+  return objectFit != null ? objectFitMap[objectFit] : undefined;
 }

package/Libraries/Image/ImageViewNativeComponent.js

@@ -50,6 +50,7 @@ interface NativeCommands {
   +setIsVisible_EXPERIMENTAL: (
     viewRef: ElementRef<HostComponent<mixed>>,
     isVisible: boolean,
+    time: number,
   ) => void;
 }
 

package/Libraries/Inspector/Inspector.js

@@ -17,6 +17,7 @@ import type {
 } from '../Renderer/shims/ReactNativeTypes';
 import type {ViewStyleProp} from '../StyleSheet/StyleSheet';
 import type {ReactDevToolsAgent} from '../Types/ReactDevToolsTypes';
+import SafeAreaView from '../../src/private/components/SafeAreaView_INTERNAL_DO_NOT_USE';
 
 const View = require('../Components/View/View');
 const PressabilityDebug = require('../Pressability/PressabilityDebug');
@@ -164,7 +165,7 @@ function Inspector({
         />
       )}
 
-      <View style={[styles.panelContainer, panelContainerStyle]}>
+      <SafeAreaView style={[styles.panelContainer, panelContainerStyle]}>
         <InspectorPanel
           devtoolsIsOpen={!!reactDevToolsAgent}
           inspecting={selectedTab === 'elements-inspector'}
@@ -180,7 +181,7 @@ function Inspector({
           networking={selectedTab === 'network-profiling'}
           setNetworking={setNetworking}
         />
-      </View>
+      </SafeAreaView>
     </View>
   );
 }

package/Libraries/Inspector/InspectorPanel.js

@@ -80,16 +80,22 @@ class InspectorPanel extends React.Component<Props> {
             pressed={this.props.inspecting}
             onClick={this.props.setInspecting}
           />
-          <InspectorPanelButton
-            title={'Perf'}
-            pressed={this.props.perfing}
-            onClick={this.props.setPerfing}
-          />
-          <InspectorPanelButton
-            title={'Network'}
-            pressed={this.props.networking}
-            onClick={this.props.setNetworking}
-          />
+          {global.RN$Bridgeless === true ? null : (
+            // These Inspector Panel sub-features are removed under the New Arch.
+            // See https://github.com/react-native-community/discussions-and-proposals/pull/777
+            <>
+              <InspectorPanelButton
+                title={'Perf'}
+                pressed={this.props.perfing}
+                onClick={this.props.setPerfing}
+              />
+              <InspectorPanelButton
+                title={'Network'}
+                pressed={this.props.networking}
+                onClick={this.props.setNetworking}
+              />
+            </>
+          )}
           <InspectorPanelButton
             title={'Touchables'}
             pressed={this.props.touchTargeting}

package/Libraries/Inspector/NetworkOverlay.js

@@ -335,7 +335,7 @@ class NetworkOverlay extends React.Component<Props, State> {
   _renderItem = ({
     item,
     index,
-  }: RenderItemProps<NetworkRequestInfo>): React.Element<any> => {
+  }: RenderItemProps<NetworkRequestInfo>): React.MixedElement => {
     const tableRowViewStyle = [
       styles.tableRow,
       index % 2 === 1 ? styles.tableRowOdd : styles.tableRowEven,

package/Libraries/Interaction/TaskQueue.js

@@ -116,6 +116,7 @@ class TaskQueue {
         }
       } catch (e) {
         e.message =
+          // $FlowFixMe[incompatible-type]
           'TaskQueue: Error with task ' + (task.name || '') + ': ' + e.message;
         throw e;
       }

package/Libraries/Lists/FlatList.js

@@ -617,7 +617,7 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
   }
 
   _renderer = (
-    ListItemComponent: ?(React.ComponentType<any> | React.Element<any>),
+    ListItemComponent: ?(React.ComponentType<any> | React.MixedElement),
     renderItem: ?RenderItemType<ItemT>,
     columnWrapperStyle: ?ViewStyleProp,
     numColumns: ?number,

package/Libraries/Lists/SectionList.js

@@ -33,7 +33,7 @@ type RequiredProps<SectionT: SectionBase<any>> = {|
    *
    *     sections: $ReadOnlyArray<{
    *       data: $ReadOnlyArray<SectionItem>,
-   *       renderItem?: ({item: SectionItem, ...}) => ?React.Element<*>,
+   *       renderItem?: ({item: SectionItem, ...}) => ?React.MixedElement,
    *       ItemSeparatorComponent?: ?ReactClass<{highlighted: boolean, ...}>,
    *     }>
    */
@@ -55,7 +55,7 @@ type OptionalProps<SectionT: SectionBase<any>> = {|
       ...
     },
     ...
-  }) => null | React.Element<any>,
+  }) => null | React.Node,
   /**
    * A marker property for telling the list to re-render (since it implements `PureComponent`). If
    * any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the

package/Libraries/Lists/SectionListModern.js

@@ -16,7 +16,7 @@ import type {
   SectionBase as _SectionBase,
   VirtualizedSectionListProps,
 } from '@react-native/virtualized-lists';
-import type {AbstractComponent, Element, ElementRef} from 'react';
+import type {AbstractComponent, ElementRef} from 'react';
 
 import Platform from '../Utilities/Platform';
 import {VirtualizedSectionList} from '@react-native/virtualized-lists';
@@ -34,7 +34,7 @@ type RequiredProps<SectionT: SectionBase<any>> = {|
    *
    *     sections: $ReadOnlyArray<{
    *       data: $ReadOnlyArray<SectionItem>,
-   *       renderItem?: ({item: SectionItem, ...}) => ?React.Element<*>,
+   *       renderItem?: ({item: SectionItem, ...}) => ?React.MixedElement,
    *       ItemSeparatorComponent?: ?ReactClass<{highlighted: boolean, ...}>,
    *     }>
    */
@@ -56,7 +56,7 @@ type OptionalProps<SectionT: SectionBase<any>> = {|
       ...
     },
     ...
-  }) => null | Element<any>,
+  }) => null | React.MixedElement,
   /**
    * A marker property for telling the list to re-render (since it implements `PureComponent`). If
    * any of your `renderItem`, Header, Footer, etc. functions depend on anything outside of the

package/Libraries/LogBox/Data/LogBoxData.js

@@ -18,6 +18,7 @@ import type {
   Message,
 } from './parseLogBoxLog';
 
+import DebuggerSessionObserver from '../../../src/private/fusebox/FuseboxSessionObserver';
 import parseErrorStack from '../../Core/Devtools/parseErrorStack';
 import NativeDevSettings from '../../NativeModules/specs/NativeDevSettings';
 import NativeLogBox from '../../NativeModules/specs/NativeLogBox';
@@ -75,6 +76,7 @@ let updateTimeout: $FlowFixMe | null = null;
 let _isDisabled = false;
 let _selectedIndex = -1;
 let hasShownFuseboxWarningsMigrationMessage = false;
+let hostTargetSessionObserverSubscription = null;
 
 let warningFilter: WarningFilter = function (format) {
   return {
@@ -196,11 +198,30 @@ function appendNewLog(newLog: LogBoxLog) {
 }
 
 export function addLog(log: LogData): void {
+  if (hostTargetSessionObserverSubscription == null) {
+    hostTargetSessionObserverSubscription = DebuggerSessionObserver.subscribe(
+      hasActiveSession => {
+        if (hasActiveSession) {
+          clearWarnings();
+        } else {
+          // Reset the flag so that we can show the message again if new warning was emitted
+          hasShownFuseboxWarningsMigrationMessage = false;
+        }
+      },
+    );
+  }
+
+  // If Host has Fusebox support
   if (log.level === 'warn' && global.__FUSEBOX_HAS_FULL_CONSOLE_SUPPORT__) {
-    // Under Fusebox, don't report warnings to LogBox.
-    showFuseboxWarningsMigrationMessageOnce();
+    // And there is no active debugging session
+    if (!DebuggerSessionObserver.hasActiveSession()) {
+      showFuseboxWarningsMigrationMessageOnce();
+    }
+
+    // Don't show LogBox warnings when Host has active debugging session
     return;
   }
+
   const errorForStackTrace = new Error();
 
   // Parsing logs are expensive so we schedule this
@@ -419,6 +440,7 @@ export function withSubscription(
     componentDidCatch(err: Error, errorInfo: {componentStack: string, ...}) {
       /* $FlowFixMe[class-object-subtyping] added when improving typing for
        * this parameters */
+      // $FlowFixMe[incompatible-call]
       reportLogBoxError(err, errorInfo.componentStack);
     }
 
@@ -483,7 +505,6 @@ function showFuseboxWarningsMigrationMessageOnce() {
         if (NativeDevSettings.openDebugger) {
           NativeDevSettings.openDebugger();
         }
-        clearWarnings();
       },
     }),
   );

package/Libraries/LogBox/LogBoxNotificationContainer.js

@@ -14,6 +14,7 @@ import * as LogBoxData from './Data/LogBoxData';
 import LogBoxLog from './Data/LogBoxLog';
 import LogBoxLogNotification from './UI/LogBoxNotification';
 import * as React from 'react';
+import SafeAreaView from '../../src/private/components/SafeAreaView_INTERNAL_DO_NOT_USE';
 
 type Props = $ReadOnly<{|
   logs: $ReadOnlyArray<LogBoxLog>,
@@ -58,7 +59,7 @@ export function _LogBoxNotificationContainer(props: Props): React.Node {
     log => log.level === 'error' || log.level === 'fatal',
   );
   return (
-    <View style={styles.list}>
+    <SafeAreaView style={styles.list}>
       {warnings.length > 0 && (
         <View style={styles.toast}>
           <LogBoxLogNotification
@@ -81,7 +82,7 @@ export function _LogBoxNotificationContainer(props: Props): React.Node {
           />
         </View>
       )}
-    </View>
+    </SafeAreaView>
   );
 }
 

package/Libraries/LogBox/UI/LogBoxInspectorHeader.js

@@ -8,9 +8,10 @@
  * @format
  */
 
+import type {ViewProps} from '../../Components/View/ViewPropTypes';
 import type {LogLevel} from '../Data/LogBoxLog';
 
-import StatusBar from '../../Components/StatusBar/StatusBar';
+import SafeAreaView from '../../Components/SafeAreaView/SafeAreaView';
 import View from '../../Components/View/View';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
@@ -26,16 +27,19 @@ type Props = $ReadOnly<{
   level: LogLevel,
 }>;
 
+const LogBoxInspectorHeaderSafeArea: React.AbstractComponent<ViewProps> =
+  Platform.OS === 'android' ? View : SafeAreaView;
+
 export default function LogBoxInspectorHeader(props: Props): React.Node {
   if (props.level === 'syntax') {
     return (
-      <View style={[styles.safeArea, styles[props.level]]}>
+      <LogBoxInspectorHeaderSafeArea style={styles[props.level]}>
         <View style={styles.header}>
           <View style={styles.title}>
             <Text style={styles.titleText}>Failed to compile</Text>
           </View>
         </View>
-      </View>
+      </LogBoxInspectorHeaderSafeArea>
     );
   }
 
@@ -47,7 +51,7 @@ export default function LogBoxInspectorHeader(props: Props): React.Node {
   const titleText = `Log ${props.selectedIndex + 1} of ${props.total}`;
 
   return (
-    <View style={[styles.safeArea, styles[props.level]]}>
+    <LogBoxInspectorHeaderSafeArea style={styles[props.level]}>
       <View style={styles.header}>
         <LogBoxInspectorHeaderButton
           disabled={props.total <= 1}
@@ -65,7 +69,7 @@ export default function LogBoxInspectorHeader(props: Props): React.Node {
           onPress={() => props.onSelectIndex(nextIndex)}
         />
       </View>
-    </View>
+    </LogBoxInspectorHeaderSafeArea>
   );
 }
 
@@ -101,7 +105,4 @@ const styles = StyleSheet.create({
     includeFontPadding: false,
     lineHeight: 20,
   },
-  safeArea: {
-    paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 40,
-  },
 });