Skip to content

Commit 6eb587a

Browse files
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 00543fb and 05f4dd7. 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 <img width="286" alt="image" src="https://github.com/software-mansion/react-native-screens/assets/2677334/90b09c7c-4a56-44fb-b84e-7a6162c75a2c"> ### 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. <img width="298" alt="image" src="https://github.com/software-mansion/react-native-screens/assets/2677334/2a6c1fd5-0079-4f21-aa4e-1ddff4569296"> ## 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: <!-- For adding new props to native-stack --> - [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
1 parent 3b35894 commit 6eb587a

File tree

3 files changed

+7
-5
lines changed

3 files changed

+7
-5
lines changed

android/src/main/java/com/swmansion/rnscreens/ScreenStack.kt

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ package com.swmansion.rnscreens
22

33
import android.content.Context
44
import android.graphics.Canvas
5+
import android.os.Build
56
import android.view.View
67
import com.facebook.react.bridge.ReactContext
78
import com.facebook.react.uimanager.UIManagerHelper
@@ -335,8 +336,10 @@ class ScreenStack(context: Context?) : ScreenContainer(context) {
335336
fragmentWrapper.screen.stackPresentation === Screen.StackPresentation.TRANSPARENT_MODAL
336337

337338
private fun needsDrawReordering(fragmentWrapper: ScreenFragmentWrapper): Boolean =
338-
fragmentWrapper.screen.stackAnimation === StackAnimation.SLIDE_FROM_BOTTOM ||
339+
// On Android sdk 33 and above the animation is different and requires draw reordering.
340+
Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU ||
341+
fragmentWrapper.screen.stackAnimation === StackAnimation.SLIDE_FROM_BOTTOM ||
339342
fragmentWrapper.screen.stackAnimation === StackAnimation.FADE_FROM_BOTTOM ||
340-
fragmentWrapper.screen.stackAnimation === StackAnimation.IOS
343+
fragmentWrapper.screen.stackAnimation === StackAnimation.IOS
341344
}
342345
}

android/src/main/res/v33/anim-v33/rns_default_enter_in.xml

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@
1919
android:fillEnabled="true"
2020
android:fillBefore="true"
2121
android:fillAfter="true"
22-
android:startOffset="0"
2322
android:interpolator="@android:interpolator/fast_out_extra_slow_in"
2423
android:duration="450" />
2524

android/src/main/res/v33/anim-v33/rns_default_enter_out.xml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@
55

66
<alpha
77
android:fromAlpha="1.0"
8-
android:toAlpha="0.0"
8+
android:toAlpha="1.0"
99
android:fillEnabled="true"
1010
android:fillBefore="true"
1111
android:fillAfter="true"
1212
android:interpolator="@anim/rns_standard_accelerate_interpolator"
1313
android:startOffset="0"
14-
android:duration="83" />
14+
android:duration="450" />
1515

1616
<translate
1717
android:fromXDelta="0"

0 commit comments

Comments
 (0)