@react-native-ohos/react-native-pager-view 6.2.4-rc.4

package/harmony/pager_view/src/main/cpp/generated/react/renderer/components/react_native_pager_view/Props.cpp

@@ -0,0 +1,38 @@
+
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GeneratePropsCpp.js
+ */
+
+#include <react/renderer/components/react_native_pager_view/Props.h>
+#include <react/renderer/core/PropsParserContext.h>
+#include <react/renderer/core/propsConversions.h>
+
+namespace facebook {
+namespace react {
+
+RNCViewPagerProps::RNCViewPagerProps(
+    const PropsParserContext &context,
+    const RNCViewPagerProps &sourceProps,
+    const RawProps &rawProps): ViewProps(context, sourceProps, rawProps),
+    scrollEnabled(convertRawProp(context, rawProps, "scrollEnabled", sourceProps.scrollEnabled, {true})),
+    layoutDirection(convertRawProp(context, rawProps,
+        "layoutDirection", sourceProps.layoutDirection, {RNCViewPagerLayoutDirection::Ltr})),
+    initialPage(convertRawProp(context, rawProps, "initialPage", sourceProps.initialPage, {0})),
+    orientation(convertRawProp(context,
+        rawProps, "orientation", sourceProps.orientation, {RNCViewPagerOrientation::Horizontal})),
+    offscreenPageLimit(convertRawProp(context, rawProps, "offscreenPageLimit", sourceProps.offscreenPageLimit, {0})),
+    pageMargin(convertRawProp(context, rawProps, "pageMargin", sourceProps.pageMargin, {0})),
+    overScrollMode(convertRawProp(context,
+        rawProps, "overScrollMode", sourceProps.overScrollMode, {RNCViewPagerOverScrollMode::Auto})),
+    overdrag(convertRawProp(context, rawProps, "overdrag", sourceProps.overdrag, {false})),
+    keyboardDismissMode(convertRawProp(context,
+        rawProps, "keyboardDismissMode", sourceProps.keyboardDismissMode, {RNCViewPagerKeyboardDismissMode::None}))
+    {}
+
+} // namespace react
+} // namespace facebook

package/harmony/pager_view/src/main/cpp/generated/react/renderer/components/react_native_pager_view/Props.h

