callstack / callstack/react-native-bottom-tabs

Fullscreen modal buggy (flickering) when using CustomTabBar

オープン
#371 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
bug
主要言語
TypeScript
スター
1.5k
フォーク
109
平均マージ
11時間 44分
マージ済み PR(30日)
8

説明

### Bug summary

When using a custom tab bar as by your example, full-screen modals behave inconsistently when no animation is used `(animation: "none")`. Upon navigation, the new screen’s height is initially calculated as SCREEN_HEIGHT - TABBAR_HEIGHT, and shortly after, it adjusts to include the height of the tabbar, causing noticeable flickering.
In other cases, the new screen ends up with a black area at the bottom, matching the height of the tab bar.

Navigating to the modal shortly still shows the tabbar sometimes (for a frame):

Then shortly after renders the full screen as supposed to:

It also happens that it just shows a black area at the bottom part all the time:

### Library version

0.9.2

### Environment info

```shell
⚠️ react-native depends on @react-native-community/cli for cli commands. To fix update your package.json to include:

"devDependencies": {
"@react-native-community/cli": "latest",
}
```

### Steps to reproduce

Navigate to a screen that has the following options:
```
options={{
title: "Modal",
presentation: "fullScreenModal",
animation: "none",
}}
```

### Reproducible sample code

```js
https://github.com/dylancom/native-tabs-modal-bug
```

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

Start by running the reproducible sample at https://github.com/dylancom/native-tabs-modal-bug and navigating with presentation set to fullScreenModal and animation set to none. Trace the CustomTabBar and modal layout transition that produces the initial tab-bar height, then verify that navigation consistently renders the full-screen modal without flickering or a black area at the bottom.

索引モデルが issue の本文から書いたものです。

評価

技術スタック
react-native, typescript
領域
mobile
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
35/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。