fix: snapping when momentum scrolling

example/package.json

@@ -31,7 +31,8 @@
     "babel-plugin-module-resolver": "^4.0.0",
     "babel-preset-expo": "^8.2.3",
     "expo-cli": "^3.23.1",
-    "typescript": "~3.9.7"
+    "typescript": "~3.9.7",
+    "use-debounce": "^5.1.0"
   },
   "resolutions": {
     "@babel/runtime": "^7.9.0"

example/yarn.lock

@@ -12981,6 +12981,11 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-debounce@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/use-debounce/-/use-debounce-5.1.0.tgz#3df34bd7449da7dd2dbb10a6513efe701fc79d02"
+  integrity sha512-fU7O7iel2bA19fxSiPfRkieVGxrow503phSUAGZ/EqiJtCPrU9AdUdrKOAdgh803IrjdIzhj+8eDsDGn4OPy8g==
+
 use-subscription@^1.0.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.4.1.tgz#edcbcc220f1adb2dd4fa0b2f61b6cc308e620069"

package.json

@@ -93,5 +93,8 @@
       "module",
       "typescript"
     ]
+  },
+  "dependencies": {
+    "use-debounce": "^5.1.0"
   }
 }

src/CollapsibleTabView.tsx

@@ -14,7 +14,7 @@ import {
   NavigationState,
   SceneRendererProps,
 } from 'react-native-tab-view';
-
+import { useDebouncedCallback } from 'use-debounce';
 import { CollapsibleContextProvider } from './CollapsibleTabViewContext';
 import scrollScene from './scrollScene';
 import type { ScrollRef, GetRef } from './types';
@@ -174,18 +174,20 @@ const CollapsibleTabView = <T extends Route>({
       }
     });
   }, [routes, index, headerHeight, disableSnap, snapThreshold]);
+  const syncScrollOffsetDebounced = useDebouncedCallback(syncScrollOffset, 16);
 
   const onMomentumScrollBegin = () => {
     isGliding.current = true;
+    syncScrollOffsetDebounced.cancel();
   };
 
   const onMomentumScrollEnd = () => {
     isGliding.current = false;
-    syncScrollOffset();
+    syncScrollOffsetDebounced.callback();
   };
 
   const onScrollEndDrag = () => {
-    syncScrollOffset();
+    syncScrollOffsetDebounced.callback();
   };
 
   /**