@react-native-oh/react-native-harmony 0.61.16

package/Libraries/StyleSheet/EdgeInsetsPropType.js

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2025 Huawei Technologies Co., Ltd.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+/**
+ * Deep-import alias for RN 0.61 compatibility
+ * Returns empty object as a no-op replacement for legacy PropTypes maps
+ */
+
+module.exports = {};
+module.exports.default = module.exports;

package/Libraries/StyleSheet/PointPropType.js

@@ -0,0 +1,15 @@
+/**
+ * Copyright (c) 2025 Huawei Technologies Co., Ltd.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+/**
+ * Deep-import alias for RN 0.61 compatibility
+ * Returns empty object as a no-op replacement for legacy PropTypes maps
+ */
+
+module.exports = {};
+module.exports.default = module.exports;

package/Libraries/Utilities/Platform.harmony.ts

@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2024 Huawei Technologies Co., Ltd.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { NativePlatformConstantsHarmony } from '@react-native-oh/react-native-harmony/Libraries/Utilities/NativePlatformConstantsHarmony.harmony';
+import type {
+  PlatformHarmonyStatic,
+  PlatformHarmonyConstants,
+  PlatformOSType,
+} from '@react-native-oh/react-native-harmony/Libraries/Utilities/Platform';
+
+module.exports = {
+  _constants: undefined,
+  OS: 'harmony',
+
+  get constants() {
+    if (this._constants == null) {
+      const customOverrides = {
+        reactNativeVersion:  {"major": 0, "minor": 61, "patch": 5}
+      };
+      this._constants = new Proxy(NativePlatformConstantsHarmony.getConstants(), {
+        get(target, property) {
+          if (property in customOverrides) {
+            return customOverrides[property];
+          }
+          return target[property];
+        }
+      });
+    }
+    return this._constants!;
+  },
+
+  get Version() {
+    return this.constants.osFullName;
+  },
+
+  get isPad() {
+    return this.constants.deviceType === 'tablet';
+  },
+
+  get isTV() {
+    return this.constants.deviceType === 'tv';
+  },
+
+  get isTesting() {
+    if (__DEV__) {
+      return this.constants.isTesting;
+    }
+    return false;
+  },
+
+  select<T>(
+    spec:
+      | ({ [platform in PlatformOSType]?: T } & { default: T })
+      | { [platform in PlatformOSType]: T }
+  ) {
+    return 'harmony' in spec
+      ? spec.harmony
+      : 'native' in spec
+        ? spec.native
+        : spec.default;
+  },
+} satisfies PlatformHarmonyStatic & {
+  _constants: undefined | PlatformHarmonyConstants;
+};

package/Libraries/Utilities/setAndForwardRef.js

@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ * @flow
+ */
+
+'use strict';
+
+import type {ElementRef, Ref} from 'react';
+
+type Args = $ReadOnly<{|
+  getForwardedRef: () => ?Ref<any>,
+  setLocalRef: (ref: ElementRef<any>) => mixed,
+|}>;
+
+/**
+ * This is a helper function for when a component needs to be able to forward a ref
+ * to a child component, but still needs to have access to that component as part of
+ * its implementation.
+ *
+ * Its main use case is in wrappers for native components.
+ *
+ * Usage:
+ *
+ *   class MyView extends React.Component {
+ *     _nativeRef = null;
+ *
+ *     _setNativeRef = setAndForwardRef({
+ *       getForwardedRef: () => this.props.forwardedRef,
+ *       setLocalRef: ref => {
+ *         this._nativeRef = ref;
+ *       },
+ *     });
+ *
+ *     render() {
+ *       return <View ref={this._setNativeRef} />;
+ *     }
+ *   }
+ *
+ *   const MyViewWithRef = React.forwardRef((props, ref) => (
+ *     <MyView {...props} forwardedRef={ref} />
+ *   ));
+ *
+ *   module.exports = MyViewWithRef;
+ */
+
+function setAndForwardRef({
+  getForwardedRef,
+  setLocalRef,
+}: Args): (ref: ElementRef<any>) => void {
+  return function forwardRef(ref: ElementRef<any>) {
+    const forwardedRef = getForwardedRef();
+
+    setLocalRef(ref);
+
+    // Forward to user ref prop (if one has been specified)
+    if (typeof forwardedRef === 'function') {
+      // Handle function-based refs. String-based refs are handled as functions.
+      forwardedRef(ref);
+    } else if (typeof forwardedRef === 'object' && forwardedRef != null) {
+      // Handle createRef-based refs
+      forwardedRef.current = ref;
+    }
+  };
+}
+
+module.exports = setAndForwardRef;

