callstack / callstack/react-native-pager-view
Wrong safe area in presence of absolute-positioned view
- Langage dominant
- TypeScript
- Étoiles
- 3.4k
- Forks
- 476
- Merge moyen
- 10 j 21 h
- PR mergées (30 j)
- 2
Description
# 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",
}
});
```
Describe what you expected to happen:
The text view should be inside the SafeArea. If I remove the yellow view (footer), this is respected.
Guide de contribution
Ouvrir le guide de contribution
Piste de recherche
Commencez par reproduire sur iOS l’exemple fourni avec ViewPager, SafeAreaView et un footer positionné en absolu, en utilisant les versions signalées de React Native et des bibliothèques. Examinez l’interaction entre ViewPager et SafeAreaView ; le travail est considéré comme terminé lorsque le texte reste dans la zone sécurisée lorsque la vue du footer est présente, conformément à la capture d’écran attendue.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- ios, react-native
- Domaine
- mobile-dev
- Type d'issue
- Bug
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 38/100