@onekeyfe/react-native-pager-view 1.1.35

package/package.json

@@ -0,0 +1,101 @@
+{
+  "name": "@onekeyfe/react-native-pager-view",
+  "version": "1.1.35",
+  "description": "React Native wrapper for Android and iOS ViewPager",
+  "source": "./src/index.tsx",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "react-native-pager-view.podspec",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "clean": "del-cli lib",
+    "prepare": "rm -rf lib && bob build",
+    "typecheck": "tsc -b",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "jest",
+    "release": "yarn prepare && npm whoami && npm publish --access public"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nicholasxuu/app-modules.git",
+    "directory": "native-views/react-native-pager-view"
+  },
+  "author": "OneKey",
+  "homepage": "https://github.com/nicholasxuu/app-modules#readme",
+  "license": "MIT",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.0",
+    "react": "19.2.0",
+    "react-native": "0.83.0",
+    "react-native-builder-bob": "^0.40.13",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "codegenConfig": {
+    "name": "pagerview",
+    "type": "components",
+    "jsSrcsDir": "src",
+    "android": {
+      "javaPackageName": "com.reactnativepagerview"
+    },
+    "ios": {
+      "componentProvider": {
+        "RNCViewPager": "RNCPagerViewComponentView"
+      }
+    }
+  }
+}

package/react-native-pager-view.podspec

@@ -0,0 +1,20 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "react-native-pager-view"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.ios.deployment_target = "15.1"
+  s.source       = { :git => "https://github.com/nicholasxuu/app-modules.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm}"
+
+  install_modules_dependencies(s)
+
+end

package/src/PagerView.tsx

@@ -0,0 +1,170 @@
+import React from 'react';
+import { Platform, Keyboard } from 'react-native';
+import { I18nManager } from 'react-native';
+import type * as ReactNative from 'react-native';
+
+import {
+  childrenWithOverriddenStyle,
+} from './utils';
+
+import PagerViewNativeComponent, {
+  Commands as PagerViewNativeCommands,
+  OnPageScrollEventData,
+  OnPageScrollStateChangedEventData,
+  OnPageSelectedEventData,
+  NativeProps,
+} 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<NativeProps> {
+  private isScrolling = false;
+  pagerView: React.ElementRef<typeof PagerViewNativeComponent> | null = null;
+
+
+  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;
+    }
+  }
+
+  private _onPageScroll = (
+    e: ReactNative.NativeSyntheticEvent<OnPageScrollEventData>
+  ) => {
+    if (this.props.onPageScroll) {
+      this.props.onPageScroll(e);
+    }
+
+    // Not implemented on iOS yet
+    if (Platform.OS === 'android') {
+      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);
+    }
+  };
+
+  private _onMoveShouldSetResponderCapture = () => {
+    return this.isScrolling;
+  };
+
+  /**
+   * 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) {
+      PagerViewNativeCommands.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) {
+      PagerViewNativeCommands.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) {
+      PagerViewNativeCommands.setScrollEnabledImperatively(
+        this.pagerView,
+        scrollEnabled
+      );
+    }
+  };
+
+  render() {
+      return (
+        <PagerViewNativeComponent
+          {...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,82 @@
+import type * as React from 'react';
+import type { HostComponent, ViewProps } from 'react-native';
+import codegenNativeCommands from 'react-native/Libraries/Utilities/codegenNativeCommands';
+import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';
+
+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'>;
+  /**
+  * Controls the sensitivity of scroll gestures on Android.
+  * Higher values make scrolling less sensitive.
+  * Valid range: 2 - 8
+  * @platform android
+  */
+  scrollSensitivity?: Int32;
+  /**
+  * When true on an inner PagerView, enables gesture coordination with
+  * a parent (outer) PagerView. At sub-tab boundaries the inner pager's
+  * gesture recognizer will not begin, allowing the outer pager to take over.
+  * @platform ios
+  */
+  nestedScrollEnabled?: WithDefault<boolean, false>;
+  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/codegen-types.d.ts

@@ -0,0 +1,28 @@
+declare module 'react-native/Libraries/Types/CodegenTypes' {
+  import type { NativeSyntheticEvent } from 'react-native';
+
+  export type Double = number;
+  export type Float = number;
+  export type Int32 = number;
+  export type WithDefault<T, V> = T;
+  export type DirectEventHandler<T> = (
+    event: NativeSyntheticEvent<T>
+  ) => void;
+  export type BubblingEventHandler<T> = (
+    event: NativeSyntheticEvent<T>
+  ) => void;
+}
+
+declare module 'react-native/Libraries/Utilities/codegenNativeComponent' {
+  import type { HostComponent } from 'react-native';
+
+  export default function codegenNativeComponent<P>(
+    componentName: string,
+    options?: {
+      interfaceOnly?: boolean;
+      paperComponentName?: string;
+      paperComponentNameDeprecated?: string;
+      excludedPlatforms?: ReadonlyArray<'iOS' | 'android'>;
+    }
+  ): HostComponent<P>;
+}

