@react-native-ohos/slider 5.0.1-rc.1 → 5.1.2-rc.2

package/example/harmony/entry/src/main/cpp/CMakeLists.txt

@@ -0,0 +1,41 @@
+project(rnapp)
+cmake_minimum_required(VERSION 3.4.1)
+set(CMAKE_SKIP_BUILD_RPATH TRUE)
+set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}")
+set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules")
+set(OH_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")
+set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules/@rnoh/react-native-openharmony/src/main/cpp")
+set(RNOH_GENERATED_DIR "${CMAKE_CURRENT_SOURCE_DIR}/generated")
+set(LOG_VERBOSITY_LEVEL 1)
+set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments")
+set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie")
+set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")
+
+set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use
+add_compile_definitions(WITH_HITRACE_SYSTRACE)
+
+# (VM) Define a variable and assign it to the current module's cpp directory
+set(NATIVERENDER_ROOT_PATH ${CMAKE_CURRENT_SOURCE_DIR})
+
+# Add the Header File directory, including cpp, cpp/include, and tell cmake to find the Header Files introduced by the code here
+include_directories(${NATIVERENDER_ROOT_PATH}
+                    ${NATIVERENDER_ROOT_PATH}/include)
+
+add_subdirectory("${RNOH_CPP_DIR}" ./rn)
+
+# RNOH_BEGIN: manual_package_linking_1
+add_subdirectory("${OH_MODULES}/@react-native-ohos/slider/src/main/cpp" ./slider)
+# RNOH_END: manual_package_linking_1
+
+file(GLOB GENERATED_CPP_FILES "${CMAKE_CURRENT_SOURCE_DIR}/generated/*.cpp") # this line is needed by codegen v1
+
+add_library(rnoh_app SHARED
+    ${GENERATED_CPP_FILES}
+    "./PackageProvider.cpp"
+    "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp"
+)
+target_link_libraries(rnoh_app PUBLIC rnoh)
+
+# RNOH_BEGIN: manual_package_linking_2
+target_link_libraries(rnoh_app PUBLIC rnoh_slider)
+# RNOH_END: manual_package_linking_2

package/example/harmony/entry/src/main/cpp/PackageProvider.cpp

@@ -0,0 +1,17 @@
+// Copyright (c) 2025 Huawei Device Co., Ltd. All rights reserved
+// Use of this source code is governed by a MIT license that can be
+// found in the LICENSE file.
+
+#include "RNOH/PackageProvider.h"
+#include "generated/RNOHGeneratedPackage.h"
+#include "SliderPackage.h"
+
+using namespace rnoh;
+
+std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx)
+{
+    return {
+        std::make_shared<RNOHGeneratedPackage>(ctx), // generated by codegen v1
+         std::make_shared<SliderPackage>(ctx)
+    };
+}

package/example/harmony/entry/src/main/ets/RNPackagesFactory.ets

