React-native-snap-carousel: Extra height is added below Carousel.

[spyshower]

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

Question.

• [x] I have read the guidelines regarding bug report.
• [x] I have reviewed the documentation in its entirety, including the dedicated documentations :books:.
• [x] I have searched for existing issues and made sure that the problem hasn't already been reported.
• [x] I am using the latest plugin version.
• [x] 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.

[KaneNguyen]

same issue :( can't set height for carousel

[andriinegustorov]

the same problem =(
react-native-snap-carousel 3.7.5 latest version

[bd-arc]

Hi @spyshower,

I haven't used vertical carousels in a while so yes, it would really help if you could provide a Snack example in which the issue can be reproduced :-)

[spyshower]

@bd-arc Oh sorry if I wasn't clear enough, the carousel is horizontal. It's just my outer Flatlist that is vertical.

[bd-arc]

@spyshower I'd still appreciate a Snack though, because I never had this kind of issue with the carousel.

[spyshower]

https://snack.expo.io/ByBzfMnIV

Try playing with a combination of commenting line 39 and 54-56. I don't even get this behavior, and while it's not 100% identical with my local build, I can say it's not exactly predictable :P

Edit: Actually, after commenting styles.container andstyles.imageContainer, the problem is gone, which fixes my case.

However, ifstyles.imageContainer is not commented, the bottom view is not visible. This could be a problem for other users and I am not sure if this is a problem with the carousel or styling of a view.

Finally, I would like to take the chance to say that I really appreciate your efforts in the documentation and the notes you put in it, and the help you offer for issues. This is the 5th library I am trying to use to make a simple image carousel, so yeah I know that FlatList is quite bad atm.

[ryanostrom]

The issue is a result of implementation of the 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}}
/>

[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.

[bd-arc]

Thank you @spyshower, @ryanostrom and @gi for your valuable contributions. The issue can now be closed.

As a side note, the Carousel is basically a ScrollView which has a built-in style that includes { flexGrow: 1 }. There's a note about it in the doc ;-)