callstack / callstack/react-native-pager-view

PagerView shrinks when its siblings are overflowing container

Offen
#1,026 2 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
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

Beitragsleitfaden öffnen

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

Neue Issues direkt in Ihr Postfach

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