fix: types

src/create-collapsible-tabs.web.tsx

@@ -126,12 +126,14 @@ function CollapsibleHeaderTabView<T extends Route>(
       </View>
     );
   };
-
+  // @ts-ignore
   const { updateSceneInfo } = useSceneInfo(curIndexValue);
   return (
     <HeaderTabContext.Provider
       value={{
+        // @ts-ignore
         shareAnimatedValue,
+        // @ts-ignore
         headerTrans,
         tabbarHeight,
         expectHeight: 0,
@@ -140,10 +142,13 @@ function CollapsibleHeaderTabView<T extends Route>(
         overflowPull: 0,
         pullExtendedCoefficient: 0,
         refHasChanged: () => false,
+        // @ts-ignore
         curIndexValue,
         minHeaderHeight,
         updateSceneInfo,
+        // @ts-ignore
         isSlidingHeader,
+        // @ts-ignore
         isStartRefreshing,
         scrollStickyHeaderHeight: 0,
         scrollViewPaddingTop: 0,

src/gesture-container.tsx

@@ -1,18 +1,11 @@
 import React, {
-  ComponentProps,
   useCallback,
   useEffect,
   useImperativeHandle,
   useMemo,
   useState,
 } from "react";
-import {
-  Dimensions,
-  LayoutChangeEvent,
-  StyleSheet,
-  View,
-  ViewProps,
-} from "react-native";
+import { Dimensions, LayoutChangeEvent, StyleSheet, View } from "react-native";
 
 import {
   Gesture,
@@ -24,7 +17,6 @@ import Animated, {
   Extrapolation,
   interpolate,
   runOnJS,
-  runOnUI,
   useAnimatedReaction,
   useAnimatedStyle,
   useDerivedValue,

src/hooks/use-refresh-value.tsx

@@ -1,10 +1,11 @@
-import Animated, {
+import {
   interpolate,
   useDerivedValue,
+  SharedValue,
 } from "react-native-reanimated";
 
 export const useRefreshDerivedValue = (
-  translateYValue: Animated.SharedValue<number>,
+  translateYValue: SharedValue<number>,
   {
     refreshHeight,
     overflowPull,
@@ -13,7 +14,7 @@ export const useRefreshDerivedValue = (
   }: {
     refreshHeight: number;
     overflowPull: number;
-    animatedValue: Animated.SharedValue<number>;
+    animatedValue: SharedValue<number>;
     pullExtendedCoefficient: number;
   }
 ) => {

src/hooks/use-scene-info.tsx

@@ -1,18 +1,19 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import { useCallback, useEffect, useState } from "react";
 
-import Animated, {
+import {
   runOnJS,
   useAnimatedReaction,
   useSharedValue,
+  SharedValue,
 } from "react-native-reanimated";
 
 import type { UpdateSceneInfoParams } from "../types";
 
-export const useSceneInfo = (curIndexValue: Animated.SharedValue<number>) => {
+export const useSceneInfo = (curIndexValue: SharedValue<number>) => {
   const sceneIsReady = useSharedValue<{ [index: number]: boolean }>({});
   const [childScrollYTrans, setChildScrollYTrans] = useState<{
-    [index: number]: Animated.SharedValue<number>;
+    [index: number]: SharedValue<number>;
   }>({});
   const [childScrollRef, setChildScrollRef] = useState<{
     [index: number]: any;

src/refresh-control.tsx

@@ -6,6 +6,7 @@ import Animated, {
   useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
+  SharedValue,
 } from "react-native-reanimated";
 
 import { useRefreshDerivedValue } from "./hooks";
@@ -15,10 +16,10 @@ type RefreshControlContainerProps = {
   top: number;
   refreshHeight: number;
   overflowPull: number;
-  opacityValue: Animated.SharedValue<number>;
-  refreshValue: Animated.SharedValue<number>;
-  isRefreshing: Animated.SharedValue<boolean>;
-  isRefreshingWithAnimation: Animated.SharedValue<boolean>;
+  opacityValue: SharedValue<number>;
+  refreshValue: SharedValue<number>;
+  isRefreshing: SharedValue<boolean>;
+  isRefreshingWithAnimation: SharedValue<boolean>;
   pullExtendedCoefficient: number;
   renderContent?: (refreshProps: RefreshControlProps) => React.ReactElement;
   refreshControlColor?: string;

src/scene.tsx

@@ -38,7 +38,6 @@ export function SceneComponent<P extends object>({
     shareAnimatedValue,
     headerHeight,
     expectHeight,
-    curIndexValue,
     refHasChanged,
     updateSceneInfo,
     scrollViewPaddingTop,
@@ -73,21 +72,21 @@ export function SceneComponent<P extends object>({
         runOnJS(propOnScroll as any)({ nativeEvent: e });
       }
     },
-    onBeginDrag: (e) => {
+    onBeginDrag: () => {
       if (disableBounces) {
         disableBounces.value = true;
       }
-      console.log("onBeginDrag");
-    },
-    onEndDrag: (e) => {
-      console.log("onEndDrag");
-    },
-    onMomentumEnd: () => {
-      console.log("onMomentumEnd");
-    },
-    onMomentumBegin: () => {
-      console.log("onMomentumBegin");
+      // console.log("onBeginDrag");
     },
+    // onEndDrag: (e) => {
+    //   console.log("onEndDrag");
+    // },
+    // onMomentumEnd: () => {
+    //   console.log("onMomentumEnd");
+    // },
+    // onMomentumBegin: () => {
+    //   console.log("onMomentumBegin");
+    // },
   });
   // adjust the scene size
   const _onContentSizeChange = useCallback(

src/types.tsx

@@ -3,7 +3,7 @@ import type { ComponentClass } from "react";
 import type { ScrollViewProps } from "react-native";
 
 import type { NativeGesture } from "react-native-gesture-handler";
-import type Animated from "react-native-reanimated";
+import type { SharedValue } from "react-native-reanimated";
 import type {
   TabViewProps,
   Route as TabViewRoute,
@@ -27,8 +27,8 @@ export enum RefreshTypeEnum {
 export type CollapsibleHeaderProps<T extends Route> = {
   initHeaderHeight?: number;
   renderScrollHeader?: () => React.ReactElement | null;
-  overridenShareAnimatedValue?: Animated.SharedValue<number>;
-  overridenTranslateYValue?: Animated.SharedValue<number>;
+  overridenShareAnimatedValue?: SharedValue<number>;
+  overridenTranslateYValue?: SharedValue<number>;
   initTabbarHeight?: number;
   minHeaderHeight?: number;
   overflowHeight?: number;
@@ -42,8 +42,8 @@ export type CollapsibleHeaderProps<T extends Route> = {
   refreshHeight?: number;
   overflowPull?: number;
   pullExtendedCoefficient?: number;
-  animationHeaderPosition?: Animated.SharedValue<number>;
-  animationHeaderHeight?: Animated.SharedValue<number>;
+  animationHeaderPosition?: SharedValue<number>;
+  animationHeaderHeight?: SharedValue<number>;
   panHeaderMaxOffset?: number;
   onPullEnough?: () => void;
   refreshControlColor?: string;
@@ -71,9 +71,9 @@ export type GestureContainerProps<T extends Route> = Pick<
   };
 
 export interface RefreshControlProps {
-  refreshValue: Animated.SharedValue<number>;
-  refreshType: Animated.SharedValue<RefreshTypeEnum>;
-  progress: Animated.SharedValue<number>;
+  refreshValue: SharedValue<number>;
+  refreshType: SharedValue<RefreshTypeEnum>;
+  progress: SharedValue<number>;
   refreshControlColor?: string;
 }
 export type SceneProps<P extends object> = P & {
@@ -86,7 +86,7 @@ export type SceneProps<P extends object> = P & {
 export type UpdateSceneInfoParams = {
   scrollRef: any;
   index: number;
-  scrollY: Animated.SharedValue<number>;
+  scrollY: SharedValue<number>;
 };
 
 export type ScrollableView<T> = ComponentClass<T>;
@@ -97,26 +97,26 @@ export type ForwardRefType<T> =
   | null;
 
 export type GesturePanContext = {
-  startY: Animated.SharedValue<number>;
-  basyY: Animated.SharedValue<number>;
+  startY: SharedValue<number>;
+  basyY: SharedValue<number>;
 };
 export type TabHeaderContext = {
-  isSlidingHeader: Animated.SharedValue<boolean>;
-  shareAnimatedValue: Animated.SharedValue<number>;
-  isStartRefreshing: Animated.SharedValue<boolean>;
+  isSlidingHeader: SharedValue<boolean>;
+  shareAnimatedValue: SharedValue<number>;
+  isStartRefreshing: SharedValue<boolean>;
   minHeaderHeight: number;
   tabbarHeight: number;
   headerHeight: number;
   scrollStickyHeaderHeight: number;
   refreshHeight: number;
   overflowPull: number;
   pullExtendedCoefficient: number;
-  headerTrans: Animated.SharedValue<number>;
+  headerTrans: SharedValue<number>;
   expectHeight: number;
   refHasChanged: (ref: NativeGesture) => void;
-  curIndexValue: Animated.SharedValue<number>;
+  curIndexValue: SharedValue<number>;
   updateSceneInfo: (e: UpdateSceneInfoParams) => void;
   scrollViewPaddingTop: number;
-  animatedScrollableState: Animated.SharedValue<SCROLLABLE_STATE>;
-  disableBounces?: Animated.SharedValue<boolean>;
+  animatedScrollableState: SharedValue<SCROLLABLE_STATE>;
+  disableBounces?: SharedValue<boolean>;
 } | null;

src/utils.tsx

@@ -1,9 +1,10 @@
 import { Platform } from "react-native";
 
-import Animated, {
+import {
   runOnJS,
   scrollTo,
   withTiming,
+  SharedValue,
 } from "react-native-reanimated";
 
 export function _ScrollTo(ref: any, x: number, y: number, animated: boolean) {
@@ -22,9 +23,9 @@ export const animateToRefresh = ({
   destPoi,
   onStartRefresh,
 }: {
-  transRefreshing: Animated.SharedValue<number>;
-  isRefreshing: Animated.SharedValue<boolean>;
-  isRefreshingWithAnimation: Animated.SharedValue<boolean>;
+  transRefreshing: SharedValue<number>;
+  isRefreshing: SharedValue<boolean>;
+  isRefreshingWithAnimation: SharedValue<boolean>;
   isToRefresh: boolean;
   destPoi: number;
   onStartRefresh?: () => void;

tsconfig.json

@@ -7,6 +7,7 @@
     "allowUnreachableCode": false,
     "allowUnusedLabels": false,
     "esModuleInterop": true,
+    "verbatimModuleSyntax": false,
     "forceConsistentCasingInFileNames": true,
     "jsx": "react",
     "lib": ["esnext"],