package/README.dev.md

@@ -0,0 +1,55 @@
+This document is a concise guide for developers contributing to @react-native-oh/react-native-harmony-61-interop.
+
+### Create a component wrapper
+1) Mirror the path of the target component from `react-native-harmony`:
+```
+packages/react-native-harmony-61-interop/Libraries/Components/View/View.js
+```
+2) Implement the wrapper and forward refs/props to the underlying `react-native-harmony` component:
+```js
+/**
+ * [INTEROP-WRAPPER]
+ * Wraps Harmony View to adapt RN 0.61 semantics.
+ */
+import React from 'react';
+import RNOHView from '@react-native-oh/react-native-harmony/Libraries/Components/View/View';
+
+const View = React.forwardRef(function ViewWrapper({ newProp, style, ...props }, ref) {
+  const patchedStyle = newProp === 'active'
+    ? [{ borderColor: 'red', borderWidth: 2, backgroundColor: 'gray' }, style]
+    : style;
+  return <RNOHView ref={ref} {...props} style={patchedStyle} />;
+});
+
+export default View;
+```
+3. Update `packages/react-native-harmony-61-interop/index.js` and provide a path to the wrapper component:
+```js
+ get View() {
+    return require('./Libraries/Components/View/View').default;
+  },
+```
+
+### Patch an internal JS module
+1) Mirror the original relative path:
+```
+packages/react-native-harmony-61-interop/Libraries/Image/ImageSourceUtils.js
+```
+2) Import from `react-native-harmony` and re-export with your modifications:
+```js
+/**
+ * [INTEROP-PATCH]
+ * Patches `getImageSourcesFromImageProps` for RN 0.61 compatibility/logging.
+ */
+const RNOHImageSourceUtils = require('@react-native-oh/react-native-harmony/Libraries/Image/ImageSourceUtils');
+
+export function getImageSourcesFromImageProps(imageProps) {
+  console.log('[INTEROP-PATCH] getImageSourcesFromImageProps');
+  return RNOHImageSourceUtils.getImageSourcesFromImageProps(imageProps);
+}
+```
+
+### Notes:
+- Do not import from this interop package inside interop files; import only from `@react-native-oh/react-native-harmony/...` to avoid cycles.
+- Mirror the file layout of `@react-native-oh/react-native-harmony` under this package.
+- Wrappers import from `@react-native-oh/react-native-harmony` and re-export a compatible API for RN 0.61'.

package/README.md

