onIndexChange() delay

[ekaigna]

Current behavior

My view consists in two tabs, each with text input. The purpose is to search the values in each tab independently. For this, Search Button turns blue when there is some value in text input.
When I change a tab, the text input from the previous Tab must be cleaned, using onIndexChange function. However, there is a delay, so an index are not changed and consequently, a text input is not cleaned immediately, creating a bug.

Initial state:

TIN input change:

Tab change :

After few seconds:

Expected behavior

Expect to change index and edit (in this case, clean) values immediately, using onIndexChange().

Reproduction

https://snack.expo.dev/@ekaigna/-react-native-tab-view-bug-repro

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Environment

{
"name": "pwaexpo",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject",
"build-react": "webpack"
},
"dependencies": {
"@expo/webpack-config": "^0.16.15",
"@react-native-async-storage/async-storage": "~1.15.0",
"@react-navigation/native": "^6.0.6",
"@react-navigation/native-stack": "^6.2.5",
"@react-navigation/stack": "^6.0.11",
"babel-plugin-inline-import": "^3.0.0",
"expo": "^44.0.4",
"expo-app-loading": "~1.3.0",
"expo-blur": "~11.0.0",
"expo-device": "~4.1.0",
"expo-font": "~10.0.4",
"expo-linking": "~3.0.0",
"expo-secure-store": "~11.1.0",
"expo-status-bar": "~1.2.0",
"i18next": "^21.6.3",
"lottie-react-native": "^5.0.1",
"native": "^0.3.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-i18next": "^11.15.1",
"react-native": "0.64.3",
"react-native-awesome-alerts": "^1.5.2",
"react-native-bouncy-checkbox": "^2.1.9",
"react-native-calendars": "^1.1274.0",
"react-native-drax": "^0.9.3",
"react-native-dropdown-picker": "^5.2.3",
"react-native-elements": "^3.4.2",
"react-native-gesture-handler": ">=1.8.0",
"react-native-masked-text": "^1.13.0",
"react-native-pager-view": "^5.4.9",
"react-native-raw-bottom-sheet": "^2.2.0",
"react-native-safe-area-context": "3.3.2",
"react-native-screens": "~3.10.1",
"react-native-svg": "^12.1.1",
"react-native-tab-view": "^3.1.1",
"react-native-toast-message": "^2.1.1",
"react-native-uuid": "^2.0.1",
"react-native-vector-icons": "^9.0.0",
"react-native-web": "^0.17.5",
"react-native-web-lottie": "^1.4.4",
"react-native-web-swiper": "^2.2.2",
"react-redux": "^7.2.6"
},
"devDependencies": {
"@babel/core": "^7.16.7"
},
"private": true
}

[github-actions]

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

• react-native (found: 0.64.3, latest: 0.66.4)

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

[Dylan0916]

I have the same issue.

"react-native": "^0.66.4",
"react-native-web": "^0.17.5",
"react-native-tab-view": "3.1.1",

delay.mov

[Dylan0916]

I've tried moving onIndexChangeRef.current(index) out of the animation with good results, but I don't think it's a good way...

diff --git a/src/PanResponderAdapter.tsx b/src/PanResponderAdapter.tsx
index 3d1964a..3c2b13e 100644
--- a/src/PanResponderAdapter.tsx
+++ b/src/PanResponderAdapter.tsx
@@ -81,6 +81,7 @@ export default function PanResponderAdapter<T extends Route>({

       const { timing, ...transitionConfig } = DefaultTransitionSpec;

+      onIndexChangeRef.current(index);
       Animated.parallel([
         timing(panX, {
           ...transitionConfig,
@@ -89,7 +90,6 @@ export default function PanResponderAdapter<T extends Route>({
         }),
       ]).start(({ finished }) => {
         if (finished) {
-          onIndexChangeRef.current(index);
           pendingIndexRef.current = undefined;
         }
       });

[okwasniewski]

Hey @ekaigna, I can't reproduce you issue on iOS / Android. It looks like this is only present on Web. Where the delay is really noticeable. The fix that @Dylan0916 suggested looks good to me. @Dylan0916 can you make a PR adding this?

[okwasniewski]

One way to address this would be to use renderTabBar and use the animated position to control the active tab instead of using the index

[Dylan0916]

does this problem still exist?