callstack / callstack/react-native-pager-view
PagerView shrinks when its siblings are overflowing container
- 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