callstack / callstack/react-native-pager-view

Wrong safe area in presence of absolute-positioned view

オープン
#185 コメント 10 件 リアクション 0 件 担当者 0 名 GitHub で見る
bug ios
主要言語
TypeScript
スター
3.4k
フォーク
476
平均マージ
10日 21時間
マージ済み PR(30日)
2

説明

# Bug report
## Summary

As you can see from the screenshot, the safe area is computed wrongly when a view with `position: absolute` is placed near the view pager.

## Environment info
`react-native info` output:
```bash
System:
OS: macOS 10.15.4
CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
Memory: 21.57 MB / 8.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.14.1 - ~/.nvm/versions/node/v12.14.1/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.13.7 - ~/.nvm/versions/node/v12.14.1/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Managers:
CocoaPods: 1.8.4 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 13.5, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
Android SDK: Not Found
IDEs:
Android Studio: 4.0 AI-193.6911.18.40.6514223
Xcode: 11.5/11E608c - /usr/bin/xcodebuild
Languages:
Java: 9.0.4 - /usr/bin/javac
Python: 3.7.2 - /Users/federico/miniconda3/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.9.0 => 16.9.0
react-native: 0.62.2 => 0.62.2
npmGlobalPackages:
*react-native*: Not Found
```

Library version: "^4.0.0",

## Steps to reproduce
```js
const ViewPagerScreen = (props) => {

const pages = [



Title text



];

return (
<>


{pages}


// if you remove this problematic footer view, all works as expected




{}} />


{}} />




);
}

const styles = StyleSheet.create({
footer: {
flexDirection: "row",
marginBottom: 20,
backgroundColor: 'yellow'
},
footerSubContLeft: {
flex: 1,
alignItems: "flex-start",
},
footerSubContRight: {
flex: 1,
alignItems: "flex-end",
}
});
```

image
Describe what you expected to happen:

The text view should be inside the SafeArea. If I remove the yellow view (footer), this is respected.

image

コントリビューションガイド

コントリビューションガイドを開く

調査の方向性

まず、報告されている React Native とライブラリのバージョンを使って、ViewPager、SafeAreaView、絶対配置のフッターを含む提供された例を iOS で再現します。ViewPager と SafeAreaView の相互作用を調査します。フッターのビューが存在する場合でもテキストがセーフエリア内に収まり、期待されるスクリーンショットと一致すれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
ios, react-native
領域
mobile-dev
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
おおむね明確
初心者へのやさしさ
38/100

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

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