@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.

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 [email protected]. 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
2. 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/[email protected] @react-native-oh/[email protected] -D &&
     npx react-native init-harmony --bundle-name com.rnoh.awesome_project

3. Inside "RNOHAwesomeProject" perform the following steps:

   1. (Optional) Remove Android- and iOS-specific files from "RNOHAwesomeProject"

   2. Install @react-native-oh/react-native-harmony-61-interop:

      npm i @react-native-oh/[email protected]

   3. Modify index.js to use the code from the legacy-rn61-awesome-project project:

      import '../legacy-rn61-awesome-project/index' // <= UPDATE ME

   4. 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:

      /**
       * 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
          },
        }
      );

   5. Install and link external libraries used in the RN 61 project that support RNOH and provide a compatible API.

   6. Run the OpenHarmony project.

   7. Sync the project twice (During the first sync, autolinking modifies oh-package.json. During the second sync, new dependencies are installed).