Tab Height

[costerik]

Hey guys, is there a way to calculate the tab height?

thanks!

[marhaupe]

You can wrap the BottomTabBar from @react-navigation/bottom-tabs in a View, set the Views onLayout prop and read its height from there. Example:

import React from 'react'
import { BottomTabBar } from '@react-navigation/bottom-tabs'
import { View } from 'react-native'
import { useAppContext } from './utils.ts'


export function TabBar(props) {
  const { setContext } = useAppContext()


  return (
    <View
      collapsable={false}
      onLayout={event => {
        const tabBarHeight = event.nativeEvent.layout.height
        
        setContext(prevContext => ({
          ...prevContext,
          tabBarHeight,
        }))
      }}
    >
      <BottomTabBar {...props} />
    </View>
  )
}