@@ -0,0 +1,13 @@
+/*
+ * Copyright (c) 2025 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+
+
+import type {RNPackageContext, RNPackage} from '@rnoh/react-native-openharmony/ts';
+
+export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
+  return [
+  ];
+}

package/example/harmony/entry/src/main/ets/entryability/EntryAbility.ets

@@ -0,0 +1,27 @@
+/*
+ * Copyright (c) 2025 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+
+import {RNAbility} from '@rnoh/react-native-openharmony';
+import { AbilityConstant, Want } from '@kit.AbilityKit';
+
+export default class EntryAbility extends RNAbility {
+
+  onCreate(want: Want) {
+    super.onCreate(want)
+    this.handleWeChatCallIfNeed(want)
+  }
+
+  getPagePath() {
+    return 'pages/Index';
+  }
+
+  onNewWant(want: Want, _launchParam: AbilityConstant.LaunchParam): void {
+    this.handleWeChatCallIfNeed(want)
+  }
+
+  private handleWeChatCallIfNeed(want: Want) {
+  }
+}

package/example/harmony/entry/src/main/ets/pages/Index.ets

@@ -0,0 +1,125 @@
+/*
+ * Copyright (c) 2025 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+
+import {
+  AnyJSBundleProvider,
+  ComponentBuilderContext,
+  FileJSBundleProvider,
+  MetroJSBundleProvider,
+  ResourceJSBundleProvider,
+  RNApp,
+  RNOHErrorDialog,
+  RNOHLogger,
+  TraceJSBundleProviderDecorator,
+  RNOHCoreContext
+} from '@rnoh/react-native-openharmony';
+import font from '@ohos.font';
+import { createRNPackages } from '../RNPackagesFactory';
+import { RNCSlider, SLIDER_TYPE } from "@react-native-ohos/slider"
+const arkTsComponentNames: Array<string> = [
+  SLIDER_TYPE
+];
+
+@Builder
+export function buildCustomRNComponent(ctx: ComponentBuilderContext) {
+  // There seems to be a problem with the placement of ArkTS components in mixed mode. Nested Stack temporarily avoided.
+  Stack() {
+    if (ctx.componentName === SLIDER_TYPE) {
+      RNCSlider({
+        ctx: ctx.rnComponentContext,
+        tag: ctx.tag,
+      })
+    }
+  }
+  .position({ x: 0, y: 0 })
+
+}
+
+const wrappedCustomRNComponentBuilder = wrapBuilder(buildCustomRNComponent)
+
+/**
+ * If you want to use custom fonts, you need to register them here.
+ * We should support react-native-asset to handle registering fonts automatically.
+ */
+const fonts: font.FontOptions[] = [
+  {
+    familyName: 'Pacifico-Regular',
+    familySrc: '/assets/fonts/Pacifico-Regular.ttf'
+  },
+  {
+    familyName: 'StintUltraCondensed-Regular',
+    familySrc: '/assets/fonts/StintUltraCondensed-Regular.ttf'
+  }
+]
+
+@Entry
+@Component
+struct Index {
+  @StorageLink('RNOHCoreContext') private rnohCoreContext: RNOHCoreContext | undefined = undefined
+  @State shouldShow: boolean = false
+  private logger!: RNOHLogger
+  bundlePath: string = 'bunlde.harmony.js'
+  @State hasBundle: boolean = false
+
+  aboutToAppear() {
+    this.logger = this.rnohCoreContext!.logger.clone("Index")
+    const stopTracing = this.logger.clone("aboutToAppear").startTracing()
+    for (const customFont of fonts) {
+      font.registerFont(customFont)
+    }
+
+    this.shouldShow = true
+    stopTracing()
+  }
+
+  onBackPress(): boolean | undefined {
+    // NOTE: this is required since `Ability`'s `onBackPressed` function always
+    // terminates or puts the app in the background, but we want Ark to ignore it completely
+    // when handled by RN
+    this.rnohCoreContext!.dispatchBackPress()
+    return true
+  }
+
+  build() {
+    Column() {
+      if (this.rnohCoreContext && this.shouldShow) {
+        if (this.rnohCoreContext?.isDebugModeEnabled) {
+          RNOHErrorDialog({ ctx: this.rnohCoreContext })
+        }
+        RNApp({
+          rnInstanceConfig: {
+            createRNPackages,
+            enableNDKTextMeasuring: true,
+            enableBackgroundExecutor: false,
+            enableCAPIArchitecture: true,
+            arkTsComponentNames: arkTsComponentNames,
+          },
+          initialProps: { "foo": "bar" } as Record<string, string>,
+          appKey: "app_name",
+          wrappedCustomRNComponentBuilder: wrappedCustomRNComponentBuilder,
+          onSetUp: (rnInstance) => {
+            rnInstance.enableFeatureFlag("ENABLE_RN_INSTANCE_CLEAN_UP")
+          },
+          jsBundleProvider: new TraceJSBundleProviderDecorator(
+            new AnyJSBundleProvider([
+              new MetroJSBundleProvider(),
+              // NOTE: to load the bundle from file, place it in
+              // `/data/app/el2/100/base/com.rnoh.tester/files/bundle.harmony.js`
+              // on your device. The path mismatch is due to app sandboxing on HarmonyOS
+              new FileJSBundleProvider('/data/storage/el2/base/files/bundle.harmony.js'),
+              // new FileJSBundleProvider(context.filesDir + '/' + this.bundlePath),
+              new ResourceJSBundleProvider(this.rnohCoreContext.uiAbilityContext.resourceManager, 'hermes_bundle.hbc'),
+              new ResourceJSBundleProvider(this.rnohCoreContext.uiAbilityContext.resourceManager, 'bundle.harmony.js')
+            ]),
+            this.rnohCoreContext.logger),
+        })
+      }
+      Text("1233333333122 1212323")
+    }
+    .height('100%')
+    .width('100%')
+  }
+}

