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

package/src/private/webapis/performance/PerformanceEntry.js

@@ -8,14 +8,16 @@
  * @flow strict
  */
 
-export type HighResTimeStamp = number;
-export type PerformanceEntryType = 'mark' | 'measure' | 'event';
+// flowlint unsafe-getters-setters:off
+
+export type DOMHighResTimeStamp = number;
+export type PerformanceEntryType = 'mark' | 'measure' | 'event' | 'longtask';
 
 export type PerformanceEntryJSON = {
   name: string,
   entryType: PerformanceEntryType,
-  startTime: HighResTimeStamp,
-  duration: HighResTimeStamp,
+  startTime: DOMHighResTimeStamp,
+  duration: DOMHighResTimeStamp,
   ...
 };
 
@@ -25,29 +27,45 @@ export const ALWAYS_LOGGED_ENTRY_TYPES: $ReadOnlyArray<PerformanceEntryType> = [
 ];
 
 export class PerformanceEntry {
-  name: string;
-  entryType: PerformanceEntryType;
-  startTime: HighResTimeStamp;
-  duration: HighResTimeStamp;
+  #name: string;
+  #entryType: PerformanceEntryType;
+  #startTime: DOMHighResTimeStamp;
+  #duration: DOMHighResTimeStamp;
 
   constructor(init: {
     name: string,
     entryType: PerformanceEntryType,
-    startTime: HighResTimeStamp,
-    duration: HighResTimeStamp,
+    startTime: DOMHighResTimeStamp,
+    duration: DOMHighResTimeStamp,
   }) {
-    this.name = init.name;
-    this.entryType = init.entryType;
-    this.startTime = init.startTime;
-    this.duration = init.duration;
+    this.#name = init.name;
+    this.#entryType = init.entryType;
+    this.#startTime = init.startTime;
+    this.#duration = init.duration;
+  }
+
+  get name(): string {
+    return this.#name;
+  }
+
+  get entryType(): PerformanceEntryType {
+    return this.#entryType;
+  }
+
+  get startTime(): DOMHighResTimeStamp {
+    return this.#startTime;
+  }
+
+  get duration(): DOMHighResTimeStamp {
+    return this.#duration;
   }
 
   toJSON(): PerformanceEntryJSON {
     return {
-      name: this.name,
-      entryType: this.entryType,
-      startTime: this.startTime,
-      duration: this.duration,
+      name: this.#name,
+      entryType: this.#entryType,
+      startTime: this.#startTime,
+      duration: this.#duration,
     };
   }
 }

package/src/private/webapis/performance/PerformanceObserver.js

@@ -8,11 +8,14 @@
  * @flow strict
  */
 
-import type {HighResTimeStamp, PerformanceEntryType} from './PerformanceEntry';
+import type {
+  DOMHighResTimeStamp,
+  PerformanceEntryType,
+} from './PerformanceEntry';
 
 import warnOnce from '../../../../Libraries/Utilities/warnOnce';
+import {PerformanceEventTiming} from './EventTiming';
 import {PerformanceEntry} from './PerformanceEntry';
-import PerformanceEventTiming from './PerformanceEventTiming';
 import {
   performanceEntryTypeToRaw,
   rawToPerformanceEntry,
@@ -66,13 +69,13 @@ export type PerformanceObserverInit =
     }
   | {
       type: PerformanceEntryType,
-      durationThreshold?: HighResTimeStamp,
+      durationThreshold?: DOMHighResTimeStamp,
     };
 
 type PerformanceObserverConfig = {|
   callback: PerformanceObserverCallback,
-  // Map of {entryType: durationThreshold}
-  entryTypes: $ReadOnlyMap<PerformanceEntryType, ?number>,
+  entryTypes: $ReadOnlySet<PerformanceEntryType>,
+  durationThreshold: ?number,
 |};
 
 const observerCountPerEntryType: Map<PerformanceEntryType, number> = new Map();
