callstack / callstack/react-native-bottom-tabs
Measuring custom tab bar height fails for absolutely‑positioned elements
- 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
Research direction
Start in the TabView code shown in the issue and inspect the customTabBarWrapperRef measurement in useLayoutEffect. Reproduce the bottom-tabs setup with the absolutely positioned custom tab bar described in the steps, then verify the measured height is no longer zero or incorrect. The issue provides no reproducible sample or test file, so locate the relevant TabView tests or entry points before deciding what coverage is possible.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript
- Domain
- mobile-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100