package/example/harmony/entry/src/main/ets/pages/SurfaceDeadlockTest.ets

@@ -0,0 +1,135 @@
+/*
+ * Copyright (c) 2025 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+import { RNInstance, JSBundleProvider, RNAbility, RNSurface } from '@rnoh/react-native-openharmony'
+import { CustomComponentBuilder } from "@rnoh/react-native-openharmony/src/main/ets/RNOHCorePackage"
+import { SurfaceConfig2 } from '@rnoh/react-native-openharmony/src/main/ets/RNSurface'
+
+
+@Component
+export struct SurfaceDeadlockTest {
+  public jsBundleProvider: JSBundleProvider | undefined = undefined
+  public appKeys: string[] = []
+  public numberOfIterations: number = 1
+  @BuilderParam public buildCustomComponent!: CustomComponentBuilder
+  // -------------------------------------------------------------------------------------------------------------------
+  @StorageLink('RNAbility') private rnAbility: RNAbility = {} as RNAbility
+  private rnInstance!: RNInstance
+  @State private shouldShow: boolean = false
+  private shouldDestroyRNInstance: boolean = false
+  private cleanUpCallbacks: (() => void)[] = []
+
+  aboutToAppear() {
+    this.getOrCreateRNInstance().then(rnInstance => {
+      this.rnInstance = rnInstance
+      const jsBundleExecutionStatus = this.rnInstance.getBundleExecutionStatus(this.jsBundleProvider?.getURL())
+      if (this.jsBundleProvider && jsBundleExecutionStatus === undefined) {
+        this.rnInstance.runJSBundle(this.jsBundleProvider).then(() => {
+          this.shouldShow = true
+        })
+        return;
+      }
+    }).catch((reason: string | Error) => {
+      if (typeof reason === "string")
+        this.rnAbility.getLogger().error(reason)
+      else if (reason instanceof Error) {
+        this.rnAbility.getLogger().error(reason.message)
+      } else {
+        this.rnAbility.getLogger().error("Fatal exception")
+      }
+    })
+  }
+
+  aboutToDisappear() {
+    if (this.shouldDestroyRNInstance)
+      this.rnAbility.destroyAndUnregisterRNInstance(this.rnInstance)
+    this.cleanUpCallbacks.forEach(cleanUp => cleanUp())
+  }
+
+  private getOrCreateRNInstance(): Promise<RNInstance> {
+    return this.rnAbility.createAndRegisterRNInstance({ createRNPackages: () => [] })
+  }
+
+  build() {
+    Stack() {
+      if (this.shouldShow) {
+        ForEach(this.appKeys, (appKey: string, idx) => {
+          Stack() {
+            Blinker({
+              minDelayInMs: 1000,
+              maxDelayInMs: 2000,
+              blinksCount: this.numberOfIterations,
+              randomnessPrecisionInMs: 500
+            }) {
+              RNSurface({
+                ctx: this.rnAbility.createRNOHContext({ rnInstance: this.rnInstance }),
+                surfaceConfig: {
+                  initialProps: {},
+                  appKey: appKey,
+                } as SurfaceConfig2,
+                buildCustomComponent: this.buildCustomComponent,
+              })
+            }
+          }.height(`${100 / this.appKeys.length}%`)
+          .position({ x: 0, y: `${(idx / this.appKeys.length) * 100}%` })
+        })
+      }
+    }.width("100%")
+    .height("100%")
+  }
+}
+
+
+@Component
+struct Blinker {
+  public minDelayInMs: number = 0
+  public maxDelayInMs: number = 1000
+  public blinksCount: number = 0
+  public randomnessPrecisionInMs: number = 250
+  @BuilderParam public renderChildren: () => void
+  private currentBlinksCount = 0
+  @State private isVisible: boolean = false
+  private timeout: number = 0
+
+  aboutToAppear() {
+    this.blink(this.minDelayInMs)
+  }
+
+  aboutToDisappear() {
+    clearTimeout(this.timeout)
+  }
+
+  private blink(ms: number) {
+    this.isVisible = !this.isVisible
+    this.currentBlinksCount += 1
+    if (this.currentBlinksCount >= this.blinksCount) {
+      if (this.timeout) {
+        clearTimeout(this.timeout)
+      }
+      this.isVisible = true
+      return;
+    }
+    this.timeout = setTimeout(() => {
+      this.blink(this.getNextDelay())
+    }, ms)
+  }
+
+  private getNextDelay(): number {
+    return ((Math.floor(Math.random() * (Number.MAX_VALUE / this.randomnessPrecisionInMs)) * this.randomnessPrecisionInMs) % this.maxDelayInMs) + this.minDelayInMs
+  }
+
+  build() {
+    Stack() {
+      if (this.isVisible) {
+        this.renderChildren()
+      }
+    }
+  }
+}
+
+
+
+
+

package/example/harmony/entry/src/main/ets/pages/TouchDisplayer.ets

@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2025 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+
+
+@Component
+export struct TouchDisplayer {
+  @State currentTouches: TouchObject[] = []
+  @State touchIndicatorOpacity: number = 0
+  @BuilderParam buildChildren: () => void
+  build() {
+    Stack() {
+      this.buildChildren()
+      ForEach(this.currentTouches, (activeTouch: TouchObject) => {
+        Stack() {
+        }
+        .width(64)
+        .height(64)
+        .backgroundColor("blue")
+        .borderWidth(2)
+        .borderColor("white")
+        .opacity(this.touchIndicatorOpacity)
+        .position({ x: activeTouch.x - 32, y: activeTouch.y - 32 })
+        .borderRadius(1000)
+        .hitTestBehavior(HitTestMode.Transparent)
+      })
+    }
+    .width("100%")
+    .height("100%")
+    .hitTestBehavior(HitTestMode.Transparent)
+    .onTouch(e => {
+      this.currentTouches = e.touches
+      this.touchIndicatorOpacity = 0.5
+      animateTo({
+        duration: 500,
+        curve: Curve.Linear,
+      }, () => {
+        this.touchIndicatorOpacity = 0
+      })
+    })
+  }
+}

package/example/harmony/entry/src/main/module.json5

@@ -0,0 +1,52 @@
+{
+  "module": {
+    "name": "entry",
+    "type": "entry",
+    "description": "$string:module_desc",
+    "mainElement": "EntryAbility",
+    "deviceTypes": [
+      "default"
+    ],
+    "querySchemes": [
+      "weixin",
+    ],
+    "deliveryWithInstall": true,
+    "installationFree": false,
+    "pages": "$profile:main_pages",
+    // below property is supported from 5.0.0 - it is needed by bundleManager.canOpenLink to check if the app can open some url
+    // "querySchemes": ["maps", "http", "https", "customDomain"],
+    "requestPermissions": [
+      {
+        "name": "ohos.permission.INTERNET"
+      },
+    ],
+    "metadata": [
+      {
+        "name": "OPTLazyForEach",
+        "value": "true",
+      }
+    ],
+    "abilities": [
+      {
+        "name": "EntryAbility",
+        "srcEntry": "./ets/entryability/EntryAbility.ets",
+        "description": "$string:EntryAbility_desc",
+        "icon": "$media:icon",
+        "label": "$string:EntryAbility_label",
+        "startWindowIcon": "$media:icon",
+        "startWindowBackground": "$color:start_window_background",
+        "visible": true,
+        "skills": [
+          {
+            "entities": [
+              "entity.system.home"
+            ],
+            "actions": [
+              "action.system.home"
+            ]
+          }
+        ]
+      }
+    ]
+  }
+}

package/example/harmony/entry/src/main/resources/base/element/color.json

@@ -0,0 +1,8 @@
+{
+  "color": [
+    {
+      "name": "start_window_background",
+      "value": "#FFFFFF"
+    }
+  ]
+}

package/example/harmony/entry/src/main/resources/base/element/string.json

@@ -0,0 +1,16 @@
+{
+  "string": [
+    {
+      "name": "module_desc",
+      "value": "module description"
+    },
+    {
+      "name": "EntryAbility_desc",
+      "value": "description"
+    },
+    {
+      "name": "EntryAbility_label",
+      "value": "RN Tester"
+    }
+  ]
+}

package/example/harmony/entry/src/main/resources/base/profile/main_pages.json

@@ -0,0 +1,5 @@
+{
+  "src": [
+    "pages/Index"
+  ]
+}

package/example/harmony/entry/src/main/resources/rawfile/1.txt

@@ -0,0 +1 @@
+text test

package/example/harmony/format.ps1

@@ -0,0 +1,18 @@
+/*
+ * Copyright (c) 2025 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+
+$directoryPath = Split-Path -Parent $MyInvocation.MyCommand.Path
+$filePaths = Get-ChildItem $directoryPath -Recurse -Include *.h, *.cpp |
+Where-Object {
+  $_.DirectoryName -notmatch 'third-party' -and
+  $_.DirectoryName -notmatch 'patches' -and
+  $_.DirectoryName -notmatch 'node_modules' -and
+  $_.DirectoryName -notmatch '.cxx' -and
+  $_.DirectoryName -notmatch 'build'
+}
+foreach ($filePath in $filePaths) {
+  & "clang-format.exe" -style=file -i $filePath.FullName
+}

package/example/harmony/hvigor/hvigor-config.json5

@@ -0,0 +1,21 @@
+{
+  "modelVersion": "5.0.0",
+  "dependencies": {
+  },
+  "execution": {
+    // "analyze": "default",                    /* Define the build analyze mode. Value: [ "default" | "verbose" | false ]. Default: "default" */
+    // "daemon": true,                          /* Enable daemon compilation. Value: [ true | false ]. Default: true */
+    // "incremental": true,                     /* Enable incremental compilation. Value: [ true | false ]. Default: true */
+    // "parallel": true,                        /* Enable parallel compilation. Value: [ true | false ]. Default: true */
+    // "typeCheck": false,                      /* Enable typeCheck. Value: [ true | false ]. Default: false */
+  },
+  "logging": {
+    // "level": "info"                          /* Define the log level. Value: [ "debug" | "info" | "warn" | "error" ]. Default: "info" */
+  },
+  "debugging": {
+     "stacktrace": false                      /* Disable stacktrace compilation. Value: [ true | false ]. Default: false */
+  },
+  "nodeOptions": {
+    // "maxOldSpaceSize": 4096                  /* Enable nodeOptions maxOldSpaceSize compilation. Unit M. Used for the daemon process */
+  }
+}

