Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Measuring custom tab bar height fails for absolutely‑positioned elements

Abierto
  • ¿Algo no está bien?
#380 1 comentario 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@mrpmohiburrahman ya está trabajando en esto.

Desde el 9/8/2026.

  • #559 de @mrpmohiburrahman — abierto

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
35/100
Tipo de issue
Error
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
react-native, typescript
Área
mobile-dev

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.

Descripción

bug
Before submitting a new issue
  • I tested using the latest version of the library, as the bug might be already fixed.
  • I tested using a supported version of react native.
  • I checked for possible duplicate issues, with possible answers.
Bug summary

When using a custom tab bar with react-native-bottom-tabs, the library measures the tab bar height like this(in TabView):

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

// …

{renderCustomTabBar ? (
  <View ref={customTabBarWrapperRef}>
    {renderCustomTabBar()}
  </View>
) : 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
I use expo
Steps to reproduce

  1. Set up a bottom‑tabs navigator.

  2. Provide a renderCustomTabBar that returns:

    <View
  style={{
    position: 'absolute',
    bottom: 0,
    width: '100%',
    height: 60,
    backgroundColor: 'white',
  }}
>
  {/* … */}
</View>

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

Reproducible sample code
none
Lenguaje dominante
TypeScript
Estrellas
1.5k
Forks
108
Merge medio
22 h 32 min
PR fusionados (30 d)
8

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de callstack/react-native-bottom-tabs

Todos los issues de callstack/react-native-bottom-tabs

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.