onIndexChange() delay #1306
Description
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
}