callstack / callstack/react-native-bottom-tabs

Measuring custom tab bar height fails for absolutely‑positioned elements

Offen
#380 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
bug
Vorherrschende Sprache
TypeScript
Sterne
1.5k
Forks
109
Ø Merge
11 Std. 44 Min.
Gemergte PRs (30 T.)
8

Beschreibung

### Before submitting a new issue

- [x] I tested using the latest version of the library, as the bug might be already fixed.
- [x] I tested using a [supported version](https://github.com/reactwg/react-native-releases/blob/main/docs/support.md) of react native.
- [x] I checked for possible duplicate issues, with possible answers.

### Bug summary

When using a custom tab bar with [react-native-bottom-tabs](https://github.com/react-navigation/react-native-bottom-tabs), the library measures the tab bar height like this(in `TabView`):

```js
useLayoutEffect(() => {
if (renderCustomTabBar && customTabBarWrapperRef.current) {
customTabBarWrapperRef.current.measure((_x, _y, _width, height) => {
setTabBarHeight(height);
});
}
}, [renderCustomTabBar]);

// …

{renderCustomTabBar ? (

{renderCustomTabBar()}

) : null}
```

This works for most layouts, but **breaks** whenever the returned element is **absolutely positioned**, since absolutely‑positioned children don’t contribute to their parent’s measured size.

### Library version

0.0.13

### Environment info

```shell
I use expo
```

### Steps to reproduce

1. Set up a bottom‑tabs navigator.

2. Provide a `renderCustomTabBar` that returns:

```jsx

{/* … */}

```

3. Observe that `setTabBarHeight` is called with `0` (or an incorrect value).

### Reproducible sample code

```js
none
```

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit dem im Issue gezeigten TabView-Code und untersuche die Messung von customTabBarWrapperRef in useLayoutEffect. Reproduziere das in den Schritten beschriebene bottom-tabs-Setup mit der absolut positionierten benutzerdefinierten Tab-Leiste und überprüfe anschließend, dass die gemessene Höhe nicht mehr null oder falsch ist. Das Issue enthält weder ein reproduzierbares Beispiel noch eine Testdatei; ermittle daher die relevanten TabView-Tests oder Einstiegspunkte, bevor du entscheidest, welcher Abdeckungsgrad möglich ist.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
react-native, typescript
Bereich
mobile-dev
Issue-Typ
Bug
Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
35/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.