@@ -0,0 +1,146 @@
+# @react-native-oh/react-native-harmony-61-interop
+
+This package is designed for React Native application developers maintaining a project that still uses React Native 0.61 or a similar version. @react-native-oh/react-native-harmony-61-interop restores the React Native 0.61 APIs on top of react-native-harmony (0.77).
+
+## Prerequisites
+
+This guide assumes the reader has prepared a React Native OpenHarmony (RNOH) development environment and has run their first RNOH app.
+
+The reader is also expected to identify external libraries used by their RN 61 project that support RNOH 0.77 and provide a compatible API. A list of libraries compatible with RNOH is available here: [RNOH libraries overview](https://gitcode.com/OpenHarmony-RN/usage-docs).
+
+
+## Project Structure
+
+You need to create a new NPM project for the RNOH project, because the peer dependencies of RN@77 conflict with those of RN@0.61. This can be achieved in two ways.
+
+### RNOH project next to the existing RN 61 project
+
+```
+.
+├── legacy-rn61-awesome-project/
+│   ├── android
+│   ├── ios
+│   ├── node_modules
+│   ├── src
+│   ├── index.js
+│   └── package.json
+└── RNOHAwesomeProject/
+    ├── harmony
+    ├── node_modules
+    ├── index.js
+    └── package.json
+```
+
+### RNOH project inside the RN 61 project
+
+```
+.
+└── legacy-rn61-awesome-project/
+    ├── android
+    ├── ios
+    ├── node_modules
+    ├── RNOHAwesomeProject/
+    │   ├── harmony
+    │   ├── node_modules
+    │   ├── index.js
+    │   └── package.json
+    ├── src
+    ├── index.js
+    └── package.json
+```
+
+## Getting Started
+Assumption: The RNOH project will be installed next to an existing RN 61 project.
+
+1. Open terminal and navigate to a directory where RNOHAwesomeProject should be created
+1. Initialize the RNOH project by running the following snippet (see the RNOH documentation for how to set up your environment)
+    ```
+      npx --yes @react-native-community/cli@latest init RNOHAwesomeProject --version 0.77.1 --skip-install &&
+      cd ./RNOHAwesomeProject &&
+      npm i @react-native-oh/react-native-harmony@0.77 @react-native-oh/react-native-harmony-cli@0.77 -D &&
+      npx react-native init-harmony --bundle-name com.rnoh.awesome_project
+    ```
+1. Inside "RNOHAwesomeProject" perform the following steps:
+   1. (Optional) Remove Android- and iOS-specific files from "RNOHAwesomeProject"
+
+   1. Install `@react-native-oh/react-native-harmony-61-interop`: <!-- Merge this step with step 2 before release -->
+        ```
+        npm i @react-native-oh/react-native-harmony-61-interop@0.77
+        ```
+
+   1. Modify `index.js` to use the code from the `legacy-rn61-awesome-project` project:
+        ```js
+        import '../legacy-rn61-awesome-project/index' // <= UPDATE ME
+        ```
+
+   1. Replace `metro.config.js` with the content below (update the directory name for your project) to use assets from `legacy-rn61-awesome-project` and `node_modules` from the RNOH project:
+        ```js
+        /**
+         * Copyright (c) 2025 Huawei Technologies Co., Ltd.
+        *
+        * This source code is licensed under the MIT license found in the
+        * LICENSE file in the root directory of this source tree.
+        */
+        const { mergeConfig, getDefaultConfig } = require('@react-native/metro-config');
+        const {
+          createHarmonyMetroConfig,
+        } = require('@react-native-oh/react-native-harmony/metro.config');
+        const pathUtils = require('node:path');
+
+        const rnoh61ProjectRoot = __dirname;
+
+        module.exports = mergeConfig(
+          getDefaultConfig(__dirname),
+          createHarmonyMetroConfig({
+            reactNativeHarmonyPackageName: '@react-native-oh/react-native-harmony',
+          }),
+          {
+            transformer: {
+              getTransformOptions: async () => ({
+                transform: {
+                  experimentalImportSupport: false,
+                  inlineRequires: true,
+                },
+              }),
+            },
+            watchFolders: [
+              /**
+             * RNOH_APP: By default, Metro doesn't see files above the project root.
+             * If you integrate the RNOH 61 Interop package, you may need to add this folder to your configuration.
+              */
+              pathUtils.resolve(__dirname, '..', 'legacy-rn61-awesome-project'), // <= UPDATE ME
+            ],
+            server: {
+              rewriteRequestUrl: (url) => {
+                /**
+                * RNOH_APP: This is needed to make images loaded from the Metro server work.
+                * Metro provides assets by listening on requests with the following format: `assets/<path-relative-to-project-root>`
+                * However, when assets are outside the project root, "assets/.." cancels out. Changing `projectRoot` in the Metro config also fixes this problem
+                * but introduces a different transpilation problem.
+                */
+                let newUrl = url.replace(
+                  'legacy-rn61-awesome-project', // <= UPDATE ME
+                  'assets/../legacy-rn61-awesome-project' // <= UPDATE ME
+                );
+                return newUrl;
+              },
+            },
+            resolver: {
+              nodeModulesPaths: [
+                /**
+                * RNOH_APP: This configuration tells Metro where RNOH 0.77 dependencies can be found.
+                */
+                pathUtils.resolve(rnoh61ProjectRoot, 'node_modules'),
+              ],
+              /**
+               * RNOH_APP: The `node_modules` from the legacy project must not be used. Without this configuration,
+               * Metro will use two different React instances, likely resulting in an "Invalid hook call" error.
+              */
+              blockList: [/legacy-rn61-awesome-project\/node_modules/], // <= UPDATE ME
+            },
+          }
+        );
+        ```
+   1. Install and link external libraries used in the RN 61 project that support RNOH and provide a compatible API.
+   1. Run the OpenHarmony project.
+   1. Sync the project twice (During the first sync, autolinking modifies oh-package.json. During the second sync, new dependencies are installed).

package/compat/ensurePropTypes.js

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) 2025 Huawei Technologies Co., Ltd.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+/**
+ * Interop-61: minimal shim restoring RN 0.61 .propTypes
+ *
+ * Context:
+ * - RN 0.61 exposed `.propTypes` on components (e.g. Text.propTypes.style)
+ * - RN 0.72+ removed `.propTypes` so accessing them can return undefined
+ *   or crash on Harmony 0.77+
+ *
+ * Strategy:
+ * - Attach stable no‑op .propTypes to components on demand, preserving referential equality
+ *   for shared keys (e.g. Text.propTypes.style === ViewPropTypes.style) so legacy checks pass
+ * - Keep the shim idempotent (multiple calls to ensurePropTypes do not overwrite)
+ * - Don't re-implement original runtime validation, the goal is to only satisfy production builds
+ *   and ensure no crashes when accessing .propTypes
+ * - Attach only 'style' propTypes for now, if other fields are needed, we can add them later
+ */
+
+const getNoopPropType = require('./getNoopPropType');
+
+function ensurePropTypes(target) {
+  if (!target) {
+    return target;
+  }
+
+  const base = target.propTypes || {};
+  if (!Object.prototype.hasOwnProperty.call(base, 'style')) {
+    const next = {...base, style: getNoopPropType('style')};
+    try {
+      target.propTypes = next;
+    } catch {
+      // Ignore if propTypes is read-only / not assignable
+    }
+  }
+  return target;
+}
+
+exports.ensurePropTypes = ensurePropTypes;

