@office-iss/react-native-win32 0.0.0-canary.257 → 0.0.0-canary.258

package/Libraries/Core/ReactNativeVersionCheck.win32.js

@@ -36,7 +36,7 @@ const checkVersions = function checkVersions(): void {
         `Native version: ${_formatVersion(nativeVersion)}\n\n` +
         'Make sure that you have rebuilt the native code. If the problem ' +
         'persists try clearing the Watchman and packager caches with ' +
-        '`watchman watch-del-all && npx react-native start --reset-cache`.',
+        '`watchman watch-del-all && npx @react-native-community/cli start --reset-cache`.',
     );
   }
 };

package/Libraries/Core/setUpGlobals.js

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

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,30 @@ type Props = $ReadOnly<{
   level: LogLevel,
 }>;
 
+const LogBoxInspectorHeaderSafeArea: React.AbstractComponent<ViewProps> =
+  Platform.OS === 'android'
+    ? function LogBoxInspectorHeaderSafeArea(props) {
+        // NOTE: Inline the import of `StatusBar` so that initializing this module
+        // does not require initializing a TurboModule (and main thread one, too).
+        const {currentHeight} = require('../../Components/StatusBar/StatusBar');
+        const style = StyleSheet.compose(
+          {paddingTop: currentHeight},
+          props.style,
+        );
+        return <View {...props} style={style} />;
+      }
+    : 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 +62,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 +80,7 @@ export default function LogBoxInspectorHeader(props: Props): React.Node {
           onPress={() => props.onSelectIndex(nextIndex)}
         />
       </View>
-    </View>
+    </LogBoxInspectorHeaderSafeArea>
   );
 }
 
@@ -101,7 +116,4 @@ const styles = StyleSheet.create({
     includeFontPadding: false,
     lineHeight: 20,
   },
-  safeArea: {
-    paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 40,
-  },
 });

package/Libraries/LogBox/UI/LogBoxInspectorHeader.win32.js

@@ -10,9 +10,10 @@
 
 'use strict';
 
+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';
@@ -28,16 +29,30 @@ type Props = $ReadOnly<{
   level: LogLevel,
 }>;
 
+const LogBoxInspectorHeaderSafeArea: React.AbstractComponent<ViewProps> =
+  Platform.OS === 'android'
+    ? function LogBoxInspectorHeaderSafeArea(props) {
+        // NOTE: Inline the import of `StatusBar` so that initializing this module
+        // does not require initializing a TurboModule (and main thread one, too).
+        const {currentHeight} = require('../../Components/StatusBar/StatusBar');
+        const style = StyleSheet.compose(
+          {paddingTop: currentHeight},
+          props.style,
+        );
+        return <View {...props} style={style} />;
+      }
+    : 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>
     );
   }
 
@@ -49,7 +64,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}
@@ -67,7 +82,7 @@ export default function LogBoxInspectorHeader(props: Props): React.Node {
           onPress={() => props.onSelectIndex(nextIndex)}
         />
       </View>
-    </View>
+    </LogBoxInspectorHeaderSafeArea>
   );
 }
 
@@ -106,7 +121,4 @@ const styles = StyleSheet.create({
     includeFontPadding: false,
     lineHeight: 20,
   },
-  safeArea: {
-    paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 40,
-  },
 });

package/Libraries/ReactNative/AppContainer-dev.js

