Fullscreen modal buggy (flickering) when using CustomTabBar

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

Mantenedores costumam responder em até 1 dia

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
4/5
Tempo estimado
3-5 dias
Facilidade para iniciantes
35/100
Tipo de issue
Bug
Clareza
Razoavelmente clara
Status de atividade
Estagnada
Stack de tecnologia
react-native, typescript
Domínio
mobile

Direção de pesquisa

Comece executando o exemplo reproduzível em https://github.com/dylancom/native-tabs-modal-bug e navegando com presentation definido como fullScreenModal e animation definido como none. Rastreie a transição de CustomTabBar e do layout do modal que produz a altura inicial da barra de abas e, em seguida, verifique se a navegação renderiza consistentemente o modal em tela cheia, sem cintilação ou uma área preta na parte inferior.

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

Descrição

bug
Bug summary

When using a custom tab bar as by your example, full-screen modals behave inconsistently when no animation is used (animation: "none"). Upon navigation, the new screen’s height is initially calculated as SCREEN_HEIGHT - TABBAR_HEIGHT, and shortly after, it adjusts to include the height of the tabbar, causing noticeable flickering.
In other cases, the new screen ends up with a black area at the bottom, matching the height of the tab bar.

Navigating to the modal shortly still shows the tabbar sometimes (for a frame):

Then shortly after renders the full screen as supposed to:

It also happens that it just shows a black area at the bottom part all the time:

Library version

0.9.2

Environment info
⚠️ react-native depends on @react-native-community/cli for cli commands. To fix update your package.json to include:


  "devDependencies": {
    "@react-native-community/cli": "latest",
  }
Steps to reproduce

Navigate to a screen that has the following options:

options={{
          title: "Modal",
          presentation: "fullScreenModal",
          animation: "none",
}}
Reproducible sample code
https://github.com/dylancom/native-tabs-modal-bug
Linguagem predominante
TypeScript
Estrelas
1.5k
Forks
111
Merge médio
1d 13h
PRs com merge (30d)
8

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.