callstack / callstack/react-native-pager-view

PagerView shrinks when its siblings are overflowing container

Open
#1,026 2 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.