feat: measure custom tab bar

.changeset/dry-adults-lie.md

@@ -0,0 +1,5 @@
+---
+'react-native-bottom-tabs': patch
+---
+
+feat: measure custom tab bar for useBottomTabBarHeight

packages/react-native-bottom-tabs/src/TabView.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useLayoutEffect, useRef } from 'react';
 import type {
   OnNativeLayout,
   OnPageSelectedEventData,
@@ -195,6 +195,7 @@
 }: Props<Route>) => {
   // @ts-ignore
   const focusedKey = navigationState.routes[navigationState.index].key;
+  const customTabBarWrapperRef = useRef<View>(null);
   const [tabBarHeight, setTabBarHeight] = React.useState<number | undefined>(0);
   const [measuredDimensions, setMeasuredDimensions] = React.useState<
     { width: number; height: number } | undefined
@@ -220,7 +221,7 @@
 
   if (!loaded.includes(focusedKey)) {
     // Set the current tab to be loaded if it was not loaded before
     setLoaded((loaded) => [...loaded, focusedKey]);
   }
 
   const icons = React.useMemo(
@@ -313,6 +314,15 @@
     [setMeasuredDimensions]
   );
 
+  useLayoutEffect(() => {
+    // If we are rendering a custom tab bar, we need to measure it to set the tab bar height.
+    if (renderCustomTabBar && customTabBarWrapperRef.current) {
+      customTabBarWrapperRef.current.measure((_x, _y, _width, height) => {
+        setTabBarHeight(height);
+      });
+    }
+  }, [renderCustomTabBar]);
+
   return (
     <BottomTabBarHeightContext.Provider value={tabBarHeight}>
       <NativeTabView
@@ -374,7 +384,9 @@
           );
         })}
       </NativeTabView>
-      {renderCustomTabBar?.() ?? null}
+      {renderCustomTabBar ? (
+        <View ref={customTabBarWrapperRef}>{renderCustomTabBar()}</View>
+      ) : null}
     </BottomTabBarHeightContext.Provider>
   );
 };