callstack / callstack/react-native-bottom-tabs

Measuring custom tab bar height fails for absolutely‑positioned elements

オープン
#380 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る
bug
主要言語
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

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。