Skip to content
This repository was archived by the owner on Feb 25, 2020. It is now read-only.

Conversation

@kmagiera
Copy link
Member

When animating new screen in on Android we used to, by default, fade out the previously displayed screen. Then when going back to it it would fade in from 0 to 1. This seem to be not how the default screen animation on Android performs and has also an additional consequence that the app background is partially visible during screen transition. It is because during transition both the transitioning in and transitioning out views are semi transparent.

Motivation

Make Android default screen transition alike platform default one and also fix the problem when app background can be seen during transition.

CAUTION

This is potentially breaking change as it changes the default animation configuration on Android.

Notes

Note that there is another issue related to opacity not blending correctly when stack animation in ongoing. This causes the card background "flashes" and can be mitigated by setting cardStyle: { backgroundColor: 'YOUR-SCREEN_BG' } in navigation config. When using react-native-screens the correct blending is applied for the duration of animation and hence resolves this problem completely.

Test plan

  1. Run the following code on Android -> https://snack.expo.io/@kzzzf/rn-nav-flash-android-v3
  2. When opening next screen or closing the screen note that there is a moment when white background flashes
  3. With this change in this should no longer appear

To illustrate the change I changed app background to green to make it easier to see. Here is what changes:

OLD TRANSITION IN:
without-fadein

OLD TRANSITION OUT:
without-fadeout

NEW TRANSITION IN:
with-fadein

NEW TRANSITION OUT:
with-fadeout

@kmagiera kmagiera requested a review from brentvatne December 19, 2018 13:01
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants