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

package/lib/typescript/PagerView.d.ts

@@ -0,0 +1,70 @@
+import React from 'react';
+import type { NativeProps as PagerViewProps } from './PagerViewNativeComponent';
+import PagerViewView from './PagerViewNativeComponent';
+/**
+ * Container that allows to flip left and right between child views. Each
+ * child view of the `PagerView` will be treated as a separate page
+ * and will be stretched to fill the `PagerView`.
+ *
+ * It is important all children are `<View>`s and not composite components.
+ * You can set style properties like `padding` or `backgroundColor` for each
+ * child. It is also important that each child have a `key` prop.
+ *
+ * Example:
+ *
+ * ```
+ * render: function() {
+ *   return (
+ *     <PagerView
+ *       style={styles.PagerView}
+ *       initialPage={0}>
+ *       <View style={styles.pageStyle} key="1">
+ *         <Text>First page</Text>
+ *       </View>
+ *       <View style={styles.pageStyle} key="2">
+ *         <Text>Second page</Text>
+ *       </View>
+ *     </PagerView>
+ *   );
+ * }
+ *
+ * ...
+ *
+ * var styles = {
+ *   ...
+ *   PagerView: {
+ *     flex: 1
+ *   },
+ *   pageStyle: {
+ *     alignItems: 'center',
+ *     padding: 20,
+ *   }
+ * }
+ * ```
+ */
+export declare class PagerView extends React.Component<PagerViewProps> {
+    private isScrolling;
+    pagerView: React.ElementRef<typeof PagerViewView> | null;
+    private _onPageScroll;
+    private _onPageScrollStateChanged;
+    private _onPageSelected;
+    /**
+     * A helper function to scroll to a specific page in the PagerView.
+     * The transition between pages will be animated.
+     */
+    setPage: (selectedPage: number) => void;
+    /**
+     * A helper function to scroll to a specific page in the PagerView.
+     * The transition between pages will *not* be animated.
+     */
+    setPageWithoutAnimation: (selectedPage: number) => void;
+    /**
+     * A helper function to enable/disable scroll imperatively
+     * The recommended way is using the scrollEnabled prop, however, there might be a case where a
+     * imperative solution is more useful (e.g. for not blocking an animation)
+     */
+    setScrollEnabled: (scrollEnabled: boolean) => void;
+    private _onMoveShouldSetResponderCapture;
+    private get deducedLayoutDirection();
+    render(): JSX.Element;
+}

package/lib/typescript/PagerViewNativeComponent.d.ts

@@ -0,0 +1,36 @@
+import type * as React from 'react';
+import type { HostComponent, ViewProps } from 'react-native';
+import type { DirectEventHandler, Double, Int32, WithDefault } from 'react-native/Libraries/Types/CodegenTypes';
+export type OnPageScrollEventData = Readonly<{
+    position: Double;
+    offset: Double;
+}>;
+export type OnPageSelectedEventData = Readonly<{
+    position: Double;
+}>;
+export type OnPageScrollStateChangedEventData = Readonly<{
+    pageScrollState: 'idle' | 'dragging' | 'settling';
+}>;
+export interface NativeProps extends ViewProps {
+    scrollEnabled?: WithDefault<boolean, true>;
+    layoutDirection?: WithDefault<'ltr' | 'rtl', 'ltr'>;
+    initialPage?: Int32;
+    orientation?: WithDefault<'horizontal' | 'vertical', 'horizontal'>;
+    offscreenPageLimit?: Int32;
+    pageMargin?: Int32;
+    overScrollMode?: WithDefault<'auto' | 'always' | 'never', 'auto'>;
+    overdrag?: WithDefault<boolean, false>;
+    keyboardDismissMode?: WithDefault<'none' | 'on-drag', 'none'>;
+    onPageScroll?: DirectEventHandler<OnPageScrollEventData>;
+    onPageSelected?: DirectEventHandler<OnPageSelectedEventData>;
+    onPageScrollStateChanged?: DirectEventHandler<OnPageScrollStateChangedEventData>;
+}
+type PagerViewViewType = HostComponent<NativeProps>;
+export interface NativeCommands {
+    setPage: (viewRef: React.ElementRef<PagerViewViewType>, selectedPage: Int32) => void;
+    setPageWithoutAnimation: (viewRef: React.ElementRef<PagerViewViewType>, selectedPage: Int32) => void;
+    setScrollEnabledImperatively: (viewRef: React.ElementRef<PagerViewViewType>, scrollEnabled: boolean) => void;
+}
+export declare const Commands: NativeCommands;
+declare const _default: HostComponent<NativeProps>;
+export default _default;

package/lib/typescript/index.d.ts

