react-native-snap-carousel: Invariant Violation: VirtualizedList: The windowSize prop must be present and set to a value greater than 0

I am getting error as shown in the title react-native: 0.56.0 react-native-snap-carousel: ^3.7.2

const horizontalMargin = 20;
const slideWidth = 280;

const sliderWidth = Dimensions.get("window").width;
const itemWidth = slideWidth + horizontalMargin * 2;
const itemHeight = 100;
//

_renderItem = ({ item }) => {
    return (
      <View style={style.slide}>
        <View style={style.slideInnerContainer} />
      </View>
    );
  };
  render() {
    return (
      <View style={style.container}>
        <Carousel
          data={[{ key: "1" }, { key: "2" }, { key: "3" }]}
          renderItem={this._renderItem}
          slideWidth={sliderWidth}
          itemWidth={itemWidth}
        />
      </View>
    );
  }

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 8
Comments: 15 (4 by maintainers)

Most upvoted comments

Ok I added windowSize={1} and it worked

+20

yasir-netlinks on Jul 21, 2018

provide both sliderWidth={400} itemWidth={400}

+17

viv3kk on Apr 12, 2019

I created a fresh project, installed react-native-snap-carousel and simply ran the app with the code above, and I’m getting this error, I honestly don’t know what else to tell you

yasir-netlinks on Jul 21, 2018

I’m facing the same issue, and windowSize={1} did not fix it

gautham20 on Dec 6, 2018

저는 속성을 잘못 지정해서 똑같은 에러가 발생했습니다.

     <Carousel
              data={[1, 2, 3, 4, 5]}
              renderItem={component}
              slideWidth={360}
              itemWidth={360 * 0.68}
            />

slideWidth -> sliderWidth

     <Carousel
              data={[1, 2, 3, 4, 5]}
              renderItem={component}
              sliderWidth={360}
              itemWidth={360 * 0.68}
            />

choseonghwan91 on Aug 9, 2022

for anyone reaching here this lib warns in case you do not specify sliderWidth and itemWidth while they are required in horizontal mode

react-native-snap-carousel: You need to specify both `sliderWidth` and `itemWidth` for horizontal carousels

actually if you take a look at prop types you can simply find them out

itemWidth: PropTypes.number, // required for horizontal carousel
itemHeight: PropTypes.number, // required for vertical carousel
sliderWidth: PropTypes.number, // required for horizontal carousel
sliderHeight: PropTypes.number, // required for vertical carousel

I believe that these lines

https://github.com/archriss/react-native-snap-carousel/blob/master/src/carousel/Carousel.js#L158 https://github.com/archriss/react-native-snap-carousel/blob/master/src/carousel/Carousel.js#L161

should use console.error

because this way the user will see this error

instead of this weird complicated one which is from react native’s virtualized list

@bd-arc if this seems fine to you i’ll be happy to make a PR.

bardiarastin on May 29, 2019

maybe you passed the “slideWidth” property as string, that expect a integer.

CristopherAguilarh on Jan 24, 2019

⚠️ You did not follow the contributing guidelines!

As stated in these:

You need to fill out the issue template. This step is mandatory! Not doing so will result in your issue getting closed. Don’t take this personally if this happens, and feel free to open a new issue once you’ve gathered all the information required by the template.

Unless you provide a Snack example that reproduces the issue, we won’t be able to help you and the thread will be closed.

bd-arc on Jul 20, 2018

@bd-arc there you go https://github.com/archriss/react-native-snap-carousel/pull/528 ❤️

bardiarastin on May 29, 2019