Skip to content

app-rnoh-example

Example React Native application for Oniro/OpenHarmony.

This project provides a template for React Native applications on OpenHarmony and introduces the fundamentals of building cross-platform applications with 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/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 configured and adapted for use as an application template. To create an RNOH application from scratch, embed the React Native application in an OpenHarmony application that acts as a container and bridge between the system and the React Native application.

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