@@ -0,0 +1,8 @@
+import type * as ReactNative from 'react-native';
+import { PagerView } from './PagerView';
+export default PagerView;
+import type { OnPageScrollEventData as PagerViewOnPageScrollEventData, OnPageSelectedEventData as PagerViewOnPageSelectedEventData, OnPageScrollStateChangedEventData as PageScrollStateChangedNativeEventData, NativeProps } from './PagerViewNativeComponent';
+export type { PagerViewOnPageScrollEventData, PagerViewOnPageSelectedEventData, PageScrollStateChangedNativeEventData, NativeProps as PagerViewProps, };
+export type PagerViewOnPageScrollEvent = ReactNative.NativeSyntheticEvent<PagerViewOnPageScrollEventData>;
+export type PagerViewOnPageSelectedEvent = ReactNative.NativeSyntheticEvent<PagerViewOnPageSelectedEventData>;
+export type PageScrollStateChangedNativeEvent = ReactNative.NativeSyntheticEvent<PageScrollStateChangedNativeEventData>;

package/lib/typescript/utils.d.ts

@@ -0,0 +1,2 @@
+import { ReactNode } from 'react';
+export declare const childrenWithOverriddenStyle: (children?: ReactNode) => JSX.Element[] | null | undefined;

package/package.json

