callstack / callstack/react-native-bottom-tabs
Fullscreen modal buggy (flickering) when using CustomTabBar
- Vorherrschende Sprache
- TypeScript
- Sterne
- 1.5k
- Forks
- 109
- Ø Merge
- 11 Std. 44 Min.
- Gemergte PRs (30 T.)
- 8
Beschreibung
### 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
```
Beitragsleitfaden
Rechercherichtung
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.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- react-native, typescript
- Bereich
- mobile
- Issue-Typ
- Bug
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 35/100