callstack / callstack/react-native-pager-view
PagerView shrinks when its siblings are overflowing container
- Vorherrschende Sprache
- TypeScript
- Sterne
- 3.4k
- Forks
- 476
- Ø Merge
- 10 T. 21 Std.
- Gemergte PRs (30 T.)
- 2
Beschreibung
## Environment
| Key | Value |
|---------------------------|--------------|
| `react-native-pager-view` | 7.0.0 |
| `react-native` | 0.79.6 |
| `expo` | 53.0.22 |
| Platform | iOS, Android |
| Key | Value |
|---------------------------|--------------|
| `react-native-pager-view` | 7.0.0 |
| `react-native` | 0.81.1 |
| `expo` | N/A |
| Platform | iOS, Android |
## Description
When placed in a container with other elements `PagerView` shirnks to allow other elements to fit, even when shrinking is unnecessary (e.g inside a `ScrollView`). The only workaround is to give `PagerView` a fixed height, which can't be calculated at runtime as the pages are shrunk as well.
`PagerView` inside a `ScrollView` without other elements:
https://github.com/user-attachments/assets/b84c16eb-efa7-422c-a179-1f07395bb1cc
`PagerView` inside a `ScrollView` with other elements that are taller than the container, shrinked down to 1/3 of its content size:
https://github.com/user-attachments/assets/989dccbb-83c0-4e3a-a5f7-e684abf57595
## Reproducible Demo
```tsx
import React, { useState } from "react";
import {
LayoutChangeEvent,
ScrollView,
StyleSheet,
Text,
View,
} from "react-native";
import PagerView from "react-native-pager-view";
const pagerColors = ["greenyellow", "skyblue", "salmon", "chocolate"];
const colors = ["hotpink", "olive", "navy", "green"];
const App: React.FC = () => {
const [pageHeight, setPageHeight] = useState(0);
const onLayout = (e: LayoutChangeEvent) => {
setPageHeight(e.nativeEvent.layout.height);
};
return (
Page height: {pageHeight}
{pagerColors.map((color) => (
))}
{pagerColors.reverse().map((color) => (
))}
{colors.map((color) => (
))}
);
};
const styles = StyleSheet.create({
container: {
flexDirection: "column",
minHeight: "100%",
},
pager: {
flexGrow: 1,
flexShrink: 0,
},
pageElement: {
height: 80,
},
element: {
height: 160,
},
});
export default App;
```
Beitragsleitfaden
Rechercherichtung
Beginne mit der TypeScript App-Reproduktion im Issue und führe sie sowohl auf iOS als auch auf Android aus. Vergleiche dabei PagerView allein mit PagerView zusammen mit überlaufenden Geschwisterelementen in einer ScrollView. Untersuche das in der Reproduktion gezeigte Layout-Verhalten; fertig ist die Aufgabe, wenn PagerView und seine Seiten nicht mehr unnötig schrumpfen, ohne dass eine zur Laufzeit berechnete feste Höhe erforderlich ist.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- react-native, typescript
- Bereich
- frontend, mobile
- Issue-Typ
- Bug
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 45/100