Fullscreen modal buggy (flickering) when using CustomTabBar

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

首先运行 https://github.com/dylancom/native-tabs-modal-bug 中可复现的示例，并在将 presentation 设置为 fullScreenModal、将 animation 设置为 none 的情况下进行导航。跟踪产生初始标签栏高度的 CustomTabBar 和模态布局过渡，然后验证导航是否始终一致地渲染全屏模态，而不会出现闪烁或底部黑色区域。