callstack / callstack/react-native-bottom-tabs
Measuring custom tab bar height fails for absolutely‑positioned elements
- 主要言語
- TypeScript
- スター
- 1.5k
- フォーク
- 109
- 平均マージ
- 11時間 44分
- マージ済み PR(30日)
- 8
説明
### 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
```
コントリビューションガイド
調査の方向性
Issue に示されている TabView コードから始め、useLayoutEffect 内の customTabBarWrapperRef の測定を確認してください。手順で説明されている、絶対配置されたカスタムタブバーを使用する bottom-tabs の構成を再現し、測定された高さがゼロでも不正確でもなくなっていることを確認してください。Issue には再現可能なサンプルもテストファイルもないため、どのようなカバレッジが可能かを判断する前に、関連する TabView のテストまたはエントリーポイントを探してください。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- react-native, typescript
- 領域
- mobile-dev
- issue の種類
- バグ
- 難易度
- 3/5
- 見積もり時間
- 1〜2日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 35/100