@react-native-oh/react-native-harmony 0.72.13-lazy-2 → 0.72.17

package/Libraries/ReactNative/UIManager.harmony.js

@@ -0,0 +1,210 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+// RNOH patch: imports
+import type {RootTag} from 'react-native/Libraries/Types/RootTagTypes';
+import type {Spec} from 'react-native/Libraries/ReactNative/NativeUIManager';
+
+import {getFabricUIManager} from 'react-native/Libraries/ReactNative/FabricUIManager';
+import nullthrows from 'nullthrows';
+
+export interface UIManagerJSInterface extends Spec {
+  +getViewManagerConfig: (viewManagerName: string) => Object;
+  +hasViewManagerConfig: (viewManagerName: string) => boolean;
+  +createView: (
+    reactTag: ?number,
+    viewName: string,
+    rootTag: RootTag,
+    props: Object,
+  ) => void;
+  +updateView: (reactTag: number, viewName: string, props: Object) => void;
+  +manageChildren: (
+    containerTag: ?number,
+    moveFromIndices: Array<number>,
+    moveToIndices: Array<number>,
+    addChildReactTags: Array<number>,
+    addAtIndices: Array<number>,
+    removeAtIndices: Array<number>,
+  ) => void;
+}
+
+function isFabricReactTag(reactTag: number): boolean {
+  // React reserves even numbers for Fabric.
+  return reactTag % 2 === 0;
+}
+
+// RNOH patch: always export BridgelessUIManager properties
+const BridgelessUIManager: UIManagerJSInterface = require('react-native/Libraries/ReactNative/BridgelessUIManager')
+const PaperUIManager: UIManagerJSInterface = 
+    global.RN$Bridgeless === true
+    ? {}
+    : require('react-native/Libraries/ReactNative/PaperUIManager');
+
+// $FlowFixMe[cannot-spread-interface]
+const UIManager = {
+  ...BridgelessUIManager,
+  ...PaperUIManager,
+  measure(
+    reactTag: number,
+    callback: (
+      left: number,
+      top: number,
+      width: number,
+      height: number,
+      pageX: number,
+      pageY: number,
+    ) => void,
+  ): void {
+    if (isFabricReactTag(reactTag)) {
+      const FabricUIManager = nullthrows(getFabricUIManager());
+      const shadowNode =
+        FabricUIManager.findShadowNodeByTag_DEPRECATED(reactTag);
+      if (shadowNode) {
+        FabricUIManager.measure(shadowNode, callback);
+      } else {
+        console.warn(`measure cannot find view with tag #${reactTag}`);
+        // $FlowFixMe[incompatible-call]
+        callback();
+      }
+    } else {
+      // Paper
+      UIManagerImpl.measure(reactTag, callback);
+    }
+  },
+
+  measureInWindow(
+    reactTag: number,
+    callback: (
+      left: number,
+      top: number,
+      width: number,
+      height: number,
+    ) => void,
+  ): void {
+    if (isFabricReactTag(reactTag)) {
+      const FabricUIManager = nullthrows(getFabricUIManager());
+      const shadowNode =
+        FabricUIManager.findShadowNodeByTag_DEPRECATED(reactTag);
+      if (shadowNode) {
+        FabricUIManager.measureInWindow(shadowNode, callback);
+      } else {
+        console.warn(`measure cannot find view with tag #${reactTag}`);
+        // $FlowFixMe[incompatible-call]
+        callback();
+      }
+    } else {
+      // Paper
+      UIManagerImpl.measureInWindow(reactTag, callback);
+    }
+  },
+
+  measureLayout(
+    reactTag: number,
+    ancestorReactTag: number,
+    errorCallback: (error: Object) => void,
+    callback: (
+      left: number,
+      top: number,
+      width: number,
+      height: number,
+    ) => void,
+  ): void {
+    if (isFabricReactTag(reactTag)) {
+      const FabricUIManager = nullthrows(getFabricUIManager());
+      const shadowNode =
+        FabricUIManager.findShadowNodeByTag_DEPRECATED(reactTag);
+      const ancestorShadowNode =
+        FabricUIManager.findShadowNodeByTag_DEPRECATED(ancestorReactTag);
+
+      if (!shadowNode || !ancestorShadowNode) {
+        return;
+      }
+
+      FabricUIManager.measureLayout(
+        shadowNode,
+        ancestorShadowNode,
+        errorCallback,
+        callback,
+      );
+    } else {
+      // Paper
+      UIManagerImpl.measureLayout(
+        reactTag,
+        ancestorReactTag,
+        errorCallback,
+        callback,
+      );
+    }
+  },
+
+  measureLayoutRelativeToParent(
+    reactTag: number,
+    errorCallback: (error: Object) => void,
+    callback: (
+      left: number,
+      top: number,
+      width: number,
+      height: number,
+    ) => void,
+  ): void {
+    if (isFabricReactTag(reactTag)) {
+      console.warn(
+        'RCTUIManager.measureLayoutRelativeToParent method is deprecated and it will not be implemented in newer versions of RN (Fabric) - T47686450',
+      );
+      const FabricUIManager = nullthrows(getFabricUIManager());
+      const shadowNode =
+        FabricUIManager.findShadowNodeByTag_DEPRECATED(reactTag);
+      if (shadowNode) {
+        FabricUIManager.measure(
+          shadowNode,
+          (left, top, width, height, pageX, pageY) => {
+            callback(left, top, width, height);
+          },
+        );
+      }
+    } else {
+      // Paper
+      UIManagerImpl.measureLayoutRelativeToParent(
+        reactTag,
+        errorCallback,
+        callback,
+      );
+    }
+  },
+
+  dispatchViewManagerCommand(
+    reactTag: number,
+    commandName: number | string,
+    commandArgs: any[],
+  ) {
+    if (isFabricReactTag(reactTag)) {
+      const FabricUIManager = nullthrows(getFabricUIManager());
+      const shadowNode =
+        FabricUIManager.findShadowNodeByTag_DEPRECATED(reactTag);
+      if (shadowNode) {
+        // Transform the accidental CommandID into a CommandName which is the stringified number.
+        // The interop layer knows how to convert this number into the right method name.
+        // Stringify a string is a no-op, so it's safe.
+        commandName = `${commandName}`;
+        FabricUIManager.dispatchCommand(shadowNode, commandName, commandArgs);
+      }
+    } else {
+      UIManagerImpl.dispatchViewManagerCommand(
+        reactTag,
+        // We have some legacy components that are actually already using strings. ¯\_(ツ)_/¯
+        // $FlowFixMe[incompatible-call]
+        commandName,
+        commandArgs,
+      );
+    }
+  },
+};
+
+module.exports = UIManager;

