callstack / callstack/react-native-pager-view
PagerView shrinks when its siblings are overflowing container
- Dominant language
- TypeScript
- Stars
- 3.4k
- Forks
- 476
- Avg merge
- 10d 21h
- Merged PRs (30d)
- 2
Description
## 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;
```
Contributor guide
Assessment
This issue has not been assessed yet.