Get height of tab bar on any device in React-Navigation

Question

I'd like to position a component just above the createBottomTabNavigator TabBar in React-Navigation V2.

The height of the tab bar seems to differ on various devices (iOS devices especially). Is there a way to calculate the height of the tab bar as it is displayed on a device?

Solution 1

As you check the source code for react-navigation-tabs which react-navigation uses for createBottomTabNavigator, you can see that there is only 2 different bottom tab bar heights. Compact and default, which changes between some conditions. You can also set your component's position according to these conditions manually.

Solution 2

To avoid Ipnone X issues they use react-native-safe-area-view inside.

You just need to know padding at bottom:

import { getInset } from 'react-native-safe-area-view'
const bottomOffset = getInset('bottom')

It solved problem for us.

We also use specific component position.

Updated according to library update:

import { SafeAreaConsumer } from 'react-native-safe-area-context'

<SafeAreaConsumer>
   {insets => (
      <TouchableOpacity
          style={{
               paddingBottom: 11 + insets.bottom,
          }}
        >
          ...
      </TouchableOpacity>
   )}
</SafeAreaConsumer>

or hook:

const insets = useSafeArea();

Solution 3

For your issue of how to position something above the tab bar, you can also achieve this without absolute positioning. This way you aren't relying on how the logic of determining the height of the bar is implemented (which may also change in the future).

import { createBottomTabNavigator, BottomTabBar } from "react-navigation"

createBottomTabNavigator({
    // Your tabs
}, {
    tabBarComponent: (props) => <BottomTabBar {...props} />
})

For example, if you wanted a little red bar above your tabs, you could do the following

tabBarComponent: (props) => (
    <View>
        <View style={{ backgroundColor: "red", height: 10 }} />
        <BottomTabBar {...props} />
    </View>
)

Solution 4

React Navigation 5 +

You now have two options to get the height of the bottomTabBar.

To get the height of the bottom tab bar, you can use BottomTabBarHeightContext with React's Context API or useBottomTabBarHeight, which is a custom Hook:

import { BottomTabBarHeightContext } from '@react-navigation/bottom-tabs';

// ...

<BottomTabBarHeightContext.Consumer>
  {tabBarHeight => (
    /* render something */
  )}
</BottomTabBarHeightContext.Consumer>

or

import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs';

// ...

const tabBarHeight = useBottomTabBarHeight(); 

Make sure you use version 5.11.9 or greater

View more solutions

Comments

[Ritwick Dey]

What do you mean by calculate the height of the tab bar ? You want to override default configuration. Right?

[Liam Kelly]

Basically I'm trying to get the height of the bottom tab bar so that I know how to absolutely position a component above it without that component being cut off. I'm currently having issues on iOS with that tab bar being taller on iPhone X.

[Liam Kelly]

Thanks for the response. Is there a way to also get the unused distance below the tab bar too? For instance on iPhone X, the tab bar displays with its normal height, but there's 2-3x the height in unused space below it. I need to know the total height in order to place my component above that.

[bennygenel]

@LiamKelly I think the mentioned space is caused by SafeAreaView which helps content to show correctly on iPhone X. You can check the source code for it here

[ffritz]

Not working anymore, they moved to a different module which doesn't export that function.

[Vladislav Zaynchkovsky]

@ffritz migration attached

[ffritz]

Thanks, however this inset does not include the tab bar. It returns the bottom starting point of the tab bar (34 on iPhone 11) .

[ThaJay]

Not an excellent answer because there is only an link and not the actual answer. Include the answer AND the link where one can find the source is how an answer should be. Thanks @yungGun!

[ThaJay]

Thank you! It would be nice if your and bennygenel's answer would be merged, but you provide the most useful part. Tha answer is 29 (not 42 because the question is different)

[Labu]

If you're lucky enough to be using functional components (i.e. not classes), then the hook is the simplest way to do this. The tab bar heights are limited to 2 sizes, and the offset is what varies.

[Steve Moretz]

You forgot + insets.bottom