v4 includes lots of housekeeping changes that aim to make maintenance easier [1]. In particular, we no longer grab stack, tab, or drawer navigation logic from react-navigation itself; we must now depend directly on separate libraries that provide these and import from them. - We got a head start on this in the v3 upgrade (in a recent commit) by ensuring we had react-navigation-{tabs,stack,drawer} installed at v3-compatible versions. - Now, we bump these to their latest versions (no peer-dep warnings when we do this!) and default to using carets in their version ranges since we see no indication that we can't. - This means installing react-native-reanimated, as we knew we'd need to. (We mock it in our Jest setup, following some instructions [2].) For react-navigation-stack, we add peer dependencies react-native-safe-area-context and @react-native-community/masked-view. The upgrade guide asks us to stop depending on @react-navigation/core and @react-navigation/native and change any imports of those to react-navigation imports instead. We don't have any imports to change, and we can freely remove @react-navigation/native. We can't yet remove @react-navigation/core because it's still a peer dependency of react-navigation-redux-helpers [3]. So we keep it, and align its version range with the one in react-navigation's dependencies. There's a long list of identifiers whose usage has changed. Searching our code for each one, these are the interesting ones: - `create*Navigator` being imported from the respective react-navigation-{tabs,stack,drawer} library; quite easy to handle - `cardStyle` (in stack nav config) being moved to `navigationOptions` (or `defaultNavigationOptions`). We deleted our only use of `cardStyle` in the recent react-navigation v3 upgrade because we only used it to make the background color white and, white became the default background color in that upgrade. Finally, attempt to upgrade libdefs for the dependencies we touched, if we import from them directly. We get new version-appropriate libdefs for react-navigation, react-navigation-drawer, and react-navigation-tabs. Unfortunately react-navigation-stack only has a v1 libdef. [1] https://reactnavigation.org/docs/4.x/upgrading-from-3.x/ [2] See https://reactnavigation.org/docs/testing/. We don't include the following line also recommended there: ``` // Silence the warning: Animated: `useNativeDriver` is not // supported because the native animated module is missing jest.mock('react-native/Libraries/Animated/src/NativeAnimatedHelper'); ``` We don't get that warning in the first place, and it's not clear what mock is being applied (apart from React Native's own default one). If we need to mock `NativeAnimatedHelper` in the future, we shouldn't point to the internal path in react-native; it should go in our existing react-native mock (alongside NativeModules, etc.). [3] zulip#3804 (comment) Fixes: zulip#4248

Commits

Commits on Sep 17, 2020

MainScreenWithTabs: Use router static, pass navigation prop.

MessageReactionList [nfc]: Remove a prettier suppression.

MessageReactionList: Wrap rogue tab nav in createNavigationContainer.

deps: Upgrade to react-navigation v3.

deps: Upgrade to react-navigation v4.

android nav: Use a better stack-nav animation.

nav: Enable swiping between top tabs.

MainScreenWithTabs: Use `router` static, pass `navigation` prop.

MessageReactionList: Wrap rogue tab nav in `createNavigationContainer`.