Measuring custom tab bar height fails for absolutely‑positioned elements

[Code-Victor]

Before submitting a new issue

• I tested using the latest version of the library, as the bug might be already fixed.
• I tested using a supported version of react native.
• I checked for possible duplicate issues, with possible answers.

Bug summary

When using a custom tab bar with react-native-bottom-tabs, the library measures the tab bar height like this(in TabView):

useLayoutEffect(() => {
  if (renderCustomTabBar && customTabBarWrapperRef.current) {
    customTabBarWrapperRef.current.measure((_x, _y, _width, height) => {
      setTabBarHeight(height);
    });
  }
}, [renderCustomTabBar]);

// …

{renderCustomTabBar ? (
  <View ref={customTabBarWrapperRef}>
    {renderCustomTabBar()}
  </View>
) : null}

This works for most layouts, but breaks whenever the returned element is absolutely positioned, since absolutely‑positioned children don’t contribute to their parent’s measured size.

Library version

0.0.13

Environment info

I use expo

Steps to reproduce

1. Set up a bottom‑tabs navigator.

2. Provide a renderCustomTabBar that returns:

   <View
     style={{
       position: 'absolute',
       bottom: 0,
       width: '100%',
       height: 60,
       backgroundColor: 'white',
     }}
   >
     {/* … */}
   </View>

3. Observe that setTabBarHeight is called with 0 (or an incorrect value).

Reproducible sample code

none

[Code-Victor]

Proposed Solution:

Drop the manual .measure()/ref approach and rely solely on the native onLayout callback, injecting it directly into the custom tab bar element. For example:

- {renderCustomTabBar ? (
-   <View ref={customTabBarWrapperRef}>
-     {renderCustomTabBar()}
-   </View>
- ) : null}
+ {renderCustomTabBar && (() => {
+     const element = renderCustomTabBar();
+     return React.isValidElement(element)
+       ? React.cloneElement(element, {
+           onLayout: e => setTabBarHeight(e.nativeEvent.layout.height),
+         })
+       : element;
+   })()}

• Why this works:

  • onLayout fires reliably for absolutely‑positioned views, reporting their true dimensions.

  • No extra wrapper is needed, so you measure the actual element itself.

  • Removes complexity around ref management

---

Questions:

1. Does this fit with the library’s philosophy and coding conventions?

2. Would you like a PR that replaces the current wrapper+ref logic with this onLayout‑based approach?

I’d be happy to draft and submit one!