@@ -0,0 +1,142 @@
+{
+  "name": "@react-native-ohos/react-native-pager-view",
+  "version": "6.2.4-rc.4",
+  "description": "React Native wrapper for Harmony ViewPager",
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "harmony": {
+    "alias":"react-native-pager-view",
+    "autolinking": {
+      "etsPackageClassName": "ViewPagerPackage",
+      "cppPackageClassName": "ViewPagerPackage",
+      "cmakeLibraryTargetName": "rnoh_pager_view",
+      "ohPackageName": "@react-native-ohos/react-native-pager-view"
+    }
+  },
+  "files": [
+    "src",
+    "lib",
+    "harmony",
+    "!lib/typescript/example",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!harmony/oh_modules",
+    "!harmony/**/build",
+    "!harmony/**/oh_modules"
+  ],
+  "scripts": {
+    "test": "jest",
+    "typescript": "tsc --noEmit",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "prepare": "bob build",
+    "release": "release-it",
+    "releaseNext": "release-it --npm.tag=newarch --preRelease=rc"
+  },
+  "keywords": [
+    "react-native",
+    "harmony"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://gitcode.com/openharmony-sig/rntpc_react-native-pager-view.git"
+  },
+  "author": "troZee <hello@callstack.com> (https://github.com/callstack)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://gitcode.com/openharmony-sig/rntpc_react-native-pager-view/issues"
+  },
+  "homepage": "https://gitcode.com/openharmony-sig/rntpc_react-native-pager-view#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+     "access": "public"
+  },
+  "dependencies": {
+    "react-native-pager-view": "6.2.2 - 6.2.3"
+  },
+  "devDependencies": {
+    "@babel/eslint-parser": "^7.18.2",
+    "@react-native-community/eslint-config": "^3.0.2",
+    "@release-it/conventional-changelog": "^2.0.0",
+    "@types/jest": "^28.1.2",
+    "@types/react": "18.0.29",
+    "@types/react-native": "0.70.0",
+    "eslint": "^8.4.1",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "jest": "^28.1.1",
+    "pod-install": "^0.1.0",
+    "prettier": "^2.0.5",
+    "react": "18.1.0",
+    "react-native": "0.70.0",
+    "react-native-builder-bob": "^0.18.3",
+    "release-it": "^14.2.2",
+    "typescript": "^4.5.2",
+    "@react-native/eslint-config": "^0.72.2",
+    "@react-native/metro-config": "^0.72.11",
+    "@tsconfig/react-native": "^3.0.0",
+    "metro-react-native-babel-preset": "0.76.8"
+  },
+  "resolutions": {
+    "@types/react": "18.0.29"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "eslintConfig": {
+    "root": true,
+    "parser": "@babel/eslint-parser",
+    "extends": [
+      "@react-native-community",
+      "prettier"
+    ],
+    "rules": {
+      "prettier/prettier": [
+        "error",
+        {
+          "quoteProps": "consistent",
+          "singleQuote": true,
+          "tabWidth": 2,
+          "trailingComma": "es5",
+          "useTabs": false
+        }
+      ]
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  }
+}

package/src/PagerView.tsx

@@ -0,0 +1,163 @@
+import React from 'react';
+import { Platform, Keyboard } from 'react-native';
+import { I18nManager } from 'react-native';
+import type {
+  OnPageScrollEventData,
+  OnPageScrollStateChangedEventData,
+  OnPageSelectedEventData,
+} from './PagerViewNativeComponent';
+import type * as ReactNative from 'react-native';
+
+import type { NativeProps as PagerViewProps } from './PagerViewNativeComponent';
+import { childrenWithOverriddenStyle } from './utils';
+import PagerViewView, {
+  Commands as PagerViewCommands,
+} from './PagerViewNativeComponent';
+
+/**
+ * Container that allows to flip left and right between child views. Each
+ * child view of the `PagerView` will be treated as a separate page
+ * and will be stretched to fill the `PagerView`.
+ *
+ * It is important all children are `<View>`s and not composite components.
+ * You can set style properties like `padding` or `backgroundColor` for each
+ * child. It is also important that each child have a `key` prop.
+ *
+ * Example:
+ *
+ * ```
+ * render: function() {
+ *   return (
+ *     <PagerView
+ *       style={styles.PagerView}
+ *       initialPage={0}>
+ *       <View style={styles.pageStyle} key="1">
+ *         <Text>First page</Text>
+ *       </View>
+ *       <View style={styles.pageStyle} key="2">
+ *         <Text>Second page</Text>
+ *       </View>
+ *     </PagerView>
+ *   );
+ * }
+ *
+ * ...
+ *
+ * var styles = {
+ *   ...
+ *   PagerView: {
+ *     flex: 1
+ *   },
+ *   pageStyle: {
+ *     alignItems: 'center',
+ *     padding: 20,
+ *   }
+ * }
+ * ```
+ */
+
+export class PagerView extends React.Component<PagerViewProps> {
+  private isScrolling = false;
+  pagerView: React.ElementRef<typeof PagerViewView> | null = null;
+
+  private _onPageScroll = (
+    e: ReactNative.NativeSyntheticEvent<OnPageScrollEventData>
+  ) => {
+    if (this.props.onPageScroll) {
+      this.props.onPageScroll(e);
+    }
+
+    // Not implemented on iOS yet
+    // @ts-ignore
+    if (Platform.OS === 'android' || Platform.OS === 'harmony') {
+      if (this.props.keyboardDismissMode === 'on-drag') {
+        Keyboard.dismiss();
+      }
+    }
+  };
+
+  private _onPageScrollStateChanged = (
+    e: ReactNative.NativeSyntheticEvent<OnPageScrollStateChangedEventData>
+  ) => {
+    if (this.props.onPageScrollStateChanged) {
+      this.props.onPageScrollStateChanged(e);
+    }
+    this.isScrolling = e.nativeEvent.pageScrollState === 'dragging';
+  };
+
+  private _onPageSelected = (
+    e: ReactNative.NativeSyntheticEvent<OnPageSelectedEventData>
+  ) => {
+    if (this.props.onPageSelected) {
+      this.props.onPageSelected(e);
+    }
+  };
+
+  /**
+   * A helper function to scroll to a specific page in the PagerView.
+   * The transition between pages will be animated.
+   */
+  public setPage = (selectedPage: number) => {
+    if (this.pagerView) {
+      PagerViewCommands.setPage(this.pagerView, selectedPage);
+    }
+  };
+
+  /**
+   * A helper function to scroll to a specific page in the PagerView.
+   * The transition between pages will *not* be animated.
+   */
+  public setPageWithoutAnimation = (selectedPage: number) => {
+    if (this.pagerView) {
+      PagerViewCommands.setPageWithoutAnimation(this.pagerView, selectedPage);
+    }
+  };
+
+  /**
+   * A helper function to enable/disable scroll imperatively
+   * The recommended way is using the scrollEnabled prop, however, there might be a case where a
+   * imperative solution is more useful (e.g. for not blocking an animation)
+   */
+  public setScrollEnabled = (scrollEnabled: boolean) => {
+    if (this.pagerView) {
+      PagerViewCommands.setScrollEnabledImperatively(
+        this.pagerView,
+        scrollEnabled
+      );
+    }
+  };
+
+  private _onMoveShouldSetResponderCapture = () => {
+    return this.isScrolling;
+  };
+
+  private get deducedLayoutDirection() {
+    if (
+      !this.props.layoutDirection ||
+      //@ts-ignore fix it
+      this.props.layoutDirection === 'locale'
+    ) {
+      return I18nManager.isRTL ? 'rtl' : 'ltr';
+    } else {
+      return this.props.layoutDirection;
+    }
+  }
+
+  render() {
+    return (
+      <PagerViewView
+        {...this.props}
+        ref={(ref) => {
+          this.pagerView = ref;
+        }}
+        style={this.props.style}
+        layoutDirection={this.deducedLayoutDirection}
+        onPageScroll={this._onPageScroll}
+        onPageScrollStateChanged={this._onPageScrollStateChanged}
+        onPageSelected={this._onPageSelected}
+        onMoveShouldSetResponderCapture={this._onMoveShouldSetResponderCapture}
+        children={childrenWithOverriddenStyle(this.props.children)}
+      />
+    );
+  }
+}

package/src/PagerViewNativeComponent.ts

@@ -0,0 +1,67 @@
+import type * as React from 'react';
+import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+import type { HostComponent, ViewProps } from 'react-native';
+import type {
+  DirectEventHandler,
+  Double,
+  Int32,
+  WithDefault,
+} from 'react-native/Libraries/Types/CodegenTypes';
+
+export type OnPageScrollEventData = Readonly<{
+  position: Double;
+  offset: Double;
+}>;
+
+export type OnPageSelectedEventData = Readonly<{
+  position: Double;
+}>;
+
+export type OnPageScrollStateChangedEventData = Readonly<{
+  pageScrollState: 'idle' | 'dragging' | 'settling';
+}>;
+
+export interface NativeProps extends ViewProps {
+  scrollEnabled?: WithDefault<boolean, true>;
+  layoutDirection?: WithDefault<'ltr' | 'rtl', 'ltr'>;
+  initialPage?: Int32;
+  orientation?: WithDefault<'horizontal' | 'vertical', 'horizontal'>;
+  offscreenPageLimit?: Int32;
+  pageMargin?: Int32;
+  overScrollMode?: WithDefault<'auto' | 'always' | 'never', 'auto'>;
+  overdrag?: WithDefault<boolean, false>;
+  keyboardDismissMode?: WithDefault<'none' | 'on-drag', 'none'>;
+  onPageScroll?: DirectEventHandler<OnPageScrollEventData>;
+  onPageSelected?: DirectEventHandler<OnPageSelectedEventData>;
+  onPageScrollStateChanged?: DirectEventHandler<OnPageScrollStateChangedEventData>;
+}
+
+type PagerViewViewType = HostComponent<NativeProps>;
+
+export interface NativeCommands {
+  setPage: (
+    viewRef: React.ElementRef<PagerViewViewType>,
+    selectedPage: Int32
+  ) => void;
+  setPageWithoutAnimation: (
+    viewRef: React.ElementRef<PagerViewViewType>,
+    selectedPage: Int32
+  ) => void;
+  setScrollEnabledImperatively: (
+    viewRef: React.ElementRef<PagerViewViewType>,
+    scrollEnabled: boolean
+  ) => void;
+}
+
+export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: [
+    'setPage',
+    'setPageWithoutAnimation',
+    'setScrollEnabledImperatively',
+  ],
+});
+
+export default codegenNativeComponent<NativeProps>(
+  'RNCViewPager'
+) as HostComponent<NativeProps>;

