When switching from first tab to last tab, all pages will be scrolled

[barry3406]

Current behavior

There are 3 tabs and I'm on the first tab, if I click the 3rd tab, the animation will go through all pages

Expected behavior

I want to switch directly to the third page

Reproduction

More than three tabs

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Environment

package	version
react-native-tab-view	3.1.1
react-native-pager-view	5.4.9
react-native	0.67.2
expo
node	16.13.1
npm or yarn	8.1.2

[github-actions]

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.dev link or link to a GitHub repo under your username).

Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• expo

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native-pager-view (found: 5.4.9, latest: 5.4.11)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[barry3406]

I try to add prop to tabview to disable animation，This is as expected.

[efstathiosntonas]

@barry3406 use this patch package to override this: (this patch also includes the changes from this PR)

react-native-tab-view+3.1.1.patch

diff --git a/node_modules/react-native-tab-view/lib/commonjs/PagerViewAdapter.js b/node_modules/react-native-tab-view/lib/commonjs/PagerViewAdapter.js
index c4ee5c8..19fa6b0 100644
--- a/node_modules/react-native-tab-view/lib/commonjs/PagerViewAdapter.js
+++ b/node_modules/react-native-tab-view/lib/commonjs/PagerViewAdapter.js
@@ -50,7 +50,7 @@ function PagerViewAdapter({
     var _pagerRef$current;
 
     const index = navigationStateRef.current.routes.findIndex(route => route.key === key);
-    (_pagerRef$current = pagerRef.current) === null || _pagerRef$current === void 0 ? void 0 : _pagerRef$current.setPage(index);
+    (_pagerRef$current = pagerRef.current) === null || _pagerRef$current === void 0 ? void 0 : _pagerRef$current.setPageWithoutAnimation(index);
   }, []);
   React.useEffect(() => {
     if (keyboardDismissMode === 'auto') {
@@ -60,7 +60,7 @@ function PagerViewAdapter({
     if (indexRef.current !== index) {
       var _pagerRef$current2;
 
-      (_pagerRef$current2 = pagerRef.current) === null || _pagerRef$current2 === void 0 ? void 0 : _pagerRef$current2.setPage(index);
+      (_pagerRef$current2 = pagerRef.current) === null || _pagerRef$current2 === void 0 ? void 0 : _pagerRef$current2.setPageWithoutAnimation(index);
     }
   }, [keyboardDismissMode, index]);
 
diff --git a/node_modules/react-native-tab-view/lib/module/PagerViewAdapter.js b/node_modules/react-native-tab-view/lib/module/PagerViewAdapter.js
index 726b9f5..27eca60 100644
--- a/node_modules/react-native-tab-view/lib/module/PagerViewAdapter.js
+++ b/node_modules/react-native-tab-view/lib/module/PagerViewAdapter.js
@@ -32,7 +32,7 @@ export default function PagerViewAdapter({
     var _pagerRef$current;
 
     const index = navigationStateRef.current.routes.findIndex(route => route.key === key);
-    (_pagerRef$current = pagerRef.current) === null || _pagerRef$current === void 0 ? void 0 : _pagerRef$current.setPage(index);
+    (_pagerRef$current = pagerRef.current) === null || _pagerRef$current === void 0 ? void 0 : _pagerRef$current.setPageWithoutAnimation(index);
   }, []);
   React.useEffect(() => {
     if (keyboardDismissMode === 'auto') {
@@ -42,7 +42,7 @@ export default function PagerViewAdapter({
     if (indexRef.current !== index) {
       var _pagerRef$current2;
 
-      (_pagerRef$current2 = pagerRef.current) === null || _pagerRef$current2 === void 0 ? void 0 : _pagerRef$current2.setPage(index);
+      (_pagerRef$current2 = pagerRef.current) === null || _pagerRef$current2 === void 0 ? void 0 : _pagerRef$current2.setPageWithoutAnimation(index);
     }
   }, [keyboardDismissMode, index]);
 
diff --git a/node_modules/react-native-tab-view/src/PagerViewAdapter.tsx b/node_modules/react-native-tab-view/src/PagerViewAdapter.tsx
index b858cb4..159cfab 100644
--- a/node_modules/react-native-tab-view/src/PagerViewAdapter.tsx
+++ b/node_modules/react-native-tab-view/src/PagerViewAdapter.tsx
@@ -63,7 +63,7 @@ export default function PagerViewAdapter<T extends Route>({
       (route: { key: string }) => route.key === key
     );
 
-    pagerRef.current?.setPage(index);
+    pagerRef.current?.setPageWithoutAnimation(index);
   }, []);
 
   React.useEffect(() => {
@@ -72,7 +72,7 @@ export default function PagerViewAdapter<T extends Route>({
     }
 
     if (indexRef.current !== index) {
-      pagerRef.current?.setPage(index);
+      pagerRef.current?.setPageWithoutAnimation(index);
     }
   }, [keyboardDismissMode, index]);
 
@@ -142,6 +142,8 @@ export default function PagerViewAdapter<T extends Route>({
         onPageSelected={(e) => {
           const index = e.nativeEvent.position;
           indexRef.current = index;
+          position.setValue(index);
+          offset.setValue(0);
           onIndexChange(index);
         }}
         onPageScrollStateChanged={onPageScrollStateChanged}

[efstathiosntonas]

possible duplicate of #1137

[github-actions]

Hello 👋, this issue has been open for more than a month without a repro or any activity. If the issue is still present in the latest version, please provide a repro or leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution or workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix it.