callstack / callstack/react-native-pager-view

Wrong safe area in presence of absolute-positioned view

Ouverte
#185 10 commentaires 0 réactions 0 personnes assignées Voir sur GitHub
bug ios
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",
}
});
```

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

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

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.