Skip to content

fix(snackbar): fix show animation on new architecture#4447

Merged
lukewalczak merged 1 commit into
callstack:mainfrom
seb-zabielski:fix/snackbar-show-new-architecture
Jul 27, 2024
Merged

fix(snackbar): fix show animation on new architecture#4447
lukewalczak merged 1 commit into
callstack:mainfrom
seb-zabielski:fix/snackbar-show-new-architecture

Conversation

@seb-zabielski

@seb-zabielski seb-zabielski commented Jul 1, 2024

Copy link
Copy Markdown
Contributor

Motivation

This bug is only available on android with new architecture enabled and is well described (with and example) in the related issue #4445
From what I've been able to find, the problem occurs when the animation is started before the component is rendered.
In our scenario, the component returns null as long as the hidden state is set to true. In the handleOnVisible function we have the main steps setHidden(false) and Animation start. To fix the bug, I moved the start of the animation to a useEffect that depends on the hidden value, so that the animation will start after the state is changed (and component re-rendered).

btw, since this bug only occurs with the new architecture, it is either also a react-native bug or an expected change. I have not found an answer yet.

Related issue

#4445

Test plan

Run android app with New Architecture enabled and try to show/hide snackbar.

Before After
Screen.Recording.2024-07-01.at.09.47.14.mov
Screen.Recording.2024-07-01.at.09.44.12.mov

@seb-zabielski
seb-zabielski requested a review from gedu July 1, 2024 07:50
@callstack-bot

Copy link
Copy Markdown

Hey @seb-zabielski, thank you for your pull request 🤗. The documentation from this branch can be viewed here.

@iM-GeeKy

iM-GeeKy commented Jul 4, 2024

Copy link
Copy Markdown

@seb-zabielski @gedu Is there a tentative timeline for 5.12.4. Also, random question, but is @lukewalczak no longer maintaining this?

@lukewalczak
lukewalczak merged commit eed911b into callstack:main Jul 27, 2024
momomuchu added a commit to momomuchu/react-native-paper that referenced this pull request Jul 5, 2026
…d:false under Fabric, callstack#4951

Under the New Architecture (Fabric), `Animated.timing` can fire its
`start` callback with `{ finished: false }` even when the hide animation
completes naturally (no interruption). The previous code guarded
`setHidden(true)` behind `if (finished)`, so the Snackbar stayed
mounted forever on Fabric after `visible` became false.

The fix removes the guard and calls `setHidden(true)` unconditionally
in the animation callback, mirroring the show-path fix from PR callstack#4447
which addressed the same class of Fabric noise for `handleOnVisible`.

The sole trade-off is a mid-hide interrupt: if `visible` flips back to
`true` while the hide animation is running, `setHidden(true)` fires,
but the subsequent render immediately calls `setHidden(false)` via
`handleOnVisible`, causing at most a one-frame visual snap, strictly
better than a permanently stuck Snackbar that no state change can clear.

Adds a regression test that mocks `Animated.timing` to deliver
`{ finished: false }` and asserts the component unmounts cleanly.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants