Extra height is added below Carousel.

Is this a bug report, a feature request, or a question?

Question.

• I have read the guidelines regarding bug report.
• I have reviewed the documentation in its entirety, including the dedicated documentations 📚.
• I have searched for existing issues and made sure that the problem hasn’t already been reported.
• I am using the latest plugin version.
• I am following the issue template closely in order to produce a useful bug report.

Have you made sure that it wasn’t a React Native bug?

Yes

Is the bug specific to iOS or Android? Or can it be reproduced on both platforms?

Both platforms.

Is the bug reproductible in a production environment (not a debug one)?

Yes

Environment

Expo: 32 (latest)
React: 16.5
React native: 0.58
react-native-snap-carousel: 3.7.5 (latest)

Target Platform: Android (6.0) iOS (10.3)

Expected Behavior

I use a vertical Flatlist to show some users. Each list item has a Carousel component. The images in it should be at the appropriate height, like this:

Actual Behavior

Instead, extra height (from padding/margin maybe?) are added:

Notice that the below user’s photo is visible, which clearly shouldn’t be, giving me the impression that the images are placed in an absolute way or something (not sure if this matter)

I thought this has something to with the Pagination component (which I don’t use) but then again extra height is added on top of it, so it should be a problem with the Carousel itself.

My code:

<Carousel
              ref={(c) => { this._carousel = c; }}
              data={this.props.item.images}
              renderItem={this._renderItem}
              inactiveSlideScale={1}
              inactiveSlideOpacity={1}
              layoutCardOffset={0}
              callbackOffsetMargin={6} // default is 5
              sliderWidth={windowWidth*0.9}
              // sliderHeight={windowWidth*0.9}
              itemWidth={windowWidth*0.9}
              // itemHeight={windowWidth*0.9}
              showsHorizontalScrollIndicator={false}
              // style={{ width: windowWidth*0.9,  borderRadius: 10, overflow: 'hidden'}}
              onBeforeSnapToItem={(index) => {
                console.log('got called')
              }}
            />

_renderItem ({item, index}) {
      return (
        <Image source={{ uri: "http://res.cloudinary.com/blabla/image/upload/" + item }} style={{ width: windowWidth*0.9, height: windowWidth*0.9 }} />
      );
    }

PS: Let me know if a Snack is needed here, although there is pretty nothing other relevant to show I think.

[gi]

@spyshower Try setting the Carousel prop containerCustomStyle.flexGrow to 0:

<Carousel
  {/* ... */}
   containerCustomStyle={{
    flexGrow: 0,
  }}
  {/* ... */}
/>

I had a similar issue when rendering a Pagination component below the carousel, where there was lots of excess space between the two components.

[anon-r-7]

The issue is a result of implementation of the <Pagination /> element. This element defines a style for paddingVertical: 30. This style can be overridden by the received prop containerStyle. So to solve:

<Pagination
  containerStyle={{paddingVertical: 0}}
/>