@react-native-ohos/react-native-pager-view 6.7.2-rc.1

package/src/PagerView.tsx

@@ -0,0 +1,171 @@
+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
+    // @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);
+    }
+  };
+
+  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,68 @@
+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'>;
+  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,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,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>
+    );
+  });
+};