React Native

Huawei x Software Mansion: Bringing React Native Support to HarmonyOS NEXT

Przemek SosnaJan 14, 20265 min read

Several years ago, Huawei, together with industry partners, started working on a brand new operating system. This is how OpenHarmony was born, an open-source competitor to the well-established iOS and Android markets. Similarly to how Google builds Android on top of AOSP, Huawei develops its proprietary HarmonyOS NEXT distribution from the OpenHarmony codebase, which powers Huawei devices.

We’re happy to share that Software Mansion has been cooperating with Huawei from the start on this project, and we’ve been taking an active part in developing React Native OpenHarmony (RNOH) — a React Native library letting you run apps directly on OpenHarmony devices.

Understanding HarmonyOS Next

Since HarmonyOS Next is a completely separate operating system, native apps from other platforms aren’t directly compatible with it. However, while it differs from Android and iOS, it still feels familiar and shares many concepts when it comes to interactions and overall user experience.

The Developer Experience is also quite familiar. You can use ArkTS and C++ to write HarmonyOS Next-native applications, similar to using Swift on iOS and Kotlin on Android.

ArkTS is based on TypeScript, so this means developers don’t need to learn a new technology from scratch to build apps for HarmonyOS Next. To make the development process more comfortable, Huawei has prepared a dedicated IDE for Harmony called DevEco Studio. It’s similar to Android Studio, so if you have prior experience with Android native development, the onboarding process should be pretty seamless.

Developing React Native Open Harmony (RNOH)

As already mentioned, React Native Open Harmony (RNOH) is a library that makes it possible to run React Native apps on OpenHarmony devices. You can use it by either integrating it into an existing app or starting a new project from scratch. RNOH is built using React Native’s New Architecture to ensure seamless performance and reliability. By the way, if you haven’t migrated your app yet, it’s the best time to do so, because from React Native 0.82 onwards, only the New Architecture is supported. This means the migration is crucial if you want to benefit from the latest features — you can visit our website to learn more about the benefits of migrating and get support.

For now, RNOH supports React Native 0.77 and 0.72, and we’re currently working on adding support for 0.82 to ensure developers can take advantage of the latest features. However, for legacy use cases, we’ve also created a Fabric-based adaptation for version 0.61 to maintain compatibility with older applications.

While React Native Open Harmony is still a young project, it has already established its role in the HarmonyOS ecosystem. Many well-known applications have adopted it, including — but not limited to — major social media platforms like YY and Xiaohongshu (Little Red Book), as well as CTrip (the Chinese domestic version of Trip.com).

Today, more than 27 million devices on the Chinese market are running on HarmonyOS Next. Already, more than 300 000 apps and meta-services are available, and there are more than 10 million registered developers. It’s exciting for us to be part of this ecosystem!

How we helped create React Native Open Harmony

Our cooperation with Huawei began as a series of proof-of-concept implementations, eventually growing into a long-term collaboration, with our team developing a significant portion of RNOH’s core code.

Although Fabric is mostly written in C++, integrating it with HarmonyOS Next still posed significant challenges. We had to put considerable effort into bridging the gap between ArkTS and React Native’s codebase, as well as mapping React Native’s core components to their native equivalents on HarmonyOS Next.

In addition, we’ve built the native OpenHarmony implementation of the TurboModule system from scratch, which is used to access native APIs for functionality like networking and vibrations. Through this work, we’ve become familiar with HarmonyOS’s runtime environment, component system, UI rendering pipeline, and native development workflow using ArkTS. We’ve learned how to bridge OpenHarmony’s platform-specific conventions with React Native’s cross-platform architecture — knowledge that we continue to apply as we expand RNOH’s capabilities and performance.

As modern React Native apps rely heavily on a vibrant ecosystem of open source libraries, we’ve also made sure that key libraries are supported on OpenHarmony. Without them, it wouldn’t be a practical and usable platform for React Native apps.

Our Software Mansion team took on the task of porting several widely used libraries, helping us to further increase our OpenHarmony expertise. Some of the libraries ported by our team include:

  • react-native-reanimated
  • react-native-gesture-handler
  • react-native-screens
  • react-native-webview
  • react-native-svg
  • react-native-safe-area-context

At the same time, Huawei worked on porting other important libraries, significantly expanding OpenHarmony’s compatibilities within the broader React Native ecosystem.

This project has been a rewarding journey for our team, allowing us to deepen our expertise in React Native and its modern Fabric architecture even more.

Beyond the React Native side, it also allowed us to gain a much deeper understanding of HarmonyOS NEXT itself, strengthening our ability to integrate React Native with diverse native ecosystems.

What’s in store for React Native OpenHarmony?

Our partnership with Huawei continues as we work on introducing new features, resolving bugs, improving performance, and updating React Native OpenHarmony to stay compatible with the latest versions of React Native.

If you need help migrating your existing application to HarmonyOS or want to develop a new application that’s compatible with Huawei’s platform, you can always reach out to us at [email protected]. We’ll be happy to use our first-hand experience to help you build your HarmonyOS app!

We’re Software Mansion: multimedia experts, AI explorers, React Native core contributors, community builders, and software development consultants.

More in this category