callstack / callstack/react-native-bottom-tabs

Measuring custom tab bar height fails for absolutely‑positioned elements

Aperta
#380 1 commento 0 reazioni 0 assegnatari Vedi su GitHub
bug
Lingua principale
TypeScript
Stelle
1.5k
Fork
109
Merge medio
11h 44m
PR unite (30g)
8

Descrizione

### 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
```

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia dal codice TabView mostrato nell’issue e ispeziona la misurazione di customTabBarWrapperRef in useLayoutEffect. Riproduci la configurazione bottom-tabs con la barra delle schede personalizzata posizionata in modo assoluto descritta nei passaggi, quindi verifica che l’altezza misurata non sia più zero o errata. L’issue non fornisce alcun esempio riproducibile né un file di test, quindi individua i test o i punti di ingresso pertinenti di TabView prima di decidere quale copertura sia possibile.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
react-native, typescript
Ambito
mobile-dev
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.