support OpenHarmony

packages/react-native-tab-view/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-native-tab-view",
   "description": "Tab view component for React Native",
-  "version": "3.5.2",
+  "version": "3.5.2-0.0.1",
   "keywords": [
     "react-native-component",
     "react-component",
@@ -42,12 +42,13 @@
     "use-latest-callback": "^0.1.5"
   },
   "devDependencies": {
+    "@types/react": "^18.2.39",
     "del-cli": "^5.0.0",
     "react": "18.2.0",
     "react-native": "0.71.8",
     "react-native-builder-bob": "^0.20.4",
     "react-native-pager-view": "6.1.2",
-    "typescript": "^4.9.4"
+    "typescript": "^5.3.2"
   },
   "peerDependencies": {
     "react": "*",

packages/react-native-tab-view/src/Pager.harmony.tsx

@@ -0,0 +1 @@
+export { PagerViewAdapter as Pager } from './PagerViewAdapter';

packages/react-native-tab-view/src/PagerViewAdapter.harmony.tsx

@@ -0,0 +1,180 @@
+import * as React from 'react';
+import { Animated, Keyboard, StyleSheet } from 'react-native';
+import ViewPager, {
+  PageScrollStateChangedNativeEvent,
+} from 'react-native-pager-view';
+
+import type {
+  EventEmitterProps,
+  Listener,
+  NavigationState,
+  PagerProps,
+  Route,
+} from './types';
+import { useAnimatedValue } from './useAnimatedValue';
+
+const AnimatedViewPager = Animated.createAnimatedComponent(ViewPager);
+
+type Props<T extends Route> = PagerProps & {
+  onIndexChange: (index: number) => void;
+  navigationState: NavigationState<T>;
+  children: (
+    props: EventEmitterProps & {
+      // Animated value which represents the state of current index
+      // It can include fractional digits as it represents the intermediate value
+      position: Animated.AnimatedInterpolation<number>;
+      // Function to actually render the content of the pager
+      // The parent component takes care of rendering
+      render: (children: React.ReactNode) => React.ReactNode;
+      // Callback to call when switching the tab
+      // The tab switch animation is performed even if the index in state is unchanged
+      jumpTo: (key: string) => void;
+    }
+  ) => React.ReactElement;
+};
+
+export function PagerViewAdapter<T extends Route>({
+  keyboardDismissMode = 'auto',
+  swipeEnabled = true,
+  navigationState,
+  onIndexChange,
+  onSwipeStart,
+  onSwipeEnd,
+  children,
+  style,
+  animationEnabled,
+  ...rest
+}: Props<T>) {
+  const { index } = navigationState;
+
+  const listenersRef = React.useRef<Listener[]>([]);
+
+  const pagerRef = React.useRef<ViewPager>();
+  const indexRef = React.useRef<number>(index);
+  const navigationStateRef = React.useRef(navigationState);
+
+  const position = useAnimatedValue(index);
+  const offset = useAnimatedValue(0);
+
+  React.useEffect(() => {
+    navigationStateRef.current = navigationState;
+  });
+
+  const jumpTo = React.useCallback(
+    (key: string) => {
+      const index = navigationStateRef.current.routes.findIndex(
+        (route: { key: string }) => route.key === key
+      );
+
+      if (animationEnabled) {
+        pagerRef.current?.setPage(index);
+      } else {
+        pagerRef.current?.setPageWithoutAnimation(index);
+        position.setValue(index);
+      }
+    },
+    [animationEnabled, position]
+  );
+
+  React.useEffect(() => {
+    if (keyboardDismissMode === 'auto') {
+      Keyboard.dismiss();
+    }
+
+    if (indexRef.current !== index) {
+      if (animationEnabled) {
+        pagerRef.current?.setPage(index);
+      } else {
+        pagerRef.current?.setPageWithoutAnimation(index);
+        position.setValue(index);
+      }
+    }
+  }, [keyboardDismissMode, index, animationEnabled, position]);
+
+  const onPageScrollStateChanged = (
+    state: PageScrollStateChangedNativeEvent
+  ) => {
+    const { pageScrollState } = state.nativeEvent;
+
+    switch (pageScrollState) {
+      case 'idle':
+        onSwipeEnd?.();
+        return;
+      case 'dragging': {
+        const subscription = offset.addListener(({ value }) => {
+          const next =
+            index + (value > 0 ? Math.ceil(value) : Math.floor(value));
+
+          if (next !== index) {
+            listenersRef.current.forEach((listener) => listener(next));
+          }
+
+          offset.removeListener(subscription);
+        });
+
+        onSwipeStart?.();
+        return;
+      }
+    }
+  };
+
+  const addEnterListener = React.useCallback((listener: Listener) => {
+    listenersRef.current.push(listener);
+
+    return () => {
+      const index = listenersRef.current.indexOf(listener);
+
+      if (index > -1) {
+        listenersRef.current.splice(index, 1);
+      }
+    };
+  }, []);
+
+  const memoizedPosition = React.useMemo(
+    () => Animated.add(position, offset),
+    [offset, position]
+  );
+
+  return children({
+    position: memoizedPosition,
+    addEnterListener,
+    jumpTo,
+    render: (children) => (
+      <AnimatedViewPager
+        {...rest}
+        ref={pagerRef}
+        style={[styles.container, style]}
+        initialPage={index}
+        keyboardDismissMode={
+          keyboardDismissMode === 'auto' ? 'on-drag' : keyboardDismissMode
+        }
+        onPageScroll={Animated.event(
+          [
+            {
+              nativeEvent: {
+                position: position,
+                offset: offset,
+              },
+            },
+          ],
+          { useNativeDriver: false }
+        )}
+        onPageSelected={(e) => {
+          const index = e.nativeEvent.position;
+          indexRef.current = index;
+          onIndexChange(index);
+        }}
+        onPageScrollStateChanged={onPageScrollStateChanged}
+        scrollEnabled={swipeEnabled}
+      >
+        {children}
+      </AnimatedViewPager>
+    ),
+  });
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

packages/react-native-tab-view/src/SceneView.tsx

@@ -54,7 +54,7 @@ export function SceneView<T extends Route>({
     };
 
     let unsubscribe: (() => void) | undefined;
-    let timer: number;
+    let timer: NodeJS.Timeout;
 
     if (lazy && isLoading) {
       // If lazy mode is enabled, listen to when we enter screens

packages/react-native-tab-view/tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "../../tsconfig",
   "references": [],
   "compilerOptions": {
-    "outDir": "./lib/typescript"
+    "outDir": "./lib/typescript",
+    "ignoreDeprecations": "5.0"
   }
 }