package/Libraries/StyleSheet/NativePlatformColor.ts

@@ -0,0 +1,8 @@
+import { TurboModule, TurboModuleRegistry } from "react-native";
+
+interface Spec extends TurboModule {
+  getSystemColor: () => string | null;
+}
+
+export const NativePlatformColor =
+  TurboModuleRegistry.getEnforcing<Spec>("PlatformColor");

package/Libraries/StyleSheet/PlatformColorValueTypes.harmony.ts

@@ -0,0 +1,14 @@
+import { NativePlatformColor } from "./NativePlatformColor";
+
+export const PlatformColor = (...colors: string[]) => {
+  const color = NativePlatformColor.getSystemColor(colors);
+  return color;
+};
+
+export const normalizeColorObject = (color: string) => {
+  return color;
+};
+
+export const processColorObject = (color: string) => {
+  return color;
+};

package/Libraries/Vibration/Vibration.harmony.js

@@ -0,0 +1,88 @@
+// This implementation is based on iOS logic from file - react-native/Libraries/Vibration/Vibration.js
+import NativeVibration from 'react-native/Libraries/Vibration/NativeVibration'; // RNOH: patch
+
+/**
+ * Vibration API
+ *
+ * See https://reactnative.dev/docs/vibration
+ */
+
+let _vibrating: boolean = false;
+let _id: number = 0; // _id is necessary to prevent race condition.
+const _default_vibration_length = 400;
+
+
+function vibrateByPattern(pattern: Array<number>, repeat: boolean = false) {
+  if (_vibrating) {
+    return;
+  }
+  _vibrating = true;
+  if (pattern.length === 0) {
+    _vibrating = false;
+    return;
+  }
+  vibrateScheduler(++_id, pattern, repeat, 0);
+}
+
+function vibrateScheduler(
+  id: number,
+  pattern: Array<number>,
+  repeat: boolean,
+  nextIndex: number,
+  shouldVibrate: boolean = false, // first value in pattern is delay
+) {
+  if (!_vibrating || id !== _id) {
+    return;
+  }
+  if (shouldVibrate && nextIndex < pattern.length) {
+    NativeVibration.vibrate(pattern[nextIndex]);
+  }
+  if (nextIndex >= pattern.length) {
+    if (repeat) {
+      // $FlowFixMe[reassign-const]
+      nextIndex = 0;
+      shouldVibrate = true;
+    } else {
+      _vibrating = false;
+      return;
+    }
+  }
+  setTimeout(
+    () => vibrateScheduler(id, pattern, repeat, nextIndex + 1, !shouldVibrate),
+    pattern[nextIndex],
+  );
+}
+
+const Vibration = {
+  /**
+   * Trigger a vibration with specified `pattern`.
+   *
+   * See https://reactnative.dev/docs/vibration#vibrate
+   */
+  vibrate: function (
+    pattern: number | Array<number> = _default_vibration_length,
+    repeat: boolean = false,
+  ) {
+    if (_vibrating) {
+      return;
+    }
+    if (typeof pattern === 'number') {
+      NativeVibration.vibrate(pattern);
+    } else if (Array.isArray(pattern)) {
+      vibrateByPattern(pattern, repeat);
+    } else {
+      throw new Error('Vibration pattern should be a number or array');
+    }
+  },
+  /**
+   * Stop vibration
+   *
+   * See https://reactnative.dev/docs/vibration#cancel
+   */
+  cancel: function () {
+    _vibrating = false;
+    NativeVibration.cancel();
+  },
+};
+
+module.exports = Vibration;