@@ -0,0 +1,139 @@
+
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GeneratePropsH.js
+ */
+#pragma once
+
+#include <react/renderer/components/view/ViewProps.h>
+#include <react/renderer/core/PropsParserContext.h>
+
+namespace facebook {
+namespace react {
+
+enum class RNCViewPagerLayoutDirection { Ltr, Rtl };
+
+static inline void fromRawValue(const PropsParserContext& context,
+    const RawValue &value, RNCViewPagerLayoutDirection &result)
+{
+    auto string = (std::string)value;
+    if (string == "ltr") {
+        result = RNCViewPagerLayoutDirection::Ltr;
+        return;
+    }
+    if (string == "rtl") {
+        result = RNCViewPagerLayoutDirection::Rtl;
+        return;
+    }
+    abort();
+}
+
+static inline std::string toString(const RNCViewPagerLayoutDirection &value)
+{
+    switch (value) {
+        case RNCViewPagerLayoutDirection::Ltr: return "ltr";
+        case RNCViewPagerLayoutDirection::Rtl: return "rtl";
+    }
+}
+enum class RNCViewPagerOrientation { Horizontal, Vertical };
+
+static inline void fromRawValue(const PropsParserContext& context,
+    const RawValue &value, RNCViewPagerOrientation &result)
+{
+    auto string = (std::string)value;
+    if (string == "horizontal") {
+        result = RNCViewPagerOrientation::Horizontal;
+        return;
+    }
+    if (string == "vertical") {
+        result = RNCViewPagerOrientation::Vertical;
+        return;
+    }
+    abort();
+}
+
+static inline std::string toString(const RNCViewPagerOrientation &value)
+{
+    switch (value) {
+        case RNCViewPagerOrientation::Horizontal: return "horizontal";
+        case RNCViewPagerOrientation::Vertical: return "vertical";
+    }
+}
+enum class RNCViewPagerOverScrollMode { Auto, Always, Never };
+
+static inline void fromRawValue(const PropsParserContext& context,
+    const RawValue &value, RNCViewPagerOverScrollMode &result)
+{
+    auto string = (std::string)value;
+    if (string == "auto") {
+        result = RNCViewPagerOverScrollMode::Auto;
+        return;
+    }
+    if (string == "always") {
+        result = RNCViewPagerOverScrollMode::Always;
+        return;
+    }
+    if (string == "never") {
+        result = RNCViewPagerOverScrollMode::Never;
+        return;
+    }
+    abort();
+}
+
+static inline std::string toString(const RNCViewPagerOverScrollMode &value)
+{
+    switch (value) {
+        case RNCViewPagerOverScrollMode::Auto: return "auto";
+        case RNCViewPagerOverScrollMode::Always: return "always";
+        case RNCViewPagerOverScrollMode::Never: return "never";
+    }
+}
+enum class RNCViewPagerKeyboardDismissMode { None, OnDrag };
+
+static inline void fromRawValue(const PropsParserContext& context,
+    const RawValue &value, RNCViewPagerKeyboardDismissMode &result)
+{
+    auto string = (std::string)value;
+    if (string == "none") {
+        result = RNCViewPagerKeyboardDismissMode::None;
+        return;
+    }
+    if (string == "on-drag") {
+        result = RNCViewPagerKeyboardDismissMode::OnDrag;
+        return;
+    }
+    abort();
+}
+
+static inline std::string toString(const RNCViewPagerKeyboardDismissMode &value)
+{
+    switch (value) {
+        case RNCViewPagerKeyboardDismissMode::None: return "none";
+        case RNCViewPagerKeyboardDismissMode::OnDrag: return "on-drag";
+    }
+}
+
+class RNCViewPagerProps final : public ViewProps {
+public:
+    RNCViewPagerProps() = default;
+    RNCViewPagerProps(const PropsParserContext& context,
+        const RNCViewPagerProps &sourceProps, const RawProps &rawProps);
+
+#pragma mark - Props
+    bool scrollEnabled{true};
+    RNCViewPagerLayoutDirection layoutDirection{RNCViewPagerLayoutDirection::Ltr};
+    int initialPage{0};
+    RNCViewPagerOrientation orientation{RNCViewPagerOrientation::Horizontal};
+    int offscreenPageLimit{0};
+    int pageMargin{0};
+    RNCViewPagerOverScrollMode overScrollMode{RNCViewPagerOverScrollMode::Auto};
+    bool overdrag{false};
+    RNCViewPagerKeyboardDismissMode keyboardDismissMode{RNCViewPagerKeyboardDismissMode::None};
+};
+
+} // namespace react
+} // namespace facebook

package/harmony/pager_view/src/main/cpp/generated/react/renderer/components/react_native_pager_view/ShadowNodes.cpp

@@ -0,0 +1,19 @@
+
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateShadowNodeCpp.js
+ */
+
+#include <react/renderer/components/react_native_pager_view/ShadowNodes.h>
+
+namespace facebook {
+namespace react {
+
+extern const char RNCViewPagerComponentName[] = "RNCViewPager";
+
+} // namespace react
+} // namespace facebook

package/harmony/pager_view/src/main/cpp/generated/react/renderer/components/react_native_pager_view/ShadowNodes.h

