callstack / callstack/react-native-bottom-tabs

Measuring custom tab bar height fails for absolutely‑positioned elements

Open
#380 1 comment 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
1.5k
Forks
109
Avg merge
11h 44m
Merged PRs (30d)
8

Description

### Before submitting a new issue

- [x] I tested using the latest version of the library, as the bug might be already fixed.
- [x] I tested using a [supported version](https://github.com/reactwg/react-native-releases/blob/main/docs/support.md) of react native.
- [x] I checked for possible duplicate issues, with possible answers.

### Bug summary

When using a custom tab bar with [react-native-bottom-tabs](https://github.com/react-navigation/react-native-bottom-tabs), the library measures the tab bar height like this(in `TabView`):

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

// …

{renderCustomTabBar ? (

{renderCustomTabBar()}

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

```shell
I use expo
```

### Steps to reproduce

1. Set up a bottom‑tabs navigator.

2. Provide a `renderCustomTabBar` that returns:

```jsx

{/* … */}

```

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

### Reproducible sample code

```js
none
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.