How to hide tab bar when modal is visible

[rahmanharoon]

I have a use case of showing a modal when i display the modal its coming below of the tab bar I need to show the modal above the tab bar

Here is the image of current behaviour

Here my bottom content of modal is under the tab bar. How can i get rid of this situation?

 <Tabs.Navigator
      initialRouteName={"HOME"}
      appearance={{
        shadow: true,
        dotCornerRadius: 100,
        dotSize: DotSize.SMALL,
        // horizontalPadding: 100,
        tabButtonLayout: TabButtonLayout.VERTICAL,
        whenInactiveShow: TabElementDisplayOptions.BOTH,
        whenActiveShow: TabElementDisplayOptions.ICON_ONLY,
      }}
      tabBarOptions={{
        shadow: true,
        position: 'absolute',
        keyboardHidesTabBar: true,
        activeTintColor: colors.color2,
        inactiveTintColor: colors.bottomIcons,
        activeBackgroundColor: colors.color1,
        labelStyle: {
          fontSize: 14,
          marginTop: 2,
          fontStyle: 'normal',
          fontWeight: 'normal',
        },
        tabStyle: {
          width: '100%',
        },
      }}>
{...}
</Tabs.Navigator>

Here is my code of tab bar initialisation

[github-actions]

Stale issue message