Different height slides

[nschild]

Is your feature request related to a problem? Please describe. Is it possible to have different height slides? I get odd bugs when I try, parent scrollview will not scroll past the carousel

Describe the solution you'd like The carousel's height adjusts to the current slide's height when swiping

Describe alternatives you've considered RNSC works fine

Additional context

<Scrollview>
    <Carousel>
        <View style={{height: 100, backgroundColor: 'blue'}} />
        <View style={{height: 500, backgroundCoolor: 'red'}} />
       <Image /> //height dynamic on load
       <AutoHeightWebview>
       ....
   </Carousel>
</Scrollview>

[dohooo]

I'm doing on this, but it's a bit complicated.

[CDBridger]

+1, want to move over from RNSC which just takes the largest height value of all the slides where as this lib seems to take a fixed value? (it doesn't even take minimum height currently

EDIT: NVM it seems to take maximum height ok, the issue I was having is that when inside a vertical flatlist I can't scroll up and down on it

EDIT 2: Seems like it's an easy fix for me to pass panGestureHandlerProps={{ activeOffsetX: [-20, 20] }} which fixes the issue for me

EDIT3: Nope I was wrong about it, I do have to explicitly set maximum height myself

[kaur-karanbeer]

@dohooo Are you able to fix? For me content is more than screen visible and its getting hidden or Can give some leads how fix. tried using onLayout for view but gives same height given to carousel

[BrantApps]

Hey @kaur-karanbeer - inspired by your comment I started listening for an onLayout event also. Seems to work great. Here you can see our "FullWidthCarousel" wrapping component with default item height of 255 density independent pixels being updated with the actual measured heights.

// 1.28 => Showing a whole card + 28% of the next card
const NUM_ON_SCREEN_PHONE_PORTRAIT = 1.28
const NUM_SKELETON_ITEMS = 5

export const FullWidthCarousel = <ItemProps extends Record<string, unknown>>({
  initialLeftOffset = 0,
  items,
  ItemComponent,
}: FullWidthCarouselProps<ItemProps>) => {
  const [itemHeight, setItemHeight] = useState<number>(255)
  const {width} = useWindowDimensions()
  const isLoaded = items != null

  const baseOptions = {
    vertical: false,
    width: width / NUM_ON_SCREEN_PHONE_PORTRAIT,
    style: {
      width: width,
      height: itemHeight,
    },
  } as const

  return (
    <View flexGrow={1}>
      <Carousel
        {...baseOptions}
        loop={false}
        panGestureHandlerProps={{
          activeOffsetX: [-10, 10],
        }}
        data={items ?? Array(NUM_SKELETON_ITEMS).fill({})}
        renderItem={({item}) => (
          <View
            ml={initialLeftOffset}
            onLayout={(event) => {
              const {height} = event.nativeEvent.layout
              setItemHeight(height)
            }}
          >
            <ItemComponent
              {...item}
              marginLeft={initialLeftOffset}
              isLoaded={isLoaded}
            />
          </View>
        )}
      />
    </View>
  )
}

And here is an except from the logs showing each item in the carousels we are rendering (there are multiple) being updated with it's precise height;

 LOG  event: 187.5
 LOG  event: 228.66668701171875
 LOG  event: 237.5
 LOG  event: 237.5
 LOG  event: 209.5
 LOG  event: 209.5
 LOG  event: 221.5
 LOG  event: 221.5
 LOG  event: 221.5
 LOG  event: 221.5
 LOG  event: 241.5
 LOG  event: 269.5
 LOG  event: 297.5
 LOG  event: 237.5
 LOG  event: 209.5
 LOG  event: 250.666748046875
 LOG  event: 250.666748046875
 LOG  event: 250.666748046875
 LOG  event: 262.666748046875
 LOG  event: 269.5
 LOG  event: 262.666748046875
 LOG  event: 262.666748046875
 LOG  event: 262.666748046875
 LOG  event: 282.66650390625

So, it appears to work (on iOS at least!)