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?

Answer 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.

Answer 2

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>
)