@@ -0,0 +1,34 @@
+
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateShadowNodeH.js
+ */
+
+#pragma once
+
+#include <react/renderer/components/react_native_pager_view/EventEmitters.h>
+#include <react/renderer/components/react_native_pager_view/Props.h>
+#include <react/renderer/components/react_native_pager_view/States.h>
+#include <react/renderer/components/view/ConcreteViewShadowNode.h>
+#include <jsi/jsi.h>
+
+namespace facebook {
+namespace react {
+
+JSI_EXPORT extern const char RNCViewPagerComponentName[];
+
+/*
+ * `ShadowNode` for <RNCViewPager> component.
+ */
+using RNCViewPagerShadowNode = ConcreteViewShadowNode<
+    RNCViewPagerComponentName,
+    RNCViewPagerProps,
+    RNCViewPagerEventEmitter,
+    RNCViewPagerState>;
+
+} // namespace react
+} // namespace facebook

package/harmony/pager_view/src/main/cpp/generated/react/renderer/components/react_native_pager_view/States.cpp

@@ -0,0 +1,16 @@
+
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateStateCpp.js
+ */
+#include <react/renderer/components/react_native_pager_view/States.h>
+
+namespace facebook {
+namespace react {
+
+} // namespace react
+} // namespace facebook

package/harmony/pager_view/src/main/cpp/generated/react/renderer/components/react_native_pager_view/States.h

@@ -0,0 +1,38 @@
+/**
+ * This code was generated by [react-native-codegen](https://www.npmjs.com/package/react-native-codegen).
+ *
+ * Do not edit this file as changes may cause incorrect behavior and will be lost
+ * once the code is regenerated.
+ *
+ * @generated by codegen project: GenerateStateH.js
+ */
+#pragma once
+
+#ifdef ANDROID
+#include <folly/dynamic.h>
+#include <react/renderer/mapbuffer/MapBuffer.h>
+#include <react/renderer/mapbuffer/MapBufferBuilder.h>
+#endif
+
+namespace facebook {
+namespace react {
+
+class RNCViewPagerState {
+public:
+  RNCViewPagerState() = default;
+
+#ifdef ANDROID
+    RNCViewPagerState(RNCViewPagerState const &previousState, folly::dynamic data){};
+    folly::dynamic getDynamic() const
+    {
+        return {};
+    };
+    MapBuffer getMapBuffer() const
+    {
+        return MapBufferBuilder::EMPTY();
+    };
+#endif
+};
+
+} // namespace react
+} // namespace facebook

package/harmony/pager_view/src/main/ets/Logger.ets

@@ -0,0 +1,64 @@
+/**
+ * MIT License
+ *
+ * Copyright (C) 2023 Huawei Device Co., Ltd.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import hilog from '@ohos.hilog';
+
+class Logger {
+    private domain : number;
+    private prefix : string;
+    private format : string = '%{public}s, %{public}s';
+    private isDebug : boolean;
+
+    /**
+     * constructor.
+     *
+     * @param Prefix Identifies the log tag.
+     * @param domain Domain Indicates the service domain, which is a hexadecimal integer ranging from 0x0 to 0xFFFFF.
+     */
+    constructor(prefix: string = 'MyApp', domain: number = 0xFF00, isDebug = false) {
+        this.prefix = prefix;
+        this.domain = domain;
+        this.isDebug = isDebug;
+    }
+
+    debug(...args: string[]): void {
+        if (this.isDebug) {
+            hilog.debug(this.domain, this.prefix, this.format, args);
+        }
+    }
+
+    info(...args: string[]): void {
+        hilog.info(this.domain, this.prefix, this.format, args);
+    }
+
+    warn(...args: string[]) : void {
+        hilog.warn(this.domain, this.prefix, this.format, args);
+    }
+
+    error(...args: string[]) : void {
+        hilog.error(this.domain, this.prefix, this.format, args);
+    }
+}
+
+export default new Logger('RNCViewPager', 0xFF00, false)

package/harmony/pager_view/src/main/ets/RNCViewPager.ets

