Measuring custom tab bar height fails for absolutely‑positioned elements #380

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