package/compat/getNoopPropType.js

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2025 Huawei Technologies Co., Ltd.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+'use strict';
+
+/**
+ * Interop-61: helper for creating no-op PropType functions
+ *
+ * Returns a singleton no-op PropType function with `.isRequired`,
+ * mimicking the shape of legacy PropTypes.
+ *
+ * Strategy:
+ * - Don't re-implement original dev-time PropTypes validation, the goal is to only satisfy
+ *   production builds and ensure no crashes when importing legacy PropTypes.
+ * - Each distinct `name` gets its own unique instance, so that
+ *   `ColorPropType !== EdgeInsetsPropType` (same behavior as RN 0.61).
+ * - Within the same `name`, all imports (top-level getter and deep-import) share
+ *   the exact same reference. This preserves referential equality checks such as:
+ *     require('react-native').ColorPropType
+ *       === require('react-native/Libraries/DeprecatedPropTypes/DeprecatedColorPropType')
+ */
+
+function createNoopPropType() {
+  const fn = () => null;
+  fn.isRequired = fn;
+  return fn;
+}
+
+const noopPropTypeByName = new Map();
+
+function getNoopPropType(name) {
+  if (!noopPropTypeByName.has(name)) {
+    noopPropTypeByName.set(name, createNoopPropType());
+  }
+  return noopPropTypeByName.get(name);
+}
+
+module.exports = getNoopPropType;
+module.exports.default = module.exports;

package/compat/restoreRemoveListener.js

