Disable stretch height on Carousel Container

Hello,

I am having a problem here, current carousel height is stretched. If i inspect there is a view that having flex:1. I have tried to set containerCustomStyle, contentContainerCustomStyle, slideStyle flex to 0 but the carousel still stretching the height.

<View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
  <View>
    <Carousel
      sliderWidth={width}
      itemWidth={width-70}
      showsHorizontalScrollIndicator={false}

      containerCustomStyle={{flex:0}}
      contentContainerCustomStyle={{flex:0,alignItems:'flex-start'}}
      slideStyle={{flex:0}}
      onSnapToItem={this.activeSlide}>

      {items}
    </Carousel>
  </View>
</View>

[bd-arc]

@mostafa No problem 😃 I’ll add the following to the documentation as soon as I’m finished with the update I’m currently working on.

---

Carousel’s stretched height

Since <Carousel /> is, ultimately, based on <ScrollView />, it inherits its default styles and particularly { flexGrow: 1 }. This means that, by default, the carousel container will stretch to fill all the available space.

If this is not what you’re after, you can prevent this behavior by passing { flexGrow: 0 } to the prop containerCustomStyle.

Alternatively, you can either use this prop to pass a custom height to the container, or wrap the carousel in a <View /> with a fixed height.

[bd-arc]

@ariona After giving this a second thought, I realized that I’ve made a mistake: our <Carousel /> is basically a <ScrollView /> and, as such, inherits from its default styles, especially flexGrow: 1.

You should be able to deal with it thanks to the prop containerCustomStyle. I know you’ve tried flex: 0, but can you give flexGrow: 0 a try? If this doesn’t work, you should either use this prop to pass a custom height to the container or wrap the carousel in a <View /> with fixed height.