Skip to content

Commit

Permalink
nav: Don't show a transition animation between 'loading' and 'main'.
Browse files Browse the repository at this point in the history
New in the recent React Navigation upgrades to v3 and v4, there's
now a transition animation when the loading screen exits. We don't
want to prolong the effect of the loading screen [1], so, get rid of
that exit animation.

Most accurately, we want to target the exit of the loading screen
and disable the animation there. But it seems that the
`animationEnabled` switch in `navigationOptions` operates on the
*entrance* of particular screen; I haven't found a similar option
for the *exit* of a particular screen.

A good workaround, to the extent that it's practical, would be to
tell all screens to disable their entrance animations if and only if
they're being reached directly from the loading screen. The only
reasonably simple way I can think of to implement this would be to
set `defaultNavigationOptions` to a function instead of an
object [2] and use that function's inputs to conditionalize on the
identity of the route being navigated *from*, i.e., the previous
route. Unfortunately, that doesn't seem possible; the `navigation`
object is the most likely-looking of those inputs, and logging shows
that it doesn't have data about the previous route, only the current
route (in `navigation.state`).

So, we use a heuristic: always cancel the entrance animation of the
main-tabs screen. This is supported by the following observations
(but naturally there may be edge cases I haven't considered):

- An extremely frequent and high-visibility action is to navigate
  from the loading screen to the main-tabs screen.
- We don't generally navigate from the loading screen to anywhere
  other than the main-tabs navigator.
- We don't generally navigate to the main-tabs screen from
  anywhere other than the loading screen.

[1] zulip#4249 (review)
[2] The best link I've found for this is
    https://reactnavigation.org/docs/4.x/headers/#using-params-in-the-title.
  • Loading branch information
chrisbobbe committed Sep 17, 2020
1 parent ad0b5f3 commit 9e43b3f
Showing 1 changed file with 8 additions and 1 deletion.
9 changes: 8 additions & 1 deletion src/nav/AppNavigator.js
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,14 @@ export default createStackNavigator(
dev: { screen: DevAuthScreen },
'emoji-picker': { screen: EmojiPickerScreen },
loading: { screen: LoadingScreen },
main: { screen: MainScreenWithTabs },
main: {
screen: MainScreenWithTabs,
navigationOptions: {
// So we don't show a transition animation between 'loading'
// and 'main'.
animationEnabled: false,
},
},
'message-reactions': { screen: MessageReactionList },
password: { screen: PasswordAuthScreen },
realm: { screen: RealmScreen },
Expand Down

0 comments on commit 9e43b3f

Please sign in to comment.