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 the OH app.

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.

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.

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

2. Create a JS bundle with RN app:

$ cd ../rnoh-app
$ npm run dev

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

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.

1. Prerequisites
2. Development environment configuration
3. Preparation of React Native application code
4. Preparation of the Open Harmony application code
5. Compilation of the app
6. Troubleshooting