Skip to content

app-rnoh-example

Example React Native application for Oniro/OpenHarmony.

The aim of this project is to create a template for new React Native applications for Open Harmony, as well as to present the fundamentals of building cross-platform applications in React Native.

The code is divided into two directories:

  • oh-app: OpenHarmony application template serving as a container for the React Native app.
  • rnoh-app: The actual React Native app embedded in oh-app.
App Screenshot Functionalities of the Application
  • Animation: Sliding animation for the logo container using Animated API and useRef.
  • Button Interaction: Handling logo press events with the LogoBox component and onPress prop.
  • useEffect Hook: Triggering animations on component mount.
  • Reusable Components: Creating and styling LogoBox for logos.
  • Screen Carousel: Using ScrollView to navigate between screens (Screen1, Screen2, Screen3).
  • Dynamic Switching: Scrolling carousel based on logo press.
  • Code Structure: Modular organization with components and screens.
  • Responsiveness: Adjusting screen width dynamically with Dimensions.

The app demonstrates React Native features for building interactive and animated UIs.

A quick how-to

The code of the sample application has already been prepared and adapted for compilation with RN, it can serve as a template for other apps.

Note: Before using the quick build, ensure you have completed all the steps outlined in the prerequisites section. The quick build will not work correctly unless these prerequisites are met.

  1. Download project and dependent libraries:
$ git clone https://github.com/eclipse-oniro4openharmony/app-rnoh-example.git
$ cd app-rnoh-example/rnoh-app
$ npm i @react-native-oh/react-native-harmony
$ cd ../oh-app
$ ohpm i @rnoh/react-native-openharmony
  1. Create a JS bundle with RN app: 
    $ cd ../rnoh-app
$ npm run dev
  2. Copy generated bundle to the OH app:

Copy the entire contents of the directory: 

rnoh-app/harmony/entry/src/main/resources/rawfile
to the directory: 
oh-app/entry/src/main/src/main/resources/rawfile
4. Compile the oh-app with the DevEco. Choose File > Sync and Refresh Project before compilation.

Detailed instructions

The project in this repository is already properly configured and adapted. You can use it as a template for your application. However, if you want to create an RNOH application from scratch, you must follow certain steps to embed the React Native application within an Open Harmony application that will serve as a container and bridge between the system and the RN application.

In case of project compilation issues, go directly to the Troubleshooting section.