From 4b76ba635fac8152545299a25f1db25f274cb05c Mon Sep 17 00:00:00 2001 From: Boris Yankov Date: Wed, 20 Jun 2018 19:49:54 +0300 Subject: [PATCH] navigation: Upgrade to React Navigation v2 Upgrade to React Navigation 2 and do the minimal changes that make our code compatible. Navigating behavior has changed, and pushing a route with the same key does not result in duplicated entry in the history. Fixes #2682 The code to wire RN navigator to Redux have changed. The newer approach is simpler, just using `reduxifyNavigator` helper does most of the work. --- .eslintrc.yaml | 2 +- package.json | 4 +- src/nav/AppWithNavigation.js | 34 ++-------- yarn.lock | 118 ++++++++++++++++++++++++++++------- 4 files changed, 102 insertions(+), 56 deletions(-) diff --git a/.eslintrc.yaml b/.eslintrc.yaml index 84186257511..9873480323b 100644 --- a/.eslintrc.yaml +++ b/.eslintrc.yaml @@ -119,7 +119,7 @@ rules: allen, jan, donald, jane, unicode, joe, unescape, dan, abramov, lang, bool, ionicons, truthy, bezier, decrement, js, oauth, jsonp, otp, Otp, ascii, Ascii, substr, Util, actionsheet, unmute, mfrac, otp, Otp, ascii, Ascii, substr, Util, - actionsheet, jsonp, actionsheet, ionicons, denmark, copenhagen, unregister, + actionsheet, jsonp, actionsheet, ionicons, denmark, copenhagen, unregister, reduxify, gcm, unstarMessage, Unstar, wildcard_mentioned, lightbox, resize, remobile, tz, rn, multiline, uniqby, zoe, localizable, appid, apns, Entypo, msup, mrow, webview, js, timerow, reselect, addons, cancelable, gravatar_hash, pms, msgs, collapsable, diff --git a/package.json b/package.json index 299e5973ba3..687190bfcda 100644 --- a/package.json +++ b/package.json @@ -67,8 +67,8 @@ "react-native-sound": "^0.10.9", "react-native-text-input-reset": "^1.0.2", "react-native-vector-icons": "^4.6.0", - "react-navigation": "^1.5.12", - "react-navigation-redux-helpers": "^1.1.1", + "react-navigation": "^2.18.2", + "react-navigation-redux-helpers": "^2.0.8", "react-redux": "^5.0.7", "react-test-renderer": "16.5.0", "redux": "^4.0.0", diff --git a/src/nav/AppWithNavigation.js b/src/nav/AppWithNavigation.js index 38a6499ceca..808fdd93447 100644 --- a/src/nav/AppWithNavigation.js +++ b/src/nav/AppWithNavigation.js @@ -1,39 +1,13 @@ /* @flow */ import { connect } from 'react-redux'; +import { reduxifyNavigator } from 'react-navigation-redux-helpers'; -import React, { PureComponent } from 'react'; -import { addNavigationHelpers } from 'react-navigation'; -import { createReduxBoundAddListener } from 'react-navigation-redux-helpers'; - -import type { Dispatch, GlobalState } from '../types'; +import type { GlobalState } from '../types'; import { getNav } from '../selectors'; import AppNavigator from './AppNavigator'; -type Props = { - dispatch: Dispatch, - nav: Object, -}; - -class AppWithNavigation extends PureComponent { - props: Props; - - render() { - const { dispatch, nav } = this.props; - const addListener = createReduxBoundAddListener('root'); - - return ( - // $FlowFixMe-56 flow-typed object type is incompatible with statics of React.Component - - ); - } -} +const AppWithNavigation = reduxifyNavigator(AppNavigator, 'root'); export default connect((state: GlobalState) => ({ - nav: getNav(state), + state: getNav(state), }))(AppWithNavigation); diff --git a/yarn.lock b/yarn.lock index d268a373e45..2b166f9c6bc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2400,6 +2400,14 @@ 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@^4.0.2: version "4.0.2" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-4.0.2.tgz#7b9247621c23adfdd3856004a823cbe397424d41" @@ -3254,7 +3262,7 @@ fbjs-scripts@^0.8.1: semver "^5.1.0" through2 "^2.0.0" -fbjs@0.8.17: +fbjs@0.8.17, fbjs@^0.8.0: version "0.8.17" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd" integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90= @@ -3778,6 +3786,11 @@ 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== + gulp-util@^3.0.4: version "3.0.8" resolved "https://registry.yarnpkg.com/gulp-util/-/gulp-util-3.0.8.tgz#0054e1e744502e27c04c187c3ecc505dd54bbb4f" @@ -7003,7 +7016,7 @@ prop-types@^15.5.8, prop-types@^15.6.0: loose-envify "^1.3.1" object-assign "^4.1.1" -prop-types@^15.6.2: +prop-types@^15.6.1, prop-types@^15.6.2: version "15.6.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102" integrity sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ== @@ -7059,6 +7072,14 @@ qs@~6.5.1: resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8" integrity sha512-eRzhrN1WSINYCDCbrz796z37LOe3m5tmW7RQf6oBntukAG1nmovJvhnwHHRMAfeoItc1m2Hk02WER2aQ/iqs+A== +query-string@^6.1.0: + version "6.1.0" + resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.1.0.tgz#01e7d69f6a0940dac67a937d6c6325647aa4532a" + integrity sha512-pNB/Gr8SA8ff8KpUFM36o/WFAlthgaThka5bV19AD9PNTH20Pwq5Zxodif2YyHwrctp6SkL4GqlOot0qR/wGaw== + dependencies: + decode-uri-component "^0.2.0" + strict-uri-encode "^2.0.0" + querystringify@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.0.0.tgz#fa3ed6e68eb15159457c89b37bc6472833195755" @@ -7161,7 +7182,7 @@ react-is@^16.5.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.6.0.tgz#456645144581a6e99f6816ae2bd24ee94bdd0c01" integrity sha512-q8U7k0Fi7oxF1HvQgyBjPwDXeMplEsArnKt2iYhuIF86+GBbgLHdAmokL3XUFjTd7Q363OSNG55FOGUdONVn1g== -react-lifecycles-compat@^3.0.2: +react-lifecycles-compat@^3, 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" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== @@ -7229,10 +7250,10 @@ react-native-safari-view@2.0.0: resolved "https://registry.yarnpkg.com/react-native-safari-view/-/react-native-safari-view-2.0.0.tgz#3aeb40693b0765df16b9beaf8654b60c7ff1d7ed" integrity sha1-OutAaTsHZd8Wub6vhlS2DH/x1+0= -react-native-safe-area-view@^0.7.0: - version "0.7.0" - resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-0.7.0.tgz#38f5ab9368d6ef9e5d18ab64212938af3ec39421" - integrity sha512-SjLdW/Th0WVMhyngH4O6yC21S+O4U4AAG3QxBr7fZ2ftgjXSpKbDHAhEpxBdFwei6HsnsC2h9oYMtPpaW9nfGg== +react-native-safe-area-view@0.11.0: + version "0.11.0" + resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-0.11.0.tgz#4f3dda43c2bace37965e7c6aef5fc83d4f19d174" + integrity sha512-N3nElaahu1Me2ltnfc9acpgt1znm6pi8DSadKy79kvdzKwvVIzw0IXueA/Hjr51eCW1BsfNw7D1SgBT9U6qEkA== dependencies: hoist-non-react-statics "^2.3.1" @@ -7241,6 +7262,11 @@ react-native-safe-area@^0.4.1: resolved "https://registry.yarnpkg.com/react-native-safe-area/-/react-native-safe-area-0.4.1.tgz#9cf47734054d1f9b9b934a012ac1939a5bbe20ca" integrity sha512-j0mOLTrBc5P0K0E99nX18vTtA/+6tk92s6V4zLNsHkM1rki+Hw1EU4HYuG9y3/Wc8Otgd7mGugPYLzo2V37fcg== +react-native-screens@^1.0.0-alpha.11: + version "1.0.0-alpha.12" + resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-1.0.0-alpha.12.tgz#5953c39c9dbfbe324610005e07d85a416081c48c" + integrity sha512-n/XyqUStDjtCymXUhAxG98asvgI8/OSH+v9AaAzUFEqfBwJLY8/UjY6m8PIJSgqRt4aR/Z9nO+A1mcMXw6dMdA== + react-native-sentry@^0.37.0: version "0.37.0" resolved "https://registry.yarnpkg.com/react-native-sentry/-/react-native-sentry-0.37.0.tgz#090929b11c1d0fb0b0b084b8ae1e0dc1c2642f0f" @@ -7259,12 +7285,20 @@ react-native-sound@^0.10.9: resolved "https://registry.yarnpkg.com/react-native-sound/-/react-native-sound-0.10.9.tgz#6b00b0f4afd017cde09fbb9d171df1b5d5b851a8" integrity sha1-awCw9K/QF83gn7udFx3xtdW4Uag= -"react-native-tab-view@github:react-navigation/react-native-tab-view": - version "0.0.74" - resolved "https://codeload.github.com/react-navigation/react-native-tab-view/tar.gz/36ebd834d78b841fc19778c966465d02fd1213bb" +react-native-tab-view@^0.0.77: + version "0.0.77" + resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-0.0.77.tgz#11ceb8e7c23100d07e628dc151b57797524d00d4" + integrity sha512-9vjD4Ly1Zlum1Y4g23ODpi/F3gYIUIsKWrsZO/Oh5cuX1eiB1DRVn11nY1z+j/hsQfhfyW6nDlmySyDvYQvYCA== dependencies: prop-types "^15.6.0" +react-native-tab-view@^1.0.0: + version "1.0.2" + resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-1.0.2.tgz#66e0bc6d38a227ed2b212e3a256b7902f6ce02ed" + integrity sha512-x8I43V1X7/AyMnIwnqJGMU54LqQRlV6vJ9irbls9asA/axdHIdxagPIV6Jx1ttFe/bPKhFwXL+lRYdYxGyUlWg== + dependencies: + prop-types "^15.6.1" + react-native-text-input-reset@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/react-native-text-input-reset/-/react-native-text-input-reset-1.0.2.tgz#cfaa6d9b45da934e1725c01b1698f8a05591661c" @@ -7336,26 +7370,59 @@ react-native@0.57.1: xmldoc "^0.4.0" yargs "^9.0.0" -react-navigation-redux-helpers@^1.1.1: - version "1.1.1" - resolved "https://registry.yarnpkg.com/react-navigation-redux-helpers/-/react-navigation-redux-helpers-1.1.1.tgz#6832c831e3fa47fb030012fac8ebdf37e45bda9f" - integrity sha512-rZ7JlKNHxugWheHo2Y/6Bl3MqTfsQb3x2j7s29kYk1TOWO8pGM61Izuxg6s8tsfr8DcLztrEc37zO5LwATeRBw== +react-navigation-deprecated-tab-navigator@1.3.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/react-navigation-deprecated-tab-navigator/-/react-navigation-deprecated-tab-navigator-1.3.0.tgz#015dcae1e977b984ca7e99245261c15439026bb7" + integrity sha512-Cm+qYOPFWbvvcuv0YYX0ioYwLGgw7XAqdhAfpo3sIr3trxRW8871ePmfFOPezjQtz4v6ItjZt6LPgtBAVZoroQ== + dependencies: + react-native-tab-view "^0.0.77" + +react-navigation-drawer@0.5.0: + version "0.5.0" + resolved "https://registry.yarnpkg.com/react-navigation-drawer/-/react-navigation-drawer-0.5.0.tgz#d91b6a6ec65c34ba78c00f814b1e6508922cc9ec" + integrity sha512-F1y593uC6pqBMGH+Omz75oNODEbxB/s0EGO8QtYwu1NmOOEUuuLA+c14zm+pgMsI4HlDabiHxPkWqsgGz25xVQ== + dependencies: + react-native-drawer-layout-polyfill "^1.3.2" + +react-navigation-redux-helpers@^2.0.8: + version "2.0.8" + resolved "https://registry.yarnpkg.com/react-navigation-redux-helpers/-/react-navigation-redux-helpers-2.0.8.tgz#f237592d9a5f24f64b283c0693bc84c5e32676ec" + integrity sha512-gCxHOGWNbRtt6Se93uuIE3cKqmqln73wlMeyD02aE1vs0cl9fn7BUKXX+UESrBSUOqadeoS1I7AH4arxZAARTQ== dependencies: invariant "^2.2.2" -react-navigation@^1.5.12: - version "1.5.12" - resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-1.5.12.tgz#e226b4906c76dde55ddf7cc0a62ea04c77140d8a" - integrity sha512-+i0ymFHokQxjv0/0knBUtxC1zuyvLgbDVPFU7ScKxT25SGVh2exuRjYwXImF234/qtYMskfY7bfhEjGLcXPySQ== +react-navigation-stack@0.7.0: + version "0.7.0" + resolved "https://registry.yarnpkg.com/react-navigation-stack/-/react-navigation-stack-0.7.0.tgz#0b2f139ee1cba953037ef51353df992ec6c74fa2" + integrity sha512-3Tbb/SsustBrM9R/qaI6XuOfyqYMVbwkeHFC8NbU890vB0aKZvjAtioWLZ18e/4LgbiOCmoTdp37z3gkGDyNDQ== + +react-navigation-tabs@0.8.4: + version "0.8.4" + resolved "https://registry.yarnpkg.com/react-navigation-tabs/-/react-navigation-tabs-0.8.4.tgz#aa767f28b899f13c99f2b034b4a665f8cf0a5737" + integrity sha512-CbS3xIVJVtpu+AYslv0PMLmjddJFVtU3XAhSJ9XnMrKLUJNmnQdW/L0w/Gp5qcBEF9h6bgsY3CoTtp7I6bqyOQ== + dependencies: + hoist-non-react-statics "^2.5.0" + prop-types "^15.6.1" + react-lifecycles-compat "^3.0.4" + react-native-tab-view "^1.0.0" + +react-navigation@^2.18.2: + version "2.18.2" + resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-2.18.2.tgz#ba278ded41f736d029c7cae5d54ab1427dc6ed34" + integrity sha512-H9hkuC+Fyav/zlss4PU8XRjgBPMKXG9uudT7PSAaRi4kuRkGb77OJDZHBW6Vm9QPF9tAKK95AhaS1mbecLM8Yw== dependencies: clamp "^1.0.1" + create-react-context "0.2.2" hoist-non-react-statics "^2.2.0" path-to-regexp "^1.7.0" - prop-types "^15.5.10" - react-lifecycles-compat "^3.0.2" - react-native-drawer-layout-polyfill "^1.3.2" - react-native-safe-area-view "^0.7.0" - react-native-tab-view "github:react-navigation/react-native-tab-view" + query-string "^6.1.0" + react-lifecycles-compat "^3" + react-native-safe-area-view "0.11.0" + react-native-screens "^1.0.0-alpha.11" + react-navigation-deprecated-tab-navigator "1.3.0" + react-navigation-drawer "0.5.0" + react-navigation-stack "0.7.0" + react-navigation-tabs "0.8.4" react-proxy@^1.1.7: version "1.1.8" @@ -8291,6 +8358,11 @@ stream-buffers@~2.2.0: resolved "https://registry.yarnpkg.com/stream-buffers/-/stream-buffers-2.2.0.tgz#91d5f5130d1cef96dcfa7f726945188741d09ee4" integrity sha1-kdX1Ew0c75bc+n9yaUUYh0HQnuQ= +strict-uri-encode@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546" + integrity sha1-ucczDHBChi9rFC3CdLvMWGbONUY= + string-length@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/string-length/-/string-length-1.0.1.tgz#56970fb1c38558e9e70b728bf3de269ac45adfac"