@@ -0,0 +1,117 @@
+/**
+ * Copyright (c) 2025 Huawei Technologies Co., Ltd.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Polyfill helper that restores legacy listener-removal APIs that were removed
+ * in React Native >= 0.65. Older React Native 0.61 code expects methods like
+ *   `Module.removeEventListener(event, handler)` or
+ *   `Module.removeListener(event, handler)`.
+ *
+ * In modern React Native versions listeners should be removed by calling `remove()`
+ * on the subscription returned from `addEventListener` / `addListener`.
+ * This helper bridges the gap by:
+ *   1. Monkey-patching the original `add*` method so that it remembers the
+ *      subscription object returned for every `(eventType, listener)` pair.
+ *   2. Defining the legacy `remove*` method that looks up that subscription and
+ *      calls `remove()` on it.
+ *
+ * The patch is idempotent – calling it multiple times for the same module is
+ * safe.
+ *
+ * @param {object} target      The module object (e.g. AccessibilityInfo)
+ * @param {string} addName     Existing method name for adding listeners
+ *                             ("addEventListener" | "addListener")
+ * @param {string} removeName  Legacy method name to recreate
+ */
+function restoreRemoveListener(target, addName, removeName) {
+  if (!target || typeof target[addName] !== 'function') {
+    console.warn(`[restoreRemoveListener] Cannot patch. '${addName}' is missing on target`);
+    return;
+  }
+
+  // If legacy method already exists – do nothing.
+  if (typeof target[removeName] === 'function') {
+    return;
+  }
+
+  /** Map<eventType, Map<listener, Set<subscription>>> */
+  const subsByListenerByEventType = new Map();
+
+  // Patch add* so that we can later find the subscription.
+  const originalAdd = target[addName];
+  target[addName] = function patchedAdd(eventType, listener, ...rest) {
+    const subscription = originalAdd.call(this, eventType, listener, ...rest);
+    let subsByListener = subsByListenerByEventType.get(eventType);
+    if (!subsByListener) {
+      subsByListener = new Map();
+      subsByListenerByEventType.set(eventType, subsByListener);
+    }
+    let listenerSubs = subsByListener.get(listener);
+    if (!listenerSubs) {
+      listenerSubs = new Set();
+      subsByListener.set(listener, listenerSubs);
+    }
+    listenerSubs.add(subscription);
+    // Ensure cleanup also if consumer calls subscription.remove() directly.
+    if (subscription && typeof subscription.remove === 'function') {
+      const originalRemove = subscription.remove.bind(subscription);
+      subscription.remove = function patchedSubscriptionRemove(...args) {
+        try {
+          return originalRemove(...args);
+        } finally {
+          const subsByListener = subsByListenerByEventType.get(eventType);
+          if (subsByListener) {
+            const listenerSubs = subsByListener.get(listener);
+            if (listenerSubs) {
+              listenerSubs.delete(subscription);
+              if (listenerSubs.size === 0) {
+                subsByListener.delete(listener);
+              }
+            }
+            if (subsByListener.size === 0) {
+              subsByListenerByEventType.delete(eventType);
+            }
+          }
+        }
+      };
+    }
+    return subscription;
+  };
+
+  // Define legacy remove* API.
+  target[removeName] = function legacyRemove(eventType, listener) {
+    const subsByListener = subsByListenerByEventType.get(eventType);
+    const listenerSubs = subsByListener ? subsByListener.get(listener) : undefined;
+    if (listenerSubs && listenerSubs.size > 0) {
+      // Remove all subscriptions for this (eventType, listener)
+      for (const sub of Array.from(listenerSubs)) {
+        if (sub && typeof sub.remove === 'function') {
+          sub.remove();
+        }
+      }
+      subsByListener.delete(listener);
+      if (subsByListener.size === 0) {
+        subsByListenerByEventType.delete(eventType);
+      }
+    }
+  };
+
+  // Optional cleanup for removeAllListeners to avoid stale entries in our map
+  const hasRemoveAll = typeof target.removeAllListeners === 'function';
+  if (hasRemoveAll && !target.__rnohPatchedRemoveAll) {
+    const originalRemoveAll = target.removeAllListeners.bind(target);
+    target.removeAllListeners = function patchedRemoveAllListeners(eventType) {
+      const result = originalRemoveAll(eventType);
+      subsByListenerByEventType.delete(eventType);
+      return result;
+    };
+    // Mark as patched to keep idempotency
+    Object.defineProperty(target, '__rnohPatchedRemoveAll', {value: true});
+  }
+}
+
+module.exports = restoreRemoveListener;