package/src/index.tsx

@@ -0,0 +1,26 @@
+import type * as ReactNative from 'react-native';
+import { PagerView } from './PagerView';
+export default PagerView;
+
+import type {
+  OnPageScrollEventData as PagerViewOnPageScrollEventData,
+  OnPageSelectedEventData as PagerViewOnPageSelectedEventData,
+  OnPageScrollStateChangedEventData as PageScrollStateChangedNativeEventData,
+  NativeProps,
+} from './PagerViewNativeComponent';
+
+export type {
+  PagerViewOnPageScrollEventData,
+  PagerViewOnPageSelectedEventData,
+  PageScrollStateChangedNativeEventData,
+  NativeProps as PagerViewProps,
+};
+
+export type PagerViewOnPageScrollEvent =
+  ReactNative.NativeSyntheticEvent<PagerViewOnPageScrollEventData>;
+
+export type PagerViewOnPageSelectedEvent =
+  ReactNative.NativeSyntheticEvent<PagerViewOnPageSelectedEventData>;
+
+export type PageScrollStateChangedNativeEvent =
+  ReactNative.NativeSyntheticEvent<PageScrollStateChangedNativeEventData>;

package/src/utils.tsx

@@ -0,0 +1,19 @@
+import React, { Children, ReactNode } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+export const childrenWithOverriddenStyle = (children?: ReactNode) => {
+  return Children.map(children, (child) => {
+    const element = child as React.ReactElement;
+    return (
+      // Add a wrapper to ensure layout is calculated correctly
+      <View style={StyleSheet.absoluteFill} collapsable={false}>
+        {/* @ts-ignore */}
+        {React.cloneElement(element, {
+          ...element.props,
+          // Override styles so that each page will fill the parent.
+          style: [element.props.style, StyleSheet.absoluteFill],
+        })}
+      </View>
+    );
+  });
+};