callstack / callstack/react-native-bottom-tabs
Measuring custom tab bar height fails for absolutely‑positioned elements
- 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
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