@@ -97,8 +100,15 @@ const onPerformanceEntry = () => {
       if (!observerConfig.entryTypes.has(entry.entryType)) {
         return false;
       }
-      const durationThreshold = observerConfig.entryTypes.get(entry.entryType);
-      return entry.duration >= (durationThreshold ?? 0);
+
+      if (
+        entry.entryType === 'event' &&
+        observerConfig.durationThreshold != null
+      ) {
+        return entry.duration >= observerConfig.durationThreshold;
+      }
+
+      return true;
     });
     if (entriesForObserver.length !== 0) {
       try {
@@ -122,21 +132,11 @@ export function warnNoNativePerformanceObserver() {
 }
 
 function applyDurationThresholds() {
-  const durationThresholds: Map<PerformanceEntryType, ?number> = Array.from(
-    registeredObservers.values(),
-  )
-    .map(config => config.entryTypes)
-    .reduce(
-      (accumulator, currentValue) => union(accumulator, currentValue),
-      new Map(),
-    );
-
-  for (const [entryType, durationThreshold] of durationThresholds) {
-    NativePerformanceObserver?.setDurationThreshold(
-      performanceEntryTypeToRaw(entryType),
-      durationThreshold ?? 0,
-    );
-  }
+  const durationThresholds = Array.from(registeredObservers.values())
+    .map(observerConfig => observerConfig.durationThreshold)
+    .filter(Boolean);
+
+  return Math.min(...durationThresholds);
 }
 
 function getSupportedPerformanceEntryTypes(): $ReadOnlyArray<PerformanceEntryType> {
@@ -174,7 +174,7 @@ function getSupportedPerformanceEntryTypes(): $ReadOnlyArray<PerformanceEntryTyp
  * });
  * observer.observe({ type: "event" });
  */
-export default class PerformanceObserver {
+export class PerformanceObserver {
   #callback: PerformanceObserverCallback;
   #type: 'single' | 'multiple' | void;
 
@@ -194,14 +194,10 @@ export default class PerformanceObserver {
 
     if (options.entryTypes) {
       this.#type = 'multiple';
-      requestedEntryTypes = new Map(
-        options.entryTypes.map(t => [t, undefined]),
-      );
+      requestedEntryTypes = new Set(options.entryTypes);
     } else {
       this.#type = 'single';
-      requestedEntryTypes = new Map([
-        [options.type, options.durationThreshold],
-      ]);
+      requestedEntryTypes = new Set([options.type]);
     }
 
     // The same observer may receive multiple calls to "observe", so we need
@@ -218,6 +214,8 @@ export default class PerformanceObserver {
 
     registeredObservers.set(this, {
       callback: this.#callback,
+      durationThreshold:
+        options.type === 'event' ? options.durationThreshold : undefined,
       entryTypes: nextEntryTypes,
     });
 
@@ -322,20 +320,8 @@ export default class PerformanceObserver {
     getSupportedPerformanceEntryTypes();
 }
 
-// As a Set union, except if value exists in both, we take minimum
-function union<T>(
-  a: $ReadOnlyMap<T, ?number>,
-  b: $ReadOnlyMap<T, ?number>,
-): Map<T, ?number> {
-  const res = new Map<T, ?number>();
-  for (const [k, v] of a) {
-    if (!b.has(k)) {
-      res.set(k, v);
-    } else {
-      res.set(k, Math.min(v ?? 0, b.get(k) ?? 0));
-    }
-  }
-  return res;
+function union<T>(a: $ReadOnlySet<T>, b: $ReadOnlySet<T>): Set<T> {
+  return new Set([...a, ...b]);
 }
 
 function difference<T>(a: $ReadOnlySet<T>, b: $ReadOnlySet<T>): Set<T> {

package/src/private/webapis/performance/RawPerformanceEntry.js

@@ -14,13 +14,16 @@ import type {
   RawPerformanceEntryType,
 } from './specs/NativePerformanceObserver';
 
+import {PerformanceEventTiming} from './EventTiming';
+import {PerformanceLongTaskTiming} from './LongTasks';
 import {PerformanceEntry} from './PerformanceEntry';
-import PerformanceEventTiming from './PerformanceEventTiming';
+import {PerformanceMark, PerformanceMeasure} from './UserTiming';
 
 export const RawPerformanceEntryTypeValues = {
   MARK: 1,
   MEASURE: 2,
   EVENT: 3,
+  LONGTASK: 4,
 };
 
 export function rawToPerformanceEntry(
@@ -35,6 +38,22 @@ export function rawToPerformanceEntry(
       processingEnd: entry.processingEnd,
       interactionId: entry.interactionId,
     });
+  } else if (entry.entryType === RawPerformanceEntryTypeValues.LONGTASK) {
+    return new PerformanceLongTaskTiming({
+      name: entry.name,
+      entryType: rawToPerformanceEntryType(entry.entryType),
+      startTime: entry.startTime,
+      duration: entry.duration,
+    });
+  } else if (entry.entryType === RawPerformanceEntryTypeValues.MARK) {
+    return new PerformanceMark(entry.name, {
+      startTime: entry.startTime,
+    });
+  } else if (entry.entryType === RawPerformanceEntryTypeValues.MEASURE) {
+    return new PerformanceMeasure(entry.name, {
+      startTime: entry.startTime,
+      duration: entry.duration,
+    });
   } else {
     return new PerformanceEntry({
       name: entry.name,
@@ -55,6 +74,8 @@ export function rawToPerformanceEntryType(
       return 'measure';
     case RawPerformanceEntryTypeValues.EVENT:
       return 'event';
+    case RawPerformanceEntryTypeValues.LONGTASK:
+      return 'longtask';
     default:
       throw new TypeError(
         `rawToPerformanceEntryType: unexpected performance entry type received: ${type}`,
@@ -72,6 +93,8 @@ export function performanceEntryTypeToRaw(
       return RawPerformanceEntryTypeValues.MEASURE;
     case 'event':
       return RawPerformanceEntryTypeValues.EVENT;
+    case 'longtask':
+      return RawPerformanceEntryTypeValues.LONGTASK;
     default:
       // Verify exhaustive check with Flow
       (type: empty);

package/src/private/webapis/performance/UserTiming.js

@@ -8,24 +8,25 @@
  * @flow strict
  */
 
-import type {HighResTimeStamp} from './PerformanceEntry';
+// flowlint unsafe-getters-setters:off
+
+import type {DOMHighResTimeStamp} from './PerformanceEntry';
 
 import {PerformanceEntry} from './PerformanceEntry';
 
-type DetailType = mixed;
+export type DetailType = mixed;
 
 export type PerformanceMarkOptions = {
   detail?: DetailType,
-  startTime?: HighResTimeStamp,
+  startTime?: DOMHighResTimeStamp,
 };
 
-export type TimeStampOrName = HighResTimeStamp | string;
+export type TimeStampOrName = DOMHighResTimeStamp | string;
 
-export type PerformanceMeasureOptions = {
+export type PerformanceMeasureInit = {
   detail?: DetailType,
-  start?: TimeStampOrName,
-  end?: TimeStampOrName,
-  duration?: HighResTimeStamp,
+  startTime?: DOMHighResTimeStamp,
+  duration?: DOMHighResTimeStamp,
 };
 
 export class PerformanceMark extends PerformanceEntry {
@@ -46,18 +47,22 @@ export class PerformanceMark extends PerformanceEntry {
 }
 
 export class PerformanceMeasure extends PerformanceEntry {
-  detail: DetailType;
+  #detail: DetailType;
 
-  constructor(measureName: string, measureOptions?: PerformanceMeasureOptions) {
+  constructor(measureName: string, measureOptions?: PerformanceMeasureInit) {
     super({
       name: measureName,
       entryType: 'measure',
-      startTime: 0,
+      startTime: measureOptions?.startTime ?? 0,
       duration: measureOptions?.duration ?? 0,
     });
 
     if (measureOptions) {
-      this.detail = measureOptions.detail;
+      this.#detail = measureOptions.detail;
     }
   }
+
+  get detail(): DetailType {
+    return this.#detail;
+  }
 }

package/src/private/webapis/performance/specs/NativePerformanceObserver.js

@@ -46,7 +46,7 @@ export interface Spec extends TurboModule {
     durationThreshold: number,
   ) => void;
   +clearEntries: (
-    entryType: RawPerformanceEntryType,
+    entryType?: RawPerformanceEntryType,
     entryName?: string,
   ) => void;
   +getEntries: (

package/template/cpp-app/src/AutolinkedNativeModules.g.cpp

@@ -1,4 +1,4 @@
-// AutolinkedNativeModules.g.cpp contents generated by "react-native autolink-windows"
+// AutolinkedNativeModules.g.cpp contents generated by "npx @react-native-community/cli autolink-windows"
 // clang-format off
 #include "pch.h"
 #include "AutolinkedNativeModules.g.h"{{ &autolinkCppIncludes }}

package/template/cpp-app/src/AutolinkedNativeModules.g.h

@@ -1,4 +1,4 @@
-// AutolinkedNativeModules.g.h contents generated by "react-native autolink-windows"
+// AutolinkedNativeModules.g.h contents generated by "npx @react-native-community/cli autolink-windows"
 // clang-format off
 #pragma once
 

package/template/cs-app/src/AutolinkedNativeModules.g.cs

@@ -1,4 +1,4 @@
-// AutolinkedNativeModules.g.cs contents generated by "react-native autolink-windows"
+// AutolinkedNativeModules.g.cs contents generated by "npx @react-native-community/cli autolink-windows"
 
 using System.Collections.Generic;{{ &autolinkCsUsingNamespaces }}
 

package/template/index.windows.bundle

@@ -2,7 +2,7 @@
  * 
  * Be sure to generate this file using the CLI:
  *
- * npx react-native bundle --platform windows --entry-file index.js 
+ * npx @react-native-community/cli bundle --platform windows --entry-file index.js 
  *   --bundle-output windows\{{ name }}\Bundle\index.windows.bundle
  *   --assets-dest windows\{{ name }}\Bundle
  *

package/template/metro.config.js

@@ -26,11 +26,11 @@ const config = {
   // devMode]{{/devMode}}
   resolver: {
     blockList: exclusionList([
-      // This stops "react-native run-windows" from causing the metro server to crash if its already running
+      // This stops "npx @react-native-community/cli run-windows" from causing the metro server to crash if its already running
       new RegExp(
         `${path.resolve(__dirname, 'windows').replace(/[/\\]/g, '/')}.*`,
       ),
-      // This prevents "react-native run-windows" from hitting: EBUSY: resource busy or locked, open msbuild.ProjectImports.zip or other files produced by msbuild
+      // This prevents "npx @react-native-community/cli run-windows" from hitting: EBUSY: resource busy or locked, open msbuild.ProjectImports.zip or other files produced by msbuild
       new RegExp(`${rnwPath}/build/.*`),
       new RegExp(`${rnwPath}/target/.*`),
       /.*\.ProjectImports\.zip/,

package/template/shared-app/src/AutolinkedNativeModules.g.props

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
-  <!-- AutolinkedNativeModules.g.props contents generated by "react-native autolink-windows" -->
+  <!-- AutolinkedNativeModules.g.props contents generated by "npx @react-native-community/cli autolink-windows" -->
   <PropertyGroup>{{ &autolinkPropertiesForProps }}
   </PropertyGroup>
 </Project>

package/template/shared-app/src/AutolinkedNativeModules.g.targets

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <Project xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
-  <!-- AutolinkedNativeModules.g.targets contents generated by "react-native autolink-windows" -->
+  <!-- AutolinkedNativeModules.g.targets contents generated by "npx @react-native-community/cli autolink-windows" -->
   <ItemGroup>{{ &autolinkProjectReferencesForTargets }}
   </ItemGroup>
 </Project>

package/templates/cpp-app/metro.config.js

@@ -26,11 +26,11 @@ const config = {
   // devMode]{{/devMode}}
   resolver: {
     blockList: exclusionList([
-      // This stops "react-native run-windows" from causing the metro server to crash if its already running
+      // This stops "npx @react-native-community/cli run-windows" from causing the metro server to crash if its already running
       new RegExp(
         `${path.resolve(__dirname, 'windows').replace(/[/\\]/g, '/')}.*`,
       ),
-      // This prevents "react-native run-windows" from hitting: EBUSY: resource busy or locked, open msbuild.ProjectImports.zip or other files produced by msbuild
+      // This prevents "npx @react-native-community/cli run-windows" from hitting: EBUSY: resource busy or locked, open msbuild.ProjectImports.zip or other files produced by msbuild
       new RegExp(`${rnwPath}/build/.*`),
       new RegExp(`${rnwPath}/target/.*`),
       /.*\.ProjectImports\.zip/,

package/templates/cpp-app/template.config.js

@@ -7,10 +7,10 @@
  */
 
 const chalk = require('chalk');
+const crypto = require('crypto');
 const existsSync = require('fs').existsSync;
 const path = require('path');
 const username = require('username');
-const uuid = require('uuid');
 const util = require('util');
 
 const glob = util.promisify(require('glob'));
@@ -30,8 +30,8 @@ async function getFileMappings(config = {}, options = {}) {
   const projectGuid =
     config?.project?.windows?.project?.projectGuid
       ?.replace('{', '')
-      .replace('}', '') ?? uuid.v4();
-  const packageGuid = uuid.v4();
+      .replace('}', '') ?? crypto.randomUUID();
+  const packageGuid = crypto.randomUUID();
   const currentUser = username.sync(); // Gets the current username depending on the platform.
 
   const appJsonPath = path.join(config?.root ?? process.cwd(), 'app.json');
@@ -114,7 +114,7 @@ async function postInstall(config = {}, options = {}) {
   // Update package.json with new scripts and dependencies
   await templateUtils.updateProjectPackageJson(config, options, {
     scripts: {
-      windows: 'react-native run-windows',
+      windows: 'npx @react-native-community/cli run-windows',
       'test:windows': 'jest --config jest.config.windows.js',
     },
     devDependencies: {
@@ -126,7 +126,7 @@ async function postInstall(config = {}, options = {}) {
   await templateUtils.runNpmInstall(config, options);
 
   console.log(chalk.white.bold('To run your new windows app:'));
-  console.log(chalk.white('   npx react-native run-windows'));
+  console.log(chalk.white('   npx @react-native-community/cli run-windows'));
 }
 
 module.exports = {

package/templates/cpp-app/windows/MyApp/AutolinkedNativeModules.g.cpp

@@ -1,4 +1,4 @@
-// AutolinkedNativeModules.g.cpp contents generated by "react-native autolink-windows"
+// AutolinkedNativeModules.g.cpp contents generated by "npx @react-native-community/cli autolink-windows"
 // clang-format off
 #include "pch.h"
 #include "AutolinkedNativeModules.g.h"{{ &autolinkCppIncludes }}

package/templates/cpp-app/windows/MyApp/AutolinkedNativeModules.g.h

@@ -1,4 +1,4 @@
-// AutolinkedNativeModules.g.h contents generated by "react-native autolink-windows"
+// AutolinkedNativeModules.g.h contents generated by "npx @react-native-community/cli autolink-windows"
 // clang-format off
 #pragma once
 

package/templates/cpp-app/windows/MyApp/MyApp.cpp

@@ -35,6 +35,7 @@ void UpdateRootViewSizeToAppWindow(
   if (window.Presenter().as<winrt::Microsoft::UI::Windowing::OverlappedPresenter>().State() !=
       winrt::Microsoft::UI::Windowing::OverlappedPresenterState::Minimized) {
     winrt::Microsoft::ReactNative::LayoutConstraints constraints;
+    constraints.LayoutDirection = winrt::Microsoft::ReactNative::LayoutDirection::Undefined;
     constraints.MaximumSize = constraints.MinimumSize = size;
     rootView.Arrange(constraints, {0,0});
   }
@@ -132,6 +133,7 @@ _Use_decl_annotations_ int CALLBACK WinMain(HINSTANCE instance, HINSTANCE, PSTR
         // state
         auto async = host.UnloadInstance();
         async.Completed([host](auto asyncInfo, winrt::Windows::Foundation::AsyncStatus asyncStatus) {
+          asyncStatus;
           assert(asyncStatus == winrt::Windows::Foundation::AsyncStatus::Completed);
           host.InstanceSettings().UIDispatcher().Post([]() { PostQuitMessage(0); });
         });

package/templates/cpp-app/windows/MyApp/MyApp.vcxproj

@@ -71,7 +71,7 @@
       <PrecompiledHeader>Use</PrecompiledHeader>
       <PrecompiledHeaderFile>pch.h</PrecompiledHeaderFile>
       <PrecompiledHeaderOutputFile>$(IntDir)pch.pch</PrecompiledHeaderOutputFile>
-      <WarningLevel>Level3</WarningLevel>
+      <WarningLevel>Level4</WarningLevel>
       <SDLCheck>true</SDLCheck>
       <AdditionalOptions>%(AdditionalOptions) /bigobj</AdditionalOptions>
       <DisableSpecificWarnings>4453;28204</DisableSpecificWarnings>

package/templates/cpp-lib/example/metro.config.js

@@ -38,11 +38,11 @@ const config = {
         (m) =>
           new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
       ).concat([
-        // This stops "react-native run-windows" from causing the metro server to crash if its already running
+        // This stops "npx @react-native-community/cli run-windows" from causing the metro server to crash if its already running
         new RegExp(
           `${path.resolve(__dirname, 'windows').replace(/[/\\]/g, '/')}.*`,
         ),
-        // This prevents "react-native run-windows" from hitting: EBUSY: resource busy or locked, open msbuild.ProjectImports.zip or other files produced by msbuild
+        // This prevents "npx @react-native-community/cli run-windows" from hitting: EBUSY: resource busy or locked, open msbuild.ProjectImports.zip or other files produced by msbuild
         new RegExp(`${rnwPath}/build/.*`),
         new RegExp(`${rnwPath}/target/.*`),
         /.*\.ProjectImports\.zip/,

package/templates/cpp-lib/template.config.js

@@ -6,10 +6,10 @@
  * @format
  */
 
+const crypto = require('crypto');
 const existsSync = require('fs').existsSync;
 const path = require('path');
 const username = require('username');
-const uuid = require('uuid');
 const util = require('util');
 
 const glob = util.promisify(require('glob'));
@@ -87,7 +87,7 @@ async function getFileMappings(config = {}, options = {}) {
   const projectGuid =
     libConfig?.project?.windows?.projects[0]?.projectGuid
       ?.replace('{', '')
-      .replace('}', '') ?? uuid.v4();
+      .replace('}', '') ?? crypto.randomUUID();
   const currentUser = username.sync(); // Gets the current username depending on the platform.
 
   const cppNugetPackages = [];
@@ -210,7 +210,7 @@ async function postInstall(config = {}, options = {}) {
     // Update example package.json with new scripts and dependencies
     await templateUtils.updateProjectPackageJson(exConfig, exOptions, {
       scripts: {
-        windows: 'react-native run-windows',
+        windows: 'npx @react-native-community/cli run-windows',
         'test:windows': 'jest --config jest.config.windows.js',
       },
       dependencies: {

package/templates/cpp-lib/windows/MyLib/MyLib.h

@@ -3,10 +3,10 @@
 #include "pch.h"
 #include "resource.h"
 
-#if __has_include("codegen\Native{{ pascalName }}DataTypes.g.h")
-  #include "codegen\Native{{ pascalName }}DataTypes.g.h"
+#if __has_include("codegen/Native{{ pascalName }}DataTypes.g.h")
+  #include "codegen/Native{{ pascalName }}DataTypes.g.h"
 #endif
-#include "codegen\Native{{ pascalName }}Spec.g.h"
+#include "codegen/Native{{ pascalName }}Spec.g.h"
 
 #include "NativeModules.h"
 

package/templates/cpp-lib/windows/MyLib/MyLib.vcxproj

@@ -73,7 +73,7 @@
       <PrecompiledHeader>Use</PrecompiledHeader>
       <PrecompiledHeaderFile>pch.h</PrecompiledHeaderFile>
       <PrecompiledHeaderOutputFile>$(IntDir)pch.pch</PrecompiledHeaderOutputFile>
-      <WarningLevel>Level3</WarningLevel>
+      <WarningLevel>Level4</WarningLevel>
       <SDLCheck>true</SDLCheck>
       <AdditionalOptions>%(AdditionalOptions) /bigobj</AdditionalOptions>
       <DisableSpecificWarnings>4453;28204</DisableSpecificWarnings>

package/types/experimental.d.ts

@@ -32,7 +32,13 @@
  * Either the import or the reference only needs to appear once, anywhere in the project.
  */
 
-import {DimensionValue} from 'react-native/Libraries/StyleSheet/StyleSheetTypes';
+import {
+  GradientValue,
+  BlendMode,
+  BoxShadowPrimitive,
+  DimensionValue,
+  FilterFunction,
+} from 'react-native/Libraries/StyleSheet/StyleSheetTypes';
 
 export {};
 
@@ -142,4 +148,17 @@ declare module '.' {
      */
     experimental_layoutConformance?: 'strict' | 'classic' | undefined;
   }
+
+  export interface ViewStyle {
+    experimental_boxShadow?:
+      | ReadonlyArray<BoxShadowPrimitive>
+      | string
+      | undefined;
+    experimental_filter?: ReadonlyArray<FilterFunction> | string | undefined;
+    experimental_mixBlendMode?: BlendMode | undefined;
+    experimental_backgroundImage?:
+      | ReadonlyArray<GradientValue>
+      | string
+      | undefined;
+  }
 }