package/index.js

@@ -1,4 +1,8 @@
 module.exports = {
+  get AccessibilityInfo() {
+    return require('./Libraries/Components/AccessibilityInfo/AccessibilityInfo')
+      .default;
+  },
   get ActivityIndicator() {
     return require('react-native/Libraries/Components/ActivityIndicator/ActivityIndicator')
       .default;
@@ -24,6 +28,9 @@ module.exports = {
   get Button() {
     return require('./Libraries/Components/Button/Button');
   },
+  get DevSettings() {
+    return require('react-native/Libraries/Utilities/DevSettings');
+  },
   get Dimensions() {
     return require('react-native/Libraries/Utilities/Dimensions').default;
   },
@@ -82,6 +89,10 @@ module.exports = {
   get Platform() {
     return require('./Libraries/Utilities/Platform');
   },
+  get PlatformColor() {
+    return require('./Libraries/StyleSheet/PlatformColorValueTypes')
+      .PlatformColor;
+  },
   get Pressable() {
     return require('react-native/Libraries/Components/Pressable/Pressable')
       .default;
@@ -99,6 +110,9 @@ module.exports = {
   get SafeAreaView() {
     return require('./Libraries/Components/SafeAreaView/SafeAreaView').default;
   },
+  get Share() {
+    return require('react-native/Libraries/Share/Share');
+  },
   get ScrollView() {
     return require('./Libraries/Components/ScrollView/ScrollView');
   },
@@ -117,6 +131,9 @@ module.exports = {
   get TextInput() {
     return require('./Libraries/Components/TextInput/TextInput.harmony');
   },
+  get ToastAndroid() {
+    return require('react-native/Libraries/Components/ToastAndroid/ToastAndroid.android');
+  },
   get Touchable() {
     return require('react-native/Libraries/Components/Touchable/Touchable');
   },
@@ -136,7 +153,7 @@ module.exports = {
     return require('react-native/Libraries/TurboModule/TurboModuleRegistry');
   },
   get UIManager() {
-    return require('react-native/Libraries/ReactNative/UIManager');
+    return require('./Libraries/ReactNative/UIManager');
   },
   get useAnimatedValue() {
     return require('react-native/Libraries/Animated/useAnimatedValue').default;
@@ -164,7 +181,7 @@ module.exports = {
     return require('react-native/Libraries/Lists/SectionList').default;
   },
   get Vibration() {
-    return require('react-native/Libraries/Vibration/Vibration');
+    return require('./Libraries/Vibration/Vibration');
   },
   get VirtualizedList() {
     return require('react-native/Libraries/Lists/VirtualizedList');

package/jest.config.js

@@ -0,0 +1,6 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  rootDir: "./tests/"
+};

package/metro.config.js

@@ -38,8 +38,8 @@ function createHarmonyMetroConfig(options) {
           if (shouldPrintInfoAboutRNRedirection) {
             info(
               `Redirected imports from ${colors.bold(
-                colors.gray('react-native'),
-              )} to ${colors.bold(reactNativeHarmonyName)}`,
+                colors.gray('react-native')
+              )} to ${colors.bold(reactNativeHarmonyName)}`
             );
             shouldPrintInfoAboutRNRedirection = false;
           }
@@ -53,20 +53,56 @@ function createHarmonyMetroConfig(options) {
             if (moduleName.startsWith('.')) {
               const moduleAbsPath = pathUtils.resolve(
                 pathUtils.dirname(ctx.originModulePath),
-                moduleName,
+                moduleName
               );
               const [_, modulePathRelativeToReactNative] = moduleAbsPath.split(
-                `${pathUtils.sep}node_modules${pathUtils.sep}react-native${pathUtils.sep}`,
+                `${pathUtils.sep}node_modules${pathUtils.sep}react-native${pathUtils.sep}`
               );
               try {
                 return ctx.resolveRequest(
                   ctx,
                   `${reactNativeHarmonyName}${pathUtils.sep}${modulePathRelativeToReactNative}`,
-                  'harmony',
+                  'harmony'
                 );
               } catch (err) {}
             }
             return ctx.resolveRequest(ctx, moduleName, 'ios');
+          } else if(isHarmonyPackageInternalImport(ctx.originModulePath, moduleName)) {
+            /**
+             * Replace internal imports in `react-native-foo` with equivalent files from `react-native-harmony-foo` 
+             * if a package has internal import redirection enabled in its package.json configuration e.g.
+             *
+             * react-native-harmony-foo/package.json:
+             *  "harmony": {
+             *     "alias": "react-native-foo"
+             *     "redirectInternalImports": true,
+             *  }
+             */
+            const alias = getPackageNameFromOriginModulePath(ctx.originModulePath);
+            if (alias) {
+              const harmonyPackage = getHarmonyPackageByAliasMap(".");
+              const harmonyPackageName = harmonyPackage[alias]?.name;
+              const redirectInternalImports = harmonyPackage[alias]?.redirectInternalImports;
+              if (harmonyPackageName && !isRequestFromHarmonyPackage(ctx.originModulePath, harmonyPackageName) && redirectInternalImports) {
+                const moduleAbsPath = pathUtils.resolve(
+                  pathUtils.dirname(ctx.originModulePath),
+                  moduleName,
+                );
+                const [_, modulePathRelativeToOriginalPackage] = moduleAbsPath.split(
+                  `${pathUtils.sep}node_modules${pathUtils.sep}${alias}${pathUtils.sep}`,
+                );
+                const backslashes = new RegExp('\\\\', 'g');
+                const pathToHarmonyModule = `${harmonyPackageName}/${modulePathRelativeToOriginalPackage.replace(backslashes, "/")}`;
+                try {
+                  return ctx.resolveRequest(
+                    ctx,
+                    pathToHarmonyModule,
+                    'harmony',
+                  );
+                } catch (err) {
+                }
+              }
+            }
           } else {
             /**
              * Replace `react-native-foo` with `react-native-harmony-foo` if a package has harmony directory and proper package.json configuration e.g.
@@ -76,21 +112,21 @@ function createHarmonyMetroConfig(options) {
              *     "alias": "react-native-foo"
              *  }
              */
-            const harmonyPackageNameByAlias = getHarmonyPackageNameByAlias('.');
+            const harmonyPackageByAlias = getHarmonyPackageByAliasMap(".");
             const alias = getPackageName(moduleName);
             if (alias) {
-              const harmonyPackageName = harmonyPackageNameByAlias[alias];
+              const harmonyPackageName = harmonyPackageByAlias[alias]?.name;
               if (
                 harmonyPackageName &&
                 !isRequestFromHarmonyPackage(
                   ctx.originModulePath,
-                  harmonyPackageName,
+                  harmonyPackageName
                 )
               ) {
                 return ctx.resolveRequest(
                   ctx,
                   moduleName.replace(alias, harmonyPackageName),
-                  platform,
+                  platform
                 );
               }
             }
@@ -128,13 +164,56 @@ function getPackageName(moduleName) {
   }
 }
 
+/**
+ * @param originModulePath {string}
+ * @returns {string}
+ */
+function getPackageNameFromOriginModulePath(originModulePath) {
+  const nodeModulesPosition = originModulePath.search("node_modules");
+  const pathRelativeToNodeModules = originModulePath.substring(nodeModulesPosition);
+  const pathSegments = pathRelativeToNodeModules.split(pathUtils.sep);
+  const module = pathSegments[1];
+  if (module.startsWith('@')) {
+    return `${pathSegments[1]}/${pathSegments[2]}`;
+  }
+  else {
+    return pathSegments[1];
+  }
+}
+
+/**
+ * @param originModulePath {string}
+ * @param moduleName {string}
+ * @returns {boolean}
+ */
+function isHarmonyPackageInternalImport(originModulePath, moduleName) {
+  if (moduleName.startsWith(".")) {
+    const alias = getPackageNameFromOriginModulePath(originModulePath);
+    const slashes = new RegExp('/', 'g');
+    if (alias && originModulePath.includes(`${pathUtils.sep}node_modules${pathUtils.sep}${alias.replace(slashes, pathUtils.sep)}${pathUtils.sep}`)) {
+      const harmonyPackage = getHarmonyPackageByAliasMap(".");
+      const harmonyPackageName = harmonyPackage[alias]?.name;
+      if (
+        harmonyPackageName &&
+        !isRequestFromHarmonyPackage(
+          originModulePath,
+          harmonyPackageName,
+        )
+      ) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
 /**
  * @param originModulePath {string}
  * @returns {boolean}
  */
 function isInternalReactNativeRelativeImport(originModulePath) {
   return originModulePath.includes(
-    `${pathUtils.sep}node_modules${pathUtils.sep}react-native${pathUtils.sep}`,
+    `${pathUtils.sep}node_modules${pathUtils.sep}react-native${pathUtils.sep}`
   );
 }
 
@@ -147,27 +226,27 @@ function isRequestFromHarmonyPackage(originModulePath, harmonyPackageName) {
   const slashes = new RegExp('/', 'g');
   const packagePath = harmonyPackageName.replace(slashes, pathUtils.sep);
   return originModulePath.includes(
-    `${pathUtils.sep}node_modules${pathUtils.sep}${packagePath}${pathUtils.sep}`,
+    `${pathUtils.sep}node_modules${pathUtils.sep}${packagePath}${pathUtils.sep}`
   );
 }
 
 /**
- * @type {Record<string, string> | undefined}
+ * @type {Record<string, {name: string, redirectInternalImports: boolean}> | undefined}
  */
-let cachedHarmonyPackageAliasByName = undefined;
+let cachedHarmonyPackageByAliasMap = undefined;
 
 /**
  * @param projectRootPath {string}
  */
-function getHarmonyPackageNameByAlias(projectRootPath) {
+function getHarmonyPackageByAliasMap(projectRootPath) {
   /**
-   * @type {Record<string, string>}
+   * @type {Record<string, {name: string, redirectInternalImports: boolean}>}
    */
   const initialAcc = {};
-  if (cachedHarmonyPackageAliasByName) {
-    return cachedHarmonyPackageAliasByName;
+  if (cachedHarmonyPackageByAliasMap) {
+    return cachedHarmonyPackageByAliasMap;
   }
-  cachedHarmonyPackageAliasByName = findHarmonyNodeModulePaths(
+  cachedHarmonyPackageByAliasMap = findHarmonyNodeModulePaths(
     findHarmonyNodeModuleSearchPaths(projectRootPath),
   ).reduce((acc, harmonyNodeModulePath) => {
     const harmonyNodeModulePathSegments = harmonyNodeModulePath.split(
@@ -185,13 +264,17 @@ function getHarmonyPackageNameByAlias(projectRootPath) {
     const packageJSONPath = `${harmonyNodeModulePath}${pathUtils.sep}package.json`;
     const packageJSON = readHarmonyModulePackageJSON(packageJSONPath);
     const alias = packageJSON.harmony?.alias;
+    const redirectInternalImports = packageJSON?.harmony?.redirectInternalImports ?? false;
     if (alias) {
-      acc[alias] = harmonyNodeModuleName;
+      acc[alias] ={
+        name: harmonyNodeModuleName,
+        redirectInternalImports: redirectInternalImports
+      }
     }
     return acc;
   }, initialAcc);
   const harmonyPackagesCount = Object.keys(
-    cachedHarmonyPackageAliasByName,
+    cachedHarmonyPackageByAliasMap,
   ).length;
   if (harmonyPackagesCount > 0) {
     const prettyHarmonyPackagesCount = colors.bold(
@@ -203,8 +286,8 @@ function getHarmonyPackageNameByAlias(projectRootPath) {
       `Redirected imports to ${prettyHarmonyPackagesCount} harmony-specific third-party package(s):`,
     );
     if (harmonyPackagesCount > 0) {
-      Object.entries(cachedHarmonyPackageAliasByName).forEach(
-        ([original, alias]) => {
+      Object.entries(cachedHarmonyPackageByAliasMap).forEach(
+        ([original, {name: alias}]) => {
           info(
             `• ${colors.bold(colors.gray(original))} → ${colors.bold(alias)}`,
           );
@@ -215,8 +298,7 @@ function getHarmonyPackageNameByAlias(projectRootPath) {
     info('No harmony-specific third-party packages have been detected');
   }
   console.log('');
-
-  return cachedHarmonyPackageAliasByName;
+  return cachedHarmonyPackageByAliasMap;
 }
 
 /**
@@ -227,8 +309,8 @@ function findHarmonyNodeModuleSearchPaths(projectRootPath) {
   const nodeModulesPath = `${projectRootPath}${pathUtils.sep}node_modules`;
   const searchPaths = fs
     .readdirSync(nodeModulesPath)
-    .filter(dirName => dirName.startsWith('@'))
-    .map(dirName => `${nodeModulesPath}${pathUtils.sep}${dirName}`);
+    .filter((dirName) => dirName.startsWith('@'))
+    .map((dirName) => `${nodeModulesPath}${pathUtils.sep}${dirName}`);
   searchPaths.push(nodeModulesPath);
   return searchPaths;
 }
@@ -239,11 +321,11 @@ function findHarmonyNodeModuleSearchPaths(projectRootPath) {
  */
 function findHarmonyNodeModulePaths(searchPaths) {
   return searchPaths
-    .map(searchPath => {
+    .map((searchPath) => {
       return fs
         .readdirSync(searchPath)
-        .map(dirName => `${searchPath}${pathUtils.sep}${dirName}`)
-        .filter(hasNodeModulePathHarmonyCode);
+        .map((dirName) => `${searchPath}${pathUtils.sep}${dirName}`)
+        .filter(hasPackageJSON);
     })
     .flat();
 }
@@ -252,18 +334,15 @@ function findHarmonyNodeModulePaths(searchPaths) {
  * @param nodeModulePath {string}
  * @returns {boolean}
  */
-function hasNodeModulePathHarmonyCode(nodeModulePath) {
+function hasPackageJSON(nodeModulePath) {
   if (!fs.lstatSync(nodeModulePath).isDirectory()) return false;
   const nodeModuleContentNames = fs.readdirSync(nodeModulePath);
-  return (
-    nodeModuleContentNames.includes('harmony') ||
-    nodeModuleContentNames.includes('harmony.tar.gz')
-  );
+  return nodeModuleContentNames.includes('package.json');
 }
 
 /**
  * @param packageJSONPath {string}
- * @returns {{name: string, harmony?: {alias?: string}}}
+ * @returns {{name: string, harmony?: {alias?: string, redirectInternalImports?: boolean}}}
  */
 function readHarmonyModulePackageJSON(packageJSONPath) {
   return JSON.parse(fs.readFileSync(packageJSONPath).toString());