Snackbar stays mounted after `visible=false` under new architecture (iOS + Android)
まだ誰も着手していません。
評価
- 難易度
- 2/5
- 見積もり時間
- 1〜3時間
- 初心者へのやさしさ
- 78/100
- issue の種類
- バグ
- 明瞭さ
- 明確に書かれている
- 活発さ
- 静か
- 技術スタック
- react-native, typescript
- 領域
- mobile
調査の方向性
src/components/Snackbar.tsx を読み、handleOnHidden と非表示アニメーションのコールバックに注目してください。#4447 の表示パスの回避策と動作を比較してください。Fabric を有効にし、iOS または Android で visible を true から false に切り替えて再現します。コールバックが finished: false を報告した場合でも、非表示アニメーションによって Snackbar がアンマウントされ、非表示のままになれば完了です。
索引モデルが issue の本文から書いたものです。
説明
Summary
Under React Native's new architecture (Fabric), paper's <Snackbar> can get stuck mounted at non-zero opacity after visible is set to false. The hide animation runs visually, but the component never unmounts and stays visible on screen until something else forces a remount.
Sister bug to #3775 / #4445 (which were Android-only show path, fixed by #4447). This is the hide path, and reproduces on both iOS and Android with the new arch enabled.
Root cause
src/components/Snackbar.tsx, handleOnHidden:
Animated.timing(opacity, {
toValue: 0,
duration: 100 * scale,
useNativeDriver: true,
}).start(({ finished }) => {
if (finished) { // ← this guard is the problem under Fabric
setHidden(true);
}
});
Under Fabric, this start({finished}) callback fires with finished: false even when nothing has interrupted the animation. setHidden(true) is the only thing that makes the component return null and actually unmount, so the snackbar stays rendered at whatever opacity the (visually-running) animation reached.
The parallel show-path fix #4447 split handleOnVisible from animateShow to work around the same Fabric noise. The hide path was not touched and still carries the guard.
Expected behaviour
After visible={false}, the Snackbar component unmounts cleanly (hidden flips to true) once the hide animation completes, regardless of the finished flag.
Current behaviour
After visible={false}:
- The hide animation fires (opacity 1 → 0).
- The
startcallback fires withfinished: false. setHidden(true)is skipped.- The component stays mounted; nothing in the React state can clear it.
- Subsequent
setVisible(false)taps re-trigger the same broken animation; the snackbar never goes away.
Repro
- New arch enabled.
- Mount a global
<Snackbar visible={visible} onDismiss={() => setVisible(false)} action={{ label: 'Action', onPress: () => {} }}>Message</Snackbar>. setVisible(true), thensetVisible(false).- Snackbar stays on screen.
Reproduced on:
- iOS 18 simulator (iPhone 15)
- iOS 26 simulator (iPhone 17 Pro Max)
- Android Pixel 8 emulator (API 35)
All with newArchEnabled: true.
Environment
react-native-paper: 5.15.2react-native: 0.83.6- Expo SDK 55
- Fabric / new arch: enabled
Proposed fix
Drop the if (finished) guard, mirroring how #4447 worked around the same class of Fabric noise on the show path:
Animated.timing(opacity, {
toValue: 0,
duration: 100 * scale,
useNativeDriver: true,
- }).start(({ finished }) => {
- if (finished) {
- setHidden(true);
- }
+ }).start(() => {
+ setHidden(true);
});
Trade-off
Under a genuine interrupt (a new show kicked off mid-hide), setHidden(true) would now also fire. The next render uses the new visible=true path → setHidden(false) → re-animates show. The visible artefact is at worst a one-frame snap. A stuck Snackbar that no state change can clear is strictly worse.
Happy to open a PR if useful. Tested locally via patch-package; resolves the issue on both platforms.
- 主要言語
- TypeScript
- スター
- 14.5k
- フォーク
- 2.2k
- 平均マージ
- 5日 10時間
- マージ済み PR(30日)
- 10
コントリビューションガイド
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
callstack/react-native-paper のほかの issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 76/100
callstack/react-native-paper#5096 ·
-
bug
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
callstack/react-native-paper#5093 ·
-
bug
難易度 2/5 1〜3時間 初心者へのやさしさ 74/100
callstack/react-native-paper#5003 ·
-
bug
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
callstack/react-native-paper#4881 ·
-
feature request
難易度 2/5 1〜3時間 初心者へのやさしさ 72/100
callstack/react-native-paper#4863 · コメント 1 件 ·
callstack/react-native-paper の issue をすべて見る
似ている issue
-
難易度 2/5 1〜3時間 初心者へのやさしさ 70/100
-
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
mksglu/context-mode#1200 ·
-
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
jaegertracing/jaeger-ui#4506 ·
-
area:desktop area:ui bug platform:macos
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
anthropics/claude-code#96687 ·
-
good first issue
難易度 1/5 1時間未満 初心者へのやさしさ 95/100
AOSSIE-Org/DebateAI#582 · コメント 2 件 ·