From 6eb587abd398df12d67894d53e72590c4f17921f Mon Sep 17 00:00:00 2001 From: Janic Duplessis Date: Fri, 22 Mar 2024 08:08:29 -0400 Subject: [PATCH] fix: android screen stack animation (#2019) ## Description There was some issues with android animation, the root cause is the drawing order, not the actual animations. This reverts the changes to the animations so it matches stock android ones and always reverse drawing order for android api 33+. ## Changes Revert the animation changes in https://github.com/software-mansion/react-native-screens/commit/00543fb35201e34dfb5e73e22ff12d274a1ea5f5 and https://github.com/software-mansion/react-native-screens/commit/05f4dd7c77608010d3990ae2af3ec54d5f735760. Return true from needsDrawReordering when api 33+. ## Screenshots / GIFs Here you can add screenshots / GIFs documenting your change. You can add before / after section if you're changing some behavior. ### Before Api 33 https://github.com/software-mansion/react-native-screens/assets/2677334/8777838c-a2bb-4e43-bcc2-a9a51926eeb9 The mitigations for wrong drawing order makes it kind of hard to see the issue, but going frame by frame we can see the animation is weird initially image ### After Api 31 https://github.com/software-mansion/react-native-screens/assets/2677334/2df2eaaa-92ef-4bc0-9ef5-e64e241a38d3 Api 33 https://github.com/software-mansion/react-native-screens/assets/2677334/2588241b-9536-4726-aacc-dca7facb32ad We can now see that the new screen is actually drawn on top of the old one so it looks better during the initial fade. image ## Test code and steps to reproduce Tested in example app ## Checklist - [x] Included code example that can be used to test this change - [x] Updated TS types - [x] Updated documentation: - [x] https://github.com/software-mansion/react-native-screens/blob/main/guides/GUIDE_FOR_LIBRARY_AUTHORS.md - [x] https://github.com/software-mansion/react-native-screens/blob/main/native-stack/README.md - [x] https://github.com/software-mansion/react-native-screens/blob/main/src/types.tsx - [x] https://github.com/software-mansion/react-native-screens/blob/main/src/native-stack/types.tsx - [x] Ensured that CI passes --- .../src/main/java/com/swmansion/rnscreens/ScreenStack.kt | 7 +++++-- android/src/main/res/v33/anim-v33/rns_default_enter_in.xml | 1 - .../src/main/res/v33/anim-v33/rns_default_enter_out.xml | 4 ++-- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/android/src/main/java/com/swmansion/rnscreens/ScreenStack.kt b/android/src/main/java/com/swmansion/rnscreens/ScreenStack.kt index eff7680d76..821afd932d 100644 --- a/android/src/main/java/com/swmansion/rnscreens/ScreenStack.kt +++ b/android/src/main/java/com/swmansion/rnscreens/ScreenStack.kt @@ -2,6 +2,7 @@ package com.swmansion.rnscreens import android.content.Context import android.graphics.Canvas +import android.os.Build import android.view.View import com.facebook.react.bridge.ReactContext import com.facebook.react.uimanager.UIManagerHelper @@ -335,8 +336,10 @@ class ScreenStack(context: Context?) : ScreenContainer(context) { fragmentWrapper.screen.stackPresentation === Screen.StackPresentation.TRANSPARENT_MODAL private fun needsDrawReordering(fragmentWrapper: ScreenFragmentWrapper): Boolean = - fragmentWrapper.screen.stackAnimation === StackAnimation.SLIDE_FROM_BOTTOM || + // On Android sdk 33 and above the animation is different and requires draw reordering. + Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU || + fragmentWrapper.screen.stackAnimation === StackAnimation.SLIDE_FROM_BOTTOM || fragmentWrapper.screen.stackAnimation === StackAnimation.FADE_FROM_BOTTOM || - fragmentWrapper.screen.stackAnimation === StackAnimation.IOS + fragmentWrapper.screen.stackAnimation === StackAnimation.IOS } } diff --git a/android/src/main/res/v33/anim-v33/rns_default_enter_in.xml b/android/src/main/res/v33/anim-v33/rns_default_enter_in.xml index 654c80bfbe..1767203511 100644 --- a/android/src/main/res/v33/anim-v33/rns_default_enter_in.xml +++ b/android/src/main/res/v33/anim-v33/rns_default_enter_in.xml @@ -19,7 +19,6 @@ android:fillEnabled="true" android:fillBefore="true" android:fillAfter="true" - android:startOffset="0" android:interpolator="@android:interpolator/fast_out_extra_slow_in" android:duration="450" /> diff --git a/android/src/main/res/v33/anim-v33/rns_default_enter_out.xml b/android/src/main/res/v33/anim-v33/rns_default_enter_out.xml index c3ff70f810..e7dd72bba5 100644 --- a/android/src/main/res/v33/anim-v33/rns_default_enter_out.xml +++ b/android/src/main/res/v33/anim-v33/rns_default_enter_out.xml @@ -5,13 +5,13 @@ + android:duration="450" />