Skip to content

Commit

Permalink
fix: android screen stack animation (#2019)
Browse files Browse the repository at this point in the history
## 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
  • Loading branch information
janicduplessis authored and tboba committed Mar 25, 2024
1 parent 3854240 commit 8458671
Show file tree
Hide file tree
Showing 3 changed files with 7 additions and 5 deletions.
7 changes: 5 additions & 2 deletions android/src/main/java/com/swmansion/rnscreens/ScreenStack.kt
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
}
}
1 change: 0 additions & 1 deletion android/src/main/res/v33/anim-v33/rns_default_enter_in.xml
Original file line number Diff line number Diff line change
Expand Up @@ -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" />

Expand Down
4 changes: 2 additions & 2 deletions android/src/main/res/v33/anim-v33/rns_default_enter_out.xml
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@

<alpha
android:fromAlpha="1.0"
android:toAlpha="0.0"
android:toAlpha="1.0"
android:fillEnabled="true"
android:fillBefore="true"
android:fillAfter="true"
android:interpolator="@anim/rns_standard_accelerate_interpolator"
android:startOffset="0"
android:duration="83" />
android:duration="450" />

<translate
android:fromXDelta="0"
Expand Down

0 comments on commit 8458671

Please sign in to comment.