Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

[Android] Content doesn't resize when tab bar visibility changes (tabBarHidden)

Fechada
  • Algo errado?
#557 0 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

@JJalit já está trabalhando nisso.

Desde 23/7/2026.

  • #558 de @JJalit — aberto

Avaliação

Dificuldade
3/5
Tempo estimado
1-2 dias
Facilidade para iniciantes
35/100
Tipo de issue
Bug
Clareza
Claramente especificada
Status de atividade
Pouca atividade
Stack de tecnologia
android, kotlin, react-native
Domínio
mobile

Direção de pesquisa

Comece lendo android/src/main/java/com/th3rdwave/safeareacontext/RCTTabView.kt e reproduza o exemplo Android fornecido alternando tabBarHidden. Está concluído quando o conteúdo React e a view ancorada na parte inferior são redimensionados para toda a altura disponível quando a barra de abas está oculta e retornam corretamente quando ela é exibida.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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

On Android, when tabBarHidden is toggled to true, the native bottom navigation view is set to GONE and its space is reclaimed at the native level, but the React content does not grow to fill it. The screen keeps its old height, leaving a blank strip at the bottom exactly the height of the tab bar. Bottom-anchored elements (position: 'absolute', bottom: 0) end up floating ~80dp above the actual bottom of the screen. Toggling back to visible has the same problem in reverse until something else triggers a relayout.

I tracked it down to the layout listener in RCTTabView.kt. The size-change guard compares the bounds of the whole container (ReactBottomNavigationView), but when only the tab bar visibility changes, the container keeps the exact same size — only the inner layoutHolder grows or shrinks:

post {
  addOnLayoutChangeListener { _, left, top, right, bottom, _, _, _, _ ->
    val newWidth = right - left      // container size — unchanged when tab bar is hidden
    val newHeight = bottom - top

    onTabBarMeasuredListener?.invoke(...)

    if (newWidth != lastReportedSize?.width || newHeight != lastReportedSize?.height) {
      // never reached in this case, so onNativeLayoutListener doesn't fire
      onNativeLayoutListener?.invoke(dpWidth, dpHeight)
      lastReportedSize = Size(newWidth, newHeight)
    }
  }
}

Two problems compound here:

  1. The guard compares the container size, while the value actually reported to JS is the layoutHolder size. When the tab bar is hidden, the container stays the same but layoutHolder changes, so the guard filters the update out.
  2. The listener is attached to the container, and OnLayoutChangeListener only fires when that view's own bounds change — which they don't in this scenario. So even the callback itself may not run.

As a result onNativeLayout never reaches the JS side, setMeasuredDimensions keeps the stale height, and the children rendered by TabView stay at the old size.

Verified on an emulator with uiautomator dump: after hiding the tab bar, the native layoutHolder grows to full screen height (2400px on my device), while the React subtree inside it stays at the previous 2126px.

iOS is not affected.

Library version

1.4.0

Environment info
System:
  OS: macOS 26.5.2
  CPU: (18) arm64 Apple M5 Pro
Binaries:
  Node: 24.13.0
  Yarn: 3.6.4
  npm: 11.6.2
npmPackages:
  react: 19.2.3
  react-native: 0.86.0
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true
Steps to reproduce
  1. Android app using createNativeBottomTabNavigator (New Architecture).
  2. Render a screen with a bottom-anchored view, e.g. an action bar with position: 'absolute', bottom: 0.
  3. Toggle tabBarHidden to true (typical case: entering a selection/edit mode).
  4. The tab bar disappears, but the bottom-anchored view stays where the tab bar's top edge used to be, with an empty strip below it.

Tested on an Android 16 emulator (arm64), RN 0.86, and reproduced consistently.

Reproducible sample code
const [hidden, setHidden] = useState(false);

<TabView tabBarHidden={hidden} ...>
  {/* screen content */}
  <View style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 56 }}>
    <Button title="toggle" onPress={() => setHidden(v => !v)} />
  </View>
</TabView>

I have a fix working locally (report the layoutHolder size instead, and also listen to layoutHolder layout changes so the visibility-toggle case is caught). Will open a PR.

Linguagem predominante
TypeScript
Estrelas
1.5k
Forks
111
Merge médio
1d 18h
PRs com merge (30d)
7

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de callstack/react-native-bottom-tabs

Todas as issues de callstack/react-native-bottom-tabs

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.