react-native-screens icon indicating copy to clipboard operation
react-native-screens copied to clipboard

fix(Android): fix animations between formSheet and new screen

Open kligarski opened this issue 9 months ago • 3 comments

Description

Closes https://github.com/software-mansion/react-native-screens-labs/issues/625

Fixes missing animation between formSheet and push screen.

FormSheets use Animator but entering screens use tween animations - these animation systems don't work together very well. We rewrote tween animations using Animator. We use Animators if there are formSheets involved in the animation, otherwise we use regular tween animations.

Changes

  • rewrite animations with Animators for every stack animation,
  • create CustomAnimatorProvider to keep the definitions in one place,
  • add ScreenStackAnimationManager to seperate managing animations from the stack and ScreenStackFragment

Screenshots / GIFs

Default

before after

None

before after

There is a problem with the formSheet disappearing for one frame in the new version. We also need to consider whether the formSheet should animate at all.

Fade

before after

Slide from right (left)

before after

There is a problem with the formSheet not moving horizontally with the screen beneath it. We need to decide whether we want to change it or leave it.

Fade from bottom

before after

iOS from right (left)

before after

There is a problem with the formSheet not moving horizontally with the screen beneath it. We need to decide whether we want to change it or leave it.

Test code and steps to reproduce

Enter TestFormSheet test screen and compare animation when clicking Open Second and Open Sheet -> Open Second.

Checklist

  • [x] Included code example that can be used to test this change
  • [ ] Check animations on Paper
  • [ ] Ensured that CI passes

kligarski avatar Apr 08 '25 10:04 kligarski

Leaving a note for future us: the tween animations differ between API levels (below 33 e.g.), we need to make sure that we support this properly.

I haven't read the code yet, just read the PR description.

kkafar avatar Apr 08 '25 10:04 kkafar

In previous version, when we used new Animators for all animations, events.e2e.test failed - some events might be missing. It passes now because there are no tests for events with formSheet but we should take a look whether this PR introduces any changes for emitting events.

kligarski avatar Apr 24 '25 11:04 kligarski

There are 2 more problems that need investigating, they do not happen on main.

Nested stack flash Bottom tabs disappearing

kligarski avatar Apr 29 '25 07:04 kligarski