package/src/index.tsx

@@ -0,0 +1,27 @@
+import type * as ReactNative from 'react-native';
+import { PagerView } from './PagerView';
+export default PagerView;
+export * from './usePagerView';
+
+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/usePagerView.ts

@@ -0,0 +1,148 @@
+import type * as ReactNative from 'react-native';
+import type {
+  OnPageScrollEventData as PagerViewOnPageScrollEventData,
+  OnPageSelectedEventData as PagerViewOnPageSelectedEventData,
+  OnPageScrollStateChangedEventData as PageScrollStateChangedNativeEventData,
+} from './PagerViewNativeComponent';
+
+type PageScrollStateChangedNativeEvent =
+  ReactNative.NativeSyntheticEvent<PageScrollStateChangedNativeEventData>;
+
+import { PagerView } from './PagerView';
+
+import { Animated } from 'react-native';
+import { useCallback, useMemo, useRef, useState } from 'react';
+
+export type UsePagerViewProps = ReturnType<typeof usePagerView>;
+
+const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);
+
+type UsePagerViewParams = {
+  pagesAmount: number;
+};
+
+export function usePagerView(
+  { pagesAmount }: UsePagerViewParams = { pagesAmount: 0 }
+) {
+  const ref = useRef<PagerView>(null);
+  const [pages, setPages] = useState<number[]>(
+    new Array(pagesAmount).fill('').map((_v, index) => index)
+  );
+  const [activePage, setActivePage] = useState(0);
+  const [isAnimated, setIsAnimated] = useState(true);
+  const [overdragEnabled, setOverdragEnabled] = useState(false);
+  const [scrollEnabled, setScrollEnabled] = useState(true);
+  const [scrollState, setScrollState] = useState('idle');
+  const [progress, setProgress] = useState({ position: 0, offset: 0 });
+  const onPageScrollOffset = useRef(new Animated.Value(0)).current;
+  const onPageScrollPosition = useRef(new Animated.Value(0)).current;
+  const onPageSelectedPosition = useRef(new Animated.Value(0)).current;
+
+  const setPage = useCallback(
+    (page: number) =>
+      isAnimated
+        ? ref.current?.setPage(page)
+        : ref.current?.setPageWithoutAnimation(page),
+    [isAnimated]
+  );
+
+  const addPage = useCallback(() => {
+    setPages((prevPages) => {
+      return [...prevPages, prevPages.length];
+    });
+  }, []);
+
+  const removePage = useCallback(() => {
+    setPages((prevPages) => {
+      if (prevPages.length === 1) {
+        return prevPages;
+      }
+      return prevPages.slice(0, prevPages.length - 1);
+    });
+  }, []);
+
+  const toggleAnimation = useCallback(
+    () => setIsAnimated((animated) => !animated),
+    []
+  );
+
+  const toggleScroll = useCallback(
+    () => setScrollEnabled((enabled) => !enabled),
+    []
+  );
+
+  const toggleOverdrag = useCallback(
+    () => setOverdragEnabled((enabled) => !enabled),
+    []
+  );
+
+  const onPageScroll = useMemo(
+    () =>
+      Animated.event<PagerViewOnPageScrollEventData>(
+        [
+          {
+            nativeEvent: {
+              offset: onPageScrollOffset,
+              position: onPageScrollPosition,
+            },
+          },
+        ],
+        {
+          listener: ({ nativeEvent: { offset, position } }) => {
+            setProgress({
+              position,
+              offset,
+            });
+          },
+          useNativeDriver: true,
+        }
+      ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  const onPageSelected = useMemo(
+    () =>
+      Animated.event<PagerViewOnPageSelectedEventData>(
+        [{ nativeEvent: { position: onPageSelectedPosition } }],
+        {
+          listener: ({ nativeEvent: { position } }) => {
+            setActivePage(position);
+          },
+          useNativeDriver: true,
+        }
+      ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  const onPageScrollStateChanged = useCallback(
+    (e: PageScrollStateChangedNativeEvent) => {
+      setScrollState(e.nativeEvent.pageScrollState);
+    },
+    []
+  );
+
+  return {
+    ref,
+    activePage,
+    isAnimated,
+    pages,
+    scrollState,
+    scrollEnabled,
+    progress,
+    overdragEnabled,
+    setPage,
+    addPage,
+    removePage,
+    toggleScroll,
+    toggleAnimation,
+    setProgress,
+    onPageScroll,
+    onPageSelected,
+    onPageScrollStateChanged,
+    toggleOverdrag,
+    AnimatedPagerView,
+    PagerView,
+  };
+}

package/src/utils.tsx

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