@@ -0,0 +1,281 @@
+/**
+ * MIT License
+ *
+ * Copyright (C) 2023 Huawei Device Co., Ltd.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import {
+  Descriptor,
+  RNOHContext,
+  ViewBaseProps,
+  RNViewBase,
+  ComponentBuilderContext,
+  RNComponentFactory,
+  Tag,
+  RNOHComponentCommand
+} from '@rnoh/react-native-openharmony'
+import inputMethod from '@ohos.inputMethod';
+import { RNCViewPagerManager } from './RNCViewPagerManager';
+import Logger from './Logger';
+
+export const PAGER_VIEW_TYPE: string = "RNCViewPager";
+
+const TAG: string = "[RNOH] RNCViewPager";
+
+export interface ViewPagerProps extends ViewBaseProps {
+  initialPage: number
+  layoutDirection: string
+  orientation: string
+  pageMargin: number
+  offscreenPageLimit: number
+  scrollEnabled: boolean
+  overScrollMode: string
+  overdrag: boolean
+  keyboardDismissMode: string
+}
+
+export type ViewPagerDescriptor = Descriptor<"RNCViewPager", ViewPagerProps>
+
+export type ViewPagerState = 'idle' | 'dragging' | 'settling'
+
+
+@Component
+export struct RNCViewPager {
+  ctx!: RNOHContext
+  tag: number = 0
+  @BuilderParam buildCustomComponent: (ComponentBuilderContext: ComponentBuilderContext) => void
+  @State descriptor: ViewPagerDescriptor = {} as ViewPagerDescriptor
+  @State pageIndex: number = 0
+  @State pageScrollEnabled: boolean = true
+  @State isNativeLock: boolean = false
+  private defaultDuration: number = 100
+  @State AnimationDuration: number = this.defaultDuration
+  private inputMethodController = inputMethod.getInputMethodController();
+  private componentManager!: RNCViewPagerManager
+  private swiperController: SwiperController = new SwiperController()
+  private unregisterDescriptorChangesListener?: () => void = undefined
+  private cleanupCommandCallback?: () => void = undefined
+  private unregisterComponentManager?: () => void = undefined
+  private currentState: ViewPagerState = 'idle'
+
+  aboutToAppear() {
+    this.descriptor = this.ctx.descriptorRegistry.getDescriptor<ViewPagerDescriptor>(this.tag)
+    Logger.info(TAG, `props:${JSON.stringify(this.descriptor.props)}`)
+    this.unregisterDescriptorChangesListener = this.ctx.descriptorRegistry.subscribeToDescriptorChanges(this.tag,
+      (newDescriptor) => {
+        this.descriptor = (newDescriptor as ViewPagerDescriptor)
+      }
+    )
+    this.pageIndex = this.descriptor.props.initialPage
+    this.pageScrollEnabled = this.descriptor.props.scrollEnabled
+    this.cleanupCommandCallback = this.ctx.componentCommandReceiver.registerCommandCallback(
+      this.tag,
+      (command, args: (boolean | number)[]) => {
+        if (command === 'setPage') {
+          Logger.debug(TAG, `setPage command, selectedPage: ${args[0]}`)
+          this.pageIndex = args[0] as number
+        } else if (command === 'setPageWithoutAnimation') {
+          Logger.debug(TAG, `setPageWithoutAnimation command, selectedPage: ${args[0]}`)
+          this.AnimationDuration = 0
+          this.pageIndex = args[0] as number
+        } else if (command === 'setScrollEnabledImperatively') {
+          Logger.debug(TAG, `setScrollEnabledImperatively command, scrollEnabled: ${args[0]}`)
+          this.pageScrollEnabled = Boolean(args[0])
+          if (!this.pageScrollEnabled) {
+            this.emitTouchEvent("idle")
+          }
+        } else if (command === RNOHComponentCommand.BLOCK_NATIVE_RESPONDER) {
+          Logger.debug(TAG, `BLOCK_NATIVE_RESPONDER command`)
+          this.isNativeLock = true
+          this.emitTouchEvent("idle")
+        } else if (command === RNOHComponentCommand.UNBLOCK_NATIVE_RESPONDER) {
+          Logger.debug(TAG, `UNBLOCK_NATIVE_RESPONDER command`)
+          this.isNativeLock = false
+        }
+      });
+
+    if (!this.componentManager) {
+      this.componentManager = new RNCViewPagerManager(this.tag, this.ctx, this.pageIndex)
+    }
+    this.unregisterComponentManager = this.ctx.componentManagerRegistry.registerComponentManager(this.tag, this.componentManager)
+  }
+
+  aboutToDisappear() {
+    this.cleanupCommandCallback?.();
+    this.unregisterDescriptorChangesListener?.()
+    this.unregisterComponentManager?.()
+  }
+
+  getEffectMode() {
+    if (this.descriptor.props.overdrag) {
+      return EdgeEffect.Spring;
+    } else {
+      if (this.descriptor.props.overScrollMode == "never") {
+        return EdgeEffect.None;
+      } else {
+        return EdgeEffect.Fade;
+      }
+    }
+  }
+
+  onChange(index: number) {
+    this.pageIndex = index;
+    this.componentManager.setPage(this.pageIndex)
+    Logger.debug(TAG, `onChange,${JSON.stringify({
+      type: "selected",
+      pageIndex: index
+    })}`)
+    this.ctx.rnInstance.emitComponentEvent(
+      this.descriptor.tag,
+      PAGER_VIEW_TYPE,
+      {
+        type: "selected",
+        pageIndex: index
+      }
+    );
+
+    this.ctx.rnInstance.emitComponentEvent(
+      this.descriptor.tag,
+      PAGER_VIEW_TYPE,
+      {
+        type: "scroll",
+        position: index,
+        offset: 0
+      }
+    );
+  }
+
+  onAnimationStart(index: number) {
+    Logger.debug(TAG, `onAnimationStart,index number:${index}`)
+    if (this.descriptor.props.keyboardDismissMode == "on-drag") {
+      this.inputMethodController.stopInputSession().then((result) => {
+        if (result) {
+          Logger.info(TAG, 'Success to stopInput.(promise)');
+        } else {
+          Logger.warn(TAG, 'Failed to stopInput.(promise)');
+        }
+      }).catch((err: string | Error) => {
+        Logger.error(TAG, 'stopInput promise err:' + JSON.stringify(err));
+      })
+    }
+    this.emitTouchEvent("settling");
+  }
+
+  onAnimationEnd(index: number) {
+    Logger.debug(TAG, `onAnimationEnd,index number:${index}`)
+    this.emitTouchEvent("idle");
+    this.AnimationDuration = this.defaultDuration
+
+    this.ctx.rnInstance.emitComponentEvent(
+      this.descriptor.tag,
+      PAGER_VIEW_TYPE,
+      {
+        type: "scroll",
+        position: index,
+        offset: 0
+      }
+    );
+  }
+
+  emitTouchEvent(event: ViewPagerState) {
+    if (this.currentState == event) {
+      return;
+    }
+    this.currentState = event
+    Logger.debug(TAG, `emitTouchEvent:${event}`)
+    this.ctx.rnInstance.emitComponentEvent(
+      this.descriptor.tag,
+      PAGER_VIEW_TYPE,
+      {
+        type: "scroll_state_changed",
+        pageScrollState: event
+      }
+    );
+  }
+
+  build() {
+    RNViewBase({ ctx: this.ctx, tag: this.tag, componentManager:this.componentManager}) {
+      Swiper(this.swiperController) {
+        ForEach(this.descriptor.childrenTags, (tag: Tag) => {
+          Stack() {
+            RNComponentFactory({ ctx: this.ctx, tag: tag, buildCustomComponent: this.buildCustomComponent })
+          }
+          .width("100%")
+          .height("100%")
+        }, (tag: Tag) => tag.toString())
+      }
+      .width("100%")
+      .height("100%")
+      .index(this.pageIndex)
+      .indicator(false)
+      .vertical(this.descriptor.props.orientation == "horizontal" ? false : true)
+      .direction(this.descriptor.props.layoutDirection == "ltr" ? Direction.Ltr : Direction.Rtl)
+      .itemSpace(this.descriptor.props.pageMargin)
+      .cachedCount(this.descriptor.props.offscreenPageLimit)
+      .disableSwipe(!this.pageScrollEnabled || this.isNativeLock)
+      .effectMode(this.getEffectMode())
+      .onChange((index: number) => this.onChange(index))
+      .onAnimationStart((index: number) => this.onAnimationStart(index))
+      .onAnimationEnd((index: number) => this.onAnimationEnd(index))
+      .duration(this.AnimationDuration)
+      .loop(false)
+      .onGestureSwipe((index: number, extraInfo: SwiperAnimationEvent) => {
+        Logger.debug(TAG, `onGestureSwipe,onGestureSwipe:${index},extraInfo:${JSON.stringify(extraInfo)}`)
+        if (!this.pageScrollEnabled || this.isNativeLock) {
+          return
+        }
+        //1216修改，规避起始边缘tab异常场景（双指右滑，选项卡异常）,22是测试观察取的经验值
+        if (index == 0 && Math.abs(extraInfo.currentOffset) < 22) {
+          Logger.debug(TAG, `onGestureSwipe,ignore，limit offset:${index},extraInfo:${JSON.stringify(extraInfo)}`)
+          return
+        }
+        this.emitTouchEvent("dragging");
+
+        let offset = 0;
+        let finalIndex = index;
+        if (extraInfo.currentOffset < 0) {
+          offset = Math.abs(extraInfo.currentOffset / this.descriptor.layoutMetrics.frame.size.width);
+        } else {
+          finalIndex = (index - 1) > 0 ? (index - 1) : 0;
+          offset = 1 - Math.abs(extraInfo.currentOffset / this.descriptor.layoutMetrics.frame.size.width);
+        }
+
+        if (offset > 1) {
+          offset = offset - 1;
+          finalIndex = finalIndex + 1;
+        } else if (offset < 0 && finalIndex >= 1) {
+          offset = offset + 1;
+          finalIndex = finalIndex - 1;
+        }
+
+        this.ctx.rnInstance.emitComponentEvent(
+          this.descriptor.tag,
+          PAGER_VIEW_TYPE,
+          {
+            type: "scroll",
+            position: finalIndex,
+            offset: offset
+          }
+        );
+      })
+    }
+  }
+}

package/harmony/pager_view/src/main/ets/RNCViewPagerManager.ets

@@ -0,0 +1,58 @@
+/**
+ * MIT License
+ *
+ * Copyright (C) 2023 Huawei Device Co., Ltd.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { RNOHContext,RNViewManager,Tag } from '@rnoh/react-native-openharmony';
+import {ViewPagerDescriptor} from './RNCViewPager';
+import Logger from './Logger';
+
+const TAG: string = "[RNOH] RNCViewPagerManager";
+
+export class RNCViewPagerManager extends RNViewManager{
+  protected page:number = 0;
+
+  constructor(
+    tag:Tag,
+    ctx:RNOHContext,
+    page:number
+  ) {
+    super(tag,ctx);
+    this.page = page
+  }
+
+  setPage(page:number){
+    this.page = page
+  }
+
+  public getActiveChildrenTags(): Tag[]{
+    const descriptor = (this.descriptorRegistry.getDescriptor(this.tag)) as ViewPagerDescriptor;
+    let page = this.page
+    Logger.debug(TAG,`descriptor:${JSON.stringify(descriptor)}`)
+    Logger.debug(TAG,`page:${JSON.stringify(page)}`)
+    if (page < 0 || page >= descriptor.childrenTags.length) {
+      console.error(`RNOH in RNCViewPagerManager,descriptor.childrenTags out-of-bounds`)
+      page = 0
+    }
+    return [descriptor.childrenTags[page]];
+  }
+}