callstack / callstack/react-native-pager-view

Wrong safe area in presence of absolute-positioned view

Offen
#185 10 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
bug ios
Vorherrschende Sprache
TypeScript
Sterne
3.4k
Forks
476
Ø Merge
10 T. 21 Std.
Gemergte PRs (30 T.)
2

Beschreibung

# 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

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne damit, das bereitgestellte Beispiel mit ViewPager, SafeAreaView und einem absolut positionierten Footer auf iOS mit den gemeldeten React Native- und Bibliotheksversionen zu reproduzieren. Untersuche das Zusammenspiel von ViewPager und SafeAreaView; erledigt ist die Aufgabe, wenn der Text innerhalb des sicheren Bereichs bleibt, sobald die Footer-Ansicht vorhanden ist, und dem erwarteten Screenshot entspricht.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
ios, react-native
Bereich
mobile-dev
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
38/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.