Skip to content

Commit

Permalink
deps: Upgrade to react-navigation v4.
Browse files Browse the repository at this point in the history
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
  • Loading branch information
chrisbobbe committed Sep 11, 2020
1 parent 4dd91a2 commit 8d4cb27
Show file tree
Hide file tree
Showing 10 changed files with 2,554 additions and 1,411 deletions.
5 changes: 0 additions & 5 deletions .flowconfig
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,6 @@ node_modules/warning/.*

.*/node_modules/react-native-notifications/.*
.*/node_modules/react-native-tab-view/.*

# Some mistakes in these types got fixed in v2.4.1 of this library,
# but we can't use that until we're on react-navigation v4 (#4248).
.*/node_modules/react-navigation-tabs/.*

.*/node_modules/react-native-safe-area/.*
.*/node_modules/flow-coverage-report/.*
.*/node_modules/@snyk/.*
Expand Down
Loading

0 comments on commit 8d4cb27

Please sign in to comment.