Support for dynamic height adjustment in multiple Carousels on a single screen

[EthanTurnerDev]

Describe the bug
When using multiple Carousel components on a single screen, there's no way to adjust each Carousel's height dynamically based on the content inside. The content includes an image, some text, and a "Show More" button. When the "Show More" button is clicked, additional text is revealed, but the height of the Carousel does not increase accordingly.

To Reproduce
Steps to reproduce the behavior:

Create a screen with multiple Carousel components.
Add items to the Carousel with an image, some text, and a "Show More" button.
Click on the "Show More" button in one of the Carousel items to reveal more text.
Notice that the Carousel's height remains fixed and does not adjust based on the content.
Expected behavior
The Carousel's height should dynamically adjust based on the content of the currently active item, especially when the content inside the Carousel item changes dynamically (e.g., upon clicking a "Show More" button).

Current Behavior:
Currently, the Carousel component requires a fixed height to be specified. When I use multiple Carousels with varying content sizes, I have to set a maximum height that fits the largest content, leading to a suboptimal display for items with less content.

Expected Behavior:
I'd like the Carousel's height to dynamically adjust based on the content of the currently active item. This would be especially useful for use cases like mine where each item's content can vary in size, and there are multiple Carousels on one screen.

Versions (please complete the following information):

react: 18.2.0
react-native: 0.72.4
react-native-reanimated: 3.5.4
react-native-reanimated-carousel: 3.5.1
react-native-gesture-handler: 2.13.1

Device: iPhone 14 pro max, iPhone 15 pro

Additional context
Supporting dynamic height adjustment for each Carousel is essential for a seamless user experience, especially when there's varied content within each Carousel on the same screen.

[7dp]

Hi, yea I have a similar issue.

I have looked at several issues in this repo that requested this "dynamic item height" feature.
This lib seems promising for replacing Snap Carousel in my apps. Much more performant. Thanks for the amazing package @dohooo !

Unfortunately lack of this feature made me rethink of going back to Snap Carousel.

Sorry, but can we expect to have this feature in a near future @dohooo ?

Thanks.

[BrantApps]

I have achieved something similar working using the onLayout callback of the rendered view in the carousel.

export const FullWidthCarousel = <ItemProps extends Record<string, unknown>>({
  initialLeftOffset = 0,
  initialHeight = INITIAL_ITEM_HEIGHT,
  items,
  ItemComponent,
}: FullWidthCarouselProps<ItemProps>) => {
  const [itemHeight, setItemHeight] = useState<number>(initialHeight)
  const {width} = useWindowDimensions()
  const baseOptions = {
    vertical: false,
    width: ITEM_COUNT_DETERMINATOR,
    style: {
      width: width,
      height: itemHeight,
    },
  } as const

  return (
    <Carousel
      {...baseOptions}
      windowSize={Math.ceil(width / ITEM_COUNT_DETERMINATOR) + 2}
      loop={false}
      pagingEnabled={false}
      panGestureHandlerProps={{
        activeOffsetX: [-10, 10],
      }}
      data={items ?? Array(NUM_SKELETON_ITEMS).fill({})}
      renderItem={({item}) => (
        <View
          onLayout={(event) => {
            // Only let cells get bigger as they come into view
            if (itemHeight < event.nativeEvent.layout.height) {
              setItemHeight(event.nativeEvent.layout.height)
            }
          }}
        >
          <ItemComponent {...item} marginLeft={initialLeftOffset} />
        </View>
      )}
    />
  )
}

[7dp]

Hi @BrantApps, appreciate the suggestions😄. Def will try it soon.