PagerView shrinks when its siblings are overflowing container

[michalpazur]

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

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 (
    <ScrollView contentContainerStyle={styles.container}>
      <Text>Page height: {pageHeight}</Text>
      <PagerView style={styles.pager}>
        <View key="1" onLayout={onLayout}>
          {pagerColors.map((color) => (
            <View
              key={color}
              style={[styles.pageElement, { backgroundColor: color }]}
            />
          ))}
        </View>
        <View key="2">
          {pagerColors.reverse().map((color) => (
            <View
              key={color}
              style={[styles.pageElement, { backgroundColor: color }]}
            />
          ))}
        </View>
      </PagerView>
      {colors.map((color) => (
        <View
          key={color}
          style={[styles.element, { backgroundColor: color }]}
        />
      ))}
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: "column",
    minHeight: "100%",
  },
  pager: {
    flexGrow: 1,
    flexShrink: 0,
  },
  pageElement: {
    height: 80,
  },
  element: {
    height: 160,
  },
});

export default App;

[troZee]

Is it the new or the old arch?

[michalpazur]

This is Fabric, but PagerView behaves the same way in version 6.9.1 with Paper enabled instead.