@@ -90,7 +90,6 @@ const AppContainer = ({
   internal_excludeInspector = false,
   internal_excludeLogBox = false,
   rootTag,
-  showArchitectureIndicator,
   WrapperComponent,
   rootViewStyle,
 }: Props): React.Node => {
@@ -150,10 +149,7 @@ const AppContainer = ({
 
   if (WrapperComponent != null) {
     innerView = (
-      <WrapperComponent
-        initialProps={initialProps}
-        fabric={fabric === true}
-        showArchitectureIndicator={showArchitectureIndicator === true}>
+      <WrapperComponent initialProps={initialProps} fabric={fabric === true}>
         {innerView}
       </WrapperComponent>
     );

package/Libraries/ReactNative/AppContainer-prod.js

@@ -21,7 +21,6 @@ const AppContainer = ({
   fabric,
   initialProps,
   rootTag,
-  showArchitectureIndicator,
   WrapperComponent,
   rootViewStyle,
 }: Props): React.Node => {
@@ -29,10 +28,7 @@ const AppContainer = ({
 
   if (WrapperComponent != null) {
     innerView = (
-      <WrapperComponent
-        initialProps={initialProps}
-        fabric={fabric === true}
-        showArchitectureIndicator={showArchitectureIndicator === true}>
+      <WrapperComponent initialProps={initialProps} fabric={fabric === true}>
         {innerView}
       </WrapperComponent>
     );

package/Libraries/ReactNative/AppContainer.js

@@ -18,7 +18,6 @@ export type Props = $ReadOnly<{|
   fabric?: boolean,
   rootTag: number | RootTag,
   initialProps?: {...},
-  showArchitectureIndicator?: boolean,
   WrapperComponent?: ?React.ComponentType<any>,
   rootViewStyle?: ?ViewStyleProp,
   internal_excludeLogBox?: boolean,

package/Libraries/ReactNative/AppRegistry.js

@@ -73,7 +73,6 @@ let componentProviderInstrumentationHook: ComponentProviderInstrumentationHook =
 
 let wrapperComponentProvider: ?WrapperComponentProvider;
 let rootViewStyleProvider: ?RootViewStyleProvider;
-let showArchitectureIndicator = false;
 
 /**
  * `AppRegistry` is the JavaScript entry point to running all React Native apps.
@@ -89,10 +88,6 @@ const AppRegistry = {
     rootViewStyleProvider = provider;
   },
 
-  enableArchitectureIndicator(enabled: boolean): void {
-    showArchitectureIndicator = enabled;
-  },
-
   registerConfig(config: Array<AppConfig>): void {
     config.forEach(appConfig => {
       if (appConfig.run) {
@@ -139,7 +134,6 @@ const AppRegistry = {
         wrapperComponentProvider && wrapperComponentProvider(appParameters),
         rootViewStyleProvider && rootViewStyleProvider(appParameters),
         appParameters.fabric,
-        showArchitectureIndicator,
         scopedPerformanceLogger,
         appKey === 'LogBox', // is logbox
         appKey,

package/Libraries/ReactNative/renderApplication.js

@@ -35,7 +35,6 @@ export default function renderApplication<Props: Object>(
   WrapperComponent?: ?React.ComponentType<any>,
   rootViewStyle?: ?ViewStyleProp,
   fabric?: boolean,
-  showArchitectureIndicator?: boolean,
   scopedPerformanceLogger?: IPerformanceLogger,
   isLogBox?: boolean,
   debugName?: string,
@@ -52,7 +51,6 @@ export default function renderApplication<Props: Object>(
       <AppContainer
         rootTag={rootTag}
         fabric={fabric}
-        showArchitectureIndicator={showArchitectureIndicator}
         WrapperComponent={WrapperComponent}
         rootViewStyle={rootViewStyle}
         initialProps={initialProps ?? Object.freeze({})}

package/Libraries/StyleSheet/StyleSheetTypes.d.ts

@@ -11,6 +11,25 @@ import {Animated} from '../Animated/Animated';
 import {ImageResizeMode} from '../Image/ImageResizeMode';
 import {ColorValue} from './StyleSheet';
 
+export type FilterPrimitive =
+  | {brightness: number | string}
+  | {blur: number | string}
+  | {contrast: number | string}
+  | {grayscale: number | string}
+  | {'hue-rotate': number | string}
+  | {invert: number | string}
+  | {opacity: number | string}
+  | {saturate: number | string}
+  | {sepia: number | string}
+  | {'drop-shadow': DropShadowPrimitive | string};
+
+export type DropShadowPrimitive = {
+  offsetX: number | string;
+  offsetY: number | string;
+  standardDeviation?: number | string | undefined;
+  color?: ColorValue | number | undefined;
+};
+
 type FlexAlignType =
   | 'flex-start'
   | 'flex-end'

package/Libraries/StyleSheet/StyleSheetTypes.js

@@ -11,7 +11,6 @@
 'use strict';
 
 import type AnimatedNode from '../Animated/nodes/AnimatedNode';
-import type {FilterPrimitive} from '../StyleSheet/processFilter';
 import type {
   ____DangerouslyImpreciseStyle_InternalOverrides,
   ____ImageStyle_InternalOverrides,
@@ -35,6 +34,25 @@ export type EdgeInsetsValue = {
   bottom: number,
 };
 
+export type FilterPrimitive =
+  | {brightness: number | string}
+  | {blur: number | string}
+  | {contrast: number | string}
+  | {grayscale: number | string}
+  | {'hue-rotate': number | string}
+  | {invert: number | string}
+  | {opacity: number | string}
+  | {saturate: number | string}
+  | {sepia: number | string}
+  | {'drop-shadow': DropShadowPrimitive | string};
+
+export type DropShadowPrimitive = {
+  offsetX: number | string,
+  offsetY: number | string,
+  standardDeviation?: number | string,
+  color?: ____ColorValue_Internal | number,
+};
+
 export type DimensionValue = number | string | 'auto' | AnimatedNode | null;
 export type AnimatableNumericValue = number | AnimatedNode;
 

package/Libraries/StyleSheet/processFilter.js

@@ -4,64 +4,97 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
+ * @format strict-local
  * @flow
+ * @oncall react-native
  */
 
 'use strict';
 
-export type FilterPrimitive =
-  | {brightness: number | string}
-  | {blur: number | string}
-  | {contrast: number | string}
-  | {grayscale: number | string}
-  | {hueRotate: number | string}
-  | {invert: number | string}
-  | {opacity: number | string}
-  | {saturate: number | string}
-  | {sepia: number | string};
+import type {ColorValue} from './StyleSheet';
+import type {DropShadowPrimitive, FilterPrimitive} from './StyleSheetTypes';
+
+import processColor from './processColor';
+
+type ParsedFilter =
+  | {brightness: number}
+  | {blur: number}
+  | {contrast: number}
+  | {grayscale: number}
+  | {'hue-rotate': number}
+  | {invert: number}
+  | {opacity: number}
+  | {saturate: number}
+  | {sepia: number}
+  | {'drop-shadow': ParsedDropShadow};
+
+type ParsedDropShadow = {
+  offsetX: number,
+  offsetY: number,
+  standardDeviation?: number,
+  color?: ColorValue,
+};
 
 export default function processFilter(
   filter: $ReadOnlyArray<FilterPrimitive> | string,
-): $ReadOnlyArray<FilterPrimitive> {
-  let result: Array<FilterPrimitive> = [];
+): $ReadOnlyArray<ParsedFilter> {
+  let result: Array<ParsedFilter> = [];
   if (typeof filter === 'string') {
-    // matches on functions with args like "brightness(1.5)"
-    const regex = new RegExp(/(\w+)\(([^)]+)\)/g);
+    // matches on functions with args like "drop-shadow(1.5)"
+    const regex = /([\w-]+)\(([^)]+)\)/g;
     let matches;
 
     while ((matches = regex.exec(filter))) {
-      const amount = _getFilterAmount(matches[1], matches[2]);
-
-      if (amount != null) {
-        const filterPrimitive = {};
-        // $FlowFixMe The key will be the correct one but flow can't see that.
-        filterPrimitive[matches[1]] = amount;
-        // $FlowFixMe The key will be the correct one but flow can't see that.
-        result.push(filterPrimitive);
+      let filterName = matches[1].toLowerCase();
+      if (filterName === 'drop-shadow') {
+        const dropShadow = parseDropShadow(matches[2]);
+        if (dropShadow != null) {
+          result.push({'drop-shadow': dropShadow});
+        } else {
+          return [];
+        }
       } else {
-        // If any primitive is invalid then apply none of the filters. This is how
-        // web works and makes it clear that something is wrong becuase no
-        // graphical effects are happening.
-        return [];
+        const amount = _getFilterAmount(filterName, matches[2]);
+
+        if (amount != null) {
+          const filterPrimitive = {};
+          // $FlowFixMe The key will be the correct one but flow can't see that.
+          filterPrimitive[filterName] = amount;
+          // $FlowFixMe The key will be the correct one but flow can't see that.
+          result.push(filterPrimitive);
+        } else {
+          // If any primitive is invalid then apply none of the filters. This is how
+          // web works and makes it clear that something is wrong becuase no
+          // graphical effects are happening.
+          return [];
+        }
       }
     }
   } else {
     for (const filterPrimitive of filter) {
       const [filterName, filterValue] = Object.entries(filterPrimitive)[0];
-      const amount = _getFilterAmount(filterName, filterValue);
-
-      if (amount != null) {
-        const resultObject = {};
+      if (filterName === 'drop-shadow') {
         // $FlowFixMe
-        resultObject[filterName] = amount;
-        // $FlowFixMe
-        result.push(resultObject);
+        const dropShadow = parseDropShadow(filterValue);
+        if (dropShadow == null) {
+          return [];
+        }
+        result.push({'drop-shadow': dropShadow});
       } else {
-        // If any primitive is invalid then apply none of the filters. This is how
-        // web works and makes it clear that something is wrong becuase no
-        // graphical effects are happening.
-        return [];
+        const amount = _getFilterAmount(filterName, filterValue);
+
+        if (amount != null) {
+          const resultObject = {};
+          // $FlowFixMe
+          resultObject[filterName] = amount;
+          // $FlowFixMe
+          result.push(resultObject);
+        } else {
+          // If any primitive is invalid then apply none of the filters. This is how
+          // web works and makes it clear that something is wrong becuase no
+          // graphical effects are happening.
+          return [];
+        }
       }
     }
   }
@@ -92,7 +125,7 @@ function _getFilterAmount(filterName: string, filterArgs: mixed): ?number {
   switch (filterName) {
     // Hue rotate takes some angle that can have a unit and can be
     // negative. Additionally, 0 with no unit is allowed.
-    case 'hueRotate':
+    case 'hue-rotate':
       if (filterArgAsNumber === 0) {
         return 0;
       }
@@ -130,3 +163,145 @@ function _getFilterAmount(filterName: string, filterArgs: mixed): ?number {
       return undefined;
   }
 }
+
+function parseDropShadow(
+  rawDropShadow: string | DropShadowPrimitive,
+): ?ParsedDropShadow {
+  const dropShadow =
+    typeof rawDropShadow === 'string'
+      ? parseDropShadowString(rawDropShadow)
+      : rawDropShadow;
+
+  const parsedDropShadow: ParsedDropShadow = {
+    offsetX: 0,
+    offsetY: 0,
+  };
+  let offsetX: number;
+  let offsetY: number;
+
+  for (const arg in dropShadow) {
+    let value;
+    switch (arg) {
+      case 'offsetX':
+        value =
+          typeof dropShadow.offsetX === 'string'
+            ? parseLength(dropShadow.offsetX)
+            : dropShadow.offsetX;
+        if (value == null) {
+          return null;
+        }
+        offsetX = value;
+        break;
+      case 'offsetY':
+        value =
+          typeof dropShadow.offsetY === 'string'
+            ? parseLength(dropShadow.offsetY)
+            : dropShadow.offsetY;
+        if (value == null) {
+          return null;
+        }
+        offsetY = value;
+        break;
+      case 'standardDeviation':
+        value =
+          typeof dropShadow.standardDeviation === 'string'
+            ? parseLength(dropShadow.standardDeviation)
+            : dropShadow.standardDeviation;
+        if (value == null || value < 0) {
+          return null;
+        }
+        parsedDropShadow.standardDeviation = value;
+        break;
+      case 'color':
+        const color = processColor(dropShadow.color);
+        if (color == null) {
+          return null;
+        }
+        parsedDropShadow.color = color;
+        break;
+      default:
+        return null;
+    }
+  }
+
+  if (offsetX == null || offsetY == null) {
+    return null;
+  }
+
+  parsedDropShadow.offsetX = offsetX;
+  parsedDropShadow.offsetY = offsetY;
+
+  return parsedDropShadow;
+}
+
+function parseDropShadowString(rawDropShadow: string): ?DropShadowPrimitive {
+  const dropShadow: DropShadowPrimitive = {
+    offsetX: 0,
+    offsetY: 0,
+  };
+  let offsetX: string;
+  let offsetY: string;
+  let lengthCount = 0;
+  let keywordDetectedAfterLength = false;
+
+  // split on all whitespaces
+  for (const arg of rawDropShadow.split(/\s+/)) {
+    const processedColor = processColor(arg);
+    if (processedColor != null) {
+      if (dropShadow.color != null) {
+        return null;
+      }
+      if (offsetX != null) {
+        keywordDetectedAfterLength = true;
+      }
+      dropShadow.color = arg;
+      continue;
+    }
+
+    switch (lengthCount) {
+      case 0:
+        offsetX = arg;
+        lengthCount++;
+        break;
+      case 1:
+        if (keywordDetectedAfterLength) {
+          return null;
+        }
+        offsetY = arg;
+        lengthCount++;
+        break;
+      case 2:
+        if (keywordDetectedAfterLength) {
+          return null;
+        }
+        dropShadow.standardDeviation = arg;
+        lengthCount++;
+        break;
+      default:
+        return null;
+    }
+  }
+  if (offsetX == null || offsetY == null) {
+    return null;
+  }
+
+  dropShadow.offsetX = offsetX;
+  dropShadow.offsetY = offsetY;
+  return dropShadow;
+}
+
+function parseLength(length: string): ?number {
+  // matches on args with units like "1.5 5% -80deg"
+  const argsWithUnitsRegex = /([+-]?\d*(\.\d+)?)([\w\W]+)?/g;
+  const match = argsWithUnitsRegex.exec(length);
+
+  if (!match || Number.isNaN(match[1])) {
+    return null;
+  }
+
+  if (match[3] != null && match[3] !== 'px') {
+    return null;
+  }
+
+  return Number(match[1]);
+}

package/Libraries/Text/Text.js

@@ -11,6 +11,7 @@
 import type {PressEvent} from '../Types/CoreEventTypes';
 import type {TextProps} from './TextProps';
 
+import * as ReactNativeFeatureFlags from '../../src/private/featureflags/ReactNativeFeatureFlags';
 import * as PressabilityDebug from '../Pressability/PressabilityDebug';
 import usePressability from '../Pressability/usePressability';
 import flattenStyle from '../StyleSheet/flattenStyle';
@@ -18,6 +19,7 @@ import processColor from '../StyleSheet/processColor';
 import Platform from '../Utilities/Platform';
 import TextAncestor from './TextAncestor';
 import {NativeText, NativeVirtualText} from './TextNativeComponent';
+import TextOptimized from './TextOptimized';
 import * as React from 'react';
 import {useContext, useMemo, useState} from 'react';
 
@@ -26,7 +28,7 @@ import {useContext, useMemo, useState} from 'react';
  *
  * @see https://reactnative.dev/docs/text
  */
-const Text: React.AbstractComponent<
+const TextLegacy: React.AbstractComponent<
   TextProps,
   React.ElementRef<typeof NativeText | typeof NativeVirtualText>,
 > = React.forwardRef((props: TextProps, forwardedRef) => {
@@ -307,7 +309,7 @@ const Text: React.AbstractComponent<
   );
 });
 
-Text.displayName = 'Text';
+TextLegacy.displayName = 'TextLegacy';
 
 /**
  * Returns false until the first time `newValue` is true, after which this will
@@ -337,4 +339,17 @@ const verticalAlignToTextAlignVerticalMap = {
   middle: 'center',
 };
 
+const Text: React.AbstractComponent<
+  TextProps,
+  React.ElementRef<typeof NativeText | typeof NativeVirtualText>,
+> = React.forwardRef((props: TextProps, forwardedRef) => {
+  if (ReactNativeFeatureFlags.shouldUseOptimizedText()) {
+    return <TextOptimized {...props} ref={forwardedRef} />;
+  } else {
+    return <TextLegacy {...props} ref={forwardedRef} />;
+  }
+});
+
+Text.displayName = 'Text';
+
 module.exports = Text;