package/example/harmony/hvigorfile.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright (c) 2025 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+
+
+// Script for compiling build behavior. It is built in the build plug-in and cannot be modified currently.
+export { appTasks } from '@ohos/hvigor-ohos-plugin';

package/example/harmony/oh-package.json5

@@ -0,0 +1,12 @@
+{
+  "modelVersion": "5.0.0",
+  "license": "ISC",
+  "name": "rnoh",
+  "description": "example description",
+  "repository": {},
+  "version": "1.0.0",
+  "overrides": {
+    "@rnoh/react-native-openharmony": "file:./../node_modules/react-native-harmony/harmony/react_native_openharmony.har"
+  },
+  "dynamicDependencies": {}
+}

package/example/index.js

@@ -0,0 +1,11 @@
+/*
+ * Copyright (c) 2025 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+
+import {AppRegistry, View, Text} from 'react-native';
+import {name as appName} from './app.json';
+import SliderExample from './src/index';
+
+AppRegistry.registerComponent(appName, () => SliderExample);

package/example/jest.config.js

@@ -0,0 +1,11 @@
+/*
+ * Copyright (c) 2025 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+};

package/example/metro.config.js

@@ -0,0 +1,30 @@
+/*
+ * Copyright (c) 2025 Huawei Device Co., Ltd. All rights reserved
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+
+const {mergeConfig, getDefaultConfig} = require('@react-native/metro-config');
+const {createHarmonyMetroConfig} = require('react-native-harmony/metro.config');
+
+/**
+ * @type {import("metro-config").ConfigT}
+ */
+const config = {
+  transformer: {
+    getTransformOptions: async () => ({
+      transform: {
+        experimentalImportSupport: false,
+        inlineRequires: true,
+      },
+    }),
+  },
+};
+
+module.exports = mergeConfig(
+  getDefaultConfig(__dirname),
+  createHarmonyMetroConfig({
+    reactNativeHarmonyPackageName: 'react-native-harmony',
+  }),
+  config,
+);