callstack / callstack/react-native-pager-view

PagerView shrinks when its siblings are overflowing container

Aperta
#1,026 2 commenti 0 reazioni 0 assegnatari Vedi su GitHub
Lingua principale
TypeScript
Stelle
3.4k
Fork
476
Merge medio
10g 21h
PR unite (30g)
2

Descrizione

## 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;
```

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia con la riproduzione TypeScript App nell’issue ed eseguila sia su iOS sia su Android, confrontando PagerView da solo con PagerView insieme a sibling con overflow all’interno di una ScrollView. Analizza il comportamento del layout mostrato dalla riproduzione; il lavoro è completato quando PagerView e le sue pagine non si restringono più inutilmente senza richiedere un’altezza fissa calcolata a runtime.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
react-native, typescript
Ambito
frontend, mobile
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
45/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.