From 1a9f3542d7bd72dcf4bbced11693bb9abf29d070 Mon Sep 17 00:00:00 2001 From: "satyajit.happy" Date: Tue, 23 Apr 2019 20:36:44 +0200 Subject: [PATCH] fix: use the JUMP_TO action for tab change The index change event fires after swipe animation. If you quickly navigate to a new screen in stack before animation finishes, the index change event will fire after the previous navigation event. By this time, the tab navigator is not focused anymore. Using the JUMP_TO action instead of NAVIGATE avoids this issue. --- packages/tabs/example/package.json | 3 +- packages/tabs/example/yarn.lock | 56 ++++++++----------- packages/tabs/package.json | 4 +- packages/tabs/src/utils/createTabNavigator.js | 15 ++++- packages/tabs/yarn.lock | 8 +-- 5 files changed, 44 insertions(+), 42 deletions(-) diff --git a/packages/tabs/example/package.json b/packages/tabs/example/package.json index a65b9edb..86a8807d 100644 --- a/packages/tabs/example/package.json +++ b/packages/tabs/example/package.json @@ -10,7 +10,7 @@ "main": "App.js", "dependencies": { "@expo/vector-icons": "^10.0.1", - "@react-navigation/core": "^3.2.0", + "@react-navigation/core": "^3.4.0", "@react-navigation/native": "^3.3.0", "expo": "32.0.6", "react": "16.5.0", @@ -27,6 +27,7 @@ }, "resolutions": { "**/@expo/vector-icons": "10.0.1", + "**/@react-navigation/core": "3.4.0", "**/hoist-non-react-statics": "2.5.0", "**/react-native-tab-view": "2.0.3" } diff --git a/packages/tabs/example/yarn.lock b/packages/tabs/example/yarn.lock index 596fcd1f..57b4ad66 100644 --- a/packages/tabs/example/yarn.lock +++ b/packages/tabs/example/yarn.lock @@ -1060,16 +1060,15 @@ pouchdb-collections "^1.0.1" tiny-queue "^0.2.1" -"@react-navigation/core@3.2.0", "@react-navigation/core@^3.2.0": - version "3.2.0" - resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-3.2.0.tgz#329dfe54f305ee22ed750d51cb09c5d18562d56f" - integrity sha512-MXjTqqPFbifXGlws4hSye9Ax4dEM2OvV7VMEJOJU9TbzQjyewi59Cjplbt8pYQ5ummvkKeRS2FlQYIygNR5oCQ== +"@react-navigation/core@3.2.0", "@react-navigation/core@3.4.0", "@react-navigation/core@^3.4.0": + version "3.4.0" + resolved "https://registry.yarnpkg.com/@react-navigation/core/-/core-3.4.0.tgz#776845f9d4f8b2b9cb99c5d2d4433ebcef290d92" + integrity sha512-YAnx9mK6P/zYkvn4YxZL6thaNdouSmD7FUaftFrOAbE7y7cCfH8hmk7BOLoOet6Sh2+UnrpkWX7Kg54cT2Jw+g== dependencies: - create-react-context "0.2.2" - hoist-non-react-statics "^2.5.5" + hoist-non-react-statics "^3.3.0" path-to-regexp "^1.7.0" - query-string "^6.2.0" - react-is "^16.6.3" + query-string "^6.4.2" + react-is "^16.8.6" "@react-navigation/native@^3.3.0", "@react-navigation/native@~3.3.0": version "3.3.0" @@ -2294,14 +2293,6 @@ create-react-class@^15.6.3: loose-envify "^1.3.1" object-assign "^4.1.1" -create-react-context@0.2.2: - version "0.2.2" - resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.2.tgz#9836542f9aaa22868cd7d4a6f82667df38019dca" - integrity sha512-KkpaLARMhsTsgp0d2NA/R94F/eDLbhXERdIq3LvX2biCAXcDvHYoOqHfWCHf1+OLj+HKBotLG3KqaOOf+C1C+A== - dependencies: - fbjs "^0.8.0" - gud "^1.0.0" - cross-spawn@^5.0.1, cross-spawn@^5.1.0: version "5.1.0" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-5.1.0.tgz#e8bd0efee58fcff6f8f94510a0a554bbfa235449" @@ -3034,7 +3025,7 @@ fbjs-scripts@^0.8.1: semver "^5.1.0" through2 "^2.0.0" -fbjs@0.8.17, fbjs@^0.8.0, fbjs@^0.8.4, fbjs@^0.8.9: +fbjs@0.8.17, fbjs@^0.8.4, fbjs@^0.8.9: version "0.8.17" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd" integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90= @@ -3270,11 +3261,6 @@ growly@^1.3.0: resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081" integrity sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE= -gud@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0" - integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw== - has-ansi@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91" @@ -3323,7 +3309,7 @@ has-values@^1.0.0: is-number "^3.0.0" kind-of "^4.0.0" -hoist-non-react-statics@2.5.0, hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.0, hoist-non-react-statics@^2.5.5, hoist-non-react-statics@^3.0.1: +hoist-non-react-statics@2.5.0, hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.0, hoist-non-react-statics@^3.0.1, hoist-non-react-statics@^3.3.0: version "2.5.0" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.0.tgz#d2ca2dfc19c5a91c5a6615ce8e564ef0347e2a40" integrity sha512-6Bl6XsDT1ntE0lHbIhr4Kp2PGcleGZ66qu5Jqk8lc0Xc/IeG6gVLmwUGs/K0Us+L8VWoKgj0uWdPMataOsm31w== @@ -4913,12 +4899,13 @@ qs@^6.5.0: resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36" integrity sha512-N5ZAX4/LxJmF+7wN74pUD6qAh9/wnvdQcjq9TZjevvXzSUo7bfmw91saqMjzGS2xq91/odN2dW/WOl7qQHNDGA== -query-string@^6.2.0: - version "6.2.0" - resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.2.0.tgz#468edeb542b7e0538f9f9b1aeb26f034f19c86e1" - integrity sha512-5wupExkIt8RYL4h/FE+WTg3JHk62e6fFPWtAZA9J5IWK1PfTfKkMS93HBUHcFpeYi9KsY5pFbh+ldvEyaz5MyA== +query-string@^6.4.2: + version "6.4.2" + resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.4.2.tgz#8be1dbd105306aebf86022144f575a29d516b713" + integrity sha512-DfJqAen17LfLA3rQ+H5S4uXphrF+ANU1lT2ijds4V/Tj4gZxA3gx5/tg1bz7kYCmwna7LyJNCYqO7jNRzo3aLw== dependencies: decode-uri-component "^0.2.0" + split-on-first "^1.0.0" strict-uri-encode "^2.0.0" randomatic@^3.0.0: @@ -4963,16 +4950,16 @@ react-devtools-core@3.3.4: shell-quote "^1.6.1" ws "^3.3.1" -react-is@^16.6.3: - version "16.8.6" - resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16" - integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA== - react-is@^16.8.1: version "16.8.3" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.3.tgz#4ad8b029c2a718fc0cfc746c8d4e1b7221e5387d" integrity sha512-Y4rC1ZJmsxxkkPuMLwvKvlL1Zfpbcu+Bf4ZigkHup3v9EfdYhAlWAaVyA19olXq2o2mGn0w+dFKvk3pVVlYcIA== +react-is@^16.8.6: + version "16.8.6" + resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16" + integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA== + react-lifecycles-compat@^3.0.4: version "3.0.4" resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" @@ -5696,6 +5683,11 @@ spdx-license-ids@^3.0.0: resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.1.tgz#e2a303236cac54b04031fa7a5a79c7e701df852f" integrity sha512-TfOfPcYGBB5sDuPn3deByxPhmfegAhpDYKSOXZQN81Oyrrif8ZCodOLzK3AesELnCx03kikhyDwh0pfvvQvF8w== +split-on-first@^1.0.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/split-on-first/-/split-on-first-1.1.0.tgz#f610afeee3b12bce1d0c30425e76398b78249a5f" + integrity sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw== + split-string@^3.0.1, split-string@^3.0.2: version "3.1.0" resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2" diff --git a/packages/tabs/package.json b/packages/tabs/package.json index c8d9cb63..65f4a2b4 100644 --- a/packages/tabs/package.json +++ b/packages/tabs/package.json @@ -38,7 +38,7 @@ "dependencies": { "hoist-non-react-statics": "^3.3.0", "react-lifecycles-compat": "^3.0.4", - "react-native-tab-view": "^2.0.3" + "react-native-tab-view": "^2.2.0" }, "devDependencies": { "@commitlint/config-conventional": "^7.5.0", @@ -65,7 +65,7 @@ "release-it": "^10.3.1" }, "peerDependencies": { - "@react-navigation/core": "^3.0.0", + "@react-navigation/core": "^3.4.0", "@react-navigation/native": "^3.0.0", "react": "*", "react-native": "*", diff --git a/packages/tabs/src/utils/createTabNavigator.js b/packages/tabs/src/utils/createTabNavigator.js index 73789f1b..971636f2 100644 --- a/packages/tabs/src/utils/createTabNavigator.js +++ b/packages/tabs/src/utils/createTabNavigator.js @@ -6,7 +6,7 @@ import { StackActions, SceneView, createNavigator, - NavigationActions, + SwitchActions, } from '@react-navigation/core'; export type InjectedProps = {| @@ -160,8 +160,17 @@ export default function createTabNavigator(TabView: React.ComponentType<*>) { this.setState({ isSwiping: false }); }; - _jumpTo = routeName => - this.props.navigation.dispatch(NavigationActions.navigate({ routeName })); + _jumpTo = routeName => { + const { navigation } = this.props; + + navigation.dispatch( + SwitchActions.jumpTo({ + routeName, + key: navigation.state.key, + preserveFocus: true, + }) + ); + }; _isTabPress: boolean = false; diff --git a/packages/tabs/yarn.lock b/packages/tabs/yarn.lock index 321e7541..cc61f14f 100644 --- a/packages/tabs/yarn.lock +++ b/packages/tabs/yarn.lock @@ -7286,10 +7286,10 @@ react-native-tab-view@^1.0.0, react-native-tab-view@^1.2.0: dependencies: prop-types "^15.6.1" -react-native-tab-view@^2.0.3: - version "2.0.3" - resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-2.0.3.tgz#0160e2d94e69c722fcefa8649ffe13fec9177a0d" - integrity sha512-/rv+ESxtLFIWucIlq5VhDcZsCxThovE5FWpYngTNxLQgWzI/lem48h6FiYIMU+R6/fXOHmzSIuJtuCxNX+62fw== +react-native-tab-view@^2.2.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-2.2.0.tgz#30d015b8f33f497d82419b56df7d43ecfcc3f9b1" + integrity sha512-mhFDRvPH/kmvqfAzTwNptbOM/xXmpqYRsD0PSMJX1nP0LzhU4uRI1QmSW6sWZGLyOwKgVw0ZYkwZ54N8AmoO1A== react-native@~0.57.1: version "0.57.8"