callstack / callstack/react-native-bottom-tabs
Measuring custom tab bar height fails for absolutely‑positioned elements
- Lenguaje dominante
- TypeScript
- Estrellas
- 1.5k
- Forks
- 109
- Merge medio
- 11 h 44 min
- PR fusionados (30 d)
- 8
Descripción
### 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
```
Guía de contribución
Línea de trabajo
Comienza con el código de TabView mostrado en el issue e inspecciona la medición de customTabBarWrapperRef en useLayoutEffect. Reproduce la configuración de bottom-tabs con la barra de pestañas personalizada posicionada absolutamente que se describe en los pasos y verifica después que la altura medida ya no sea cero ni incorrecta. El issue no proporciona ningún ejemplo reproducible ni archivo de prueba, así que localiza las pruebas o puntos de entrada relevantes de TabView antes de decidir qué cobertura es posible.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- react-native, typescript
- Área
- mobile-dev
- Tipo de issue
- Error
- Dificultad
- 3/5
- Tiempo estimado
- 1-2 días
- Estado de actividad
- Estancado
- Claridad
- Bastante claro
- Aptitud para principiantes
- 35/100