You specified `onScroll` on a but not `scrollEventThrottle`

Question

I am using Scrollview of react-native in my code.

<ScrollView style={styles.productlist} >
         <CarouselComponent images={images}/>
</ScrollView>

Its working fine on an app, with no error, and no warning but in Console I am getting the below message repeatedly:

You specified onScroll on a but not scrollEventThrottle. You will only receive one event. Using 16 you get all the events but be aware that it may cause frame drops, use a bigger number if you don't need as much precision.

Don't know what is missing, I have not passed onScroll props but still getting this message. Any suggestion...

My Carousel component Code is:

const renderImages = (image, index) => {
  return (
    <Image
      key={index}
      style={styles.carouselImage} 
      source={{ uri: image.large }} 
    />
  );
}
const CarouselComponent = (props) => {
  const { images: { alternate = [] } = {} } = props;
  if (alternate.length > 0) {
    return (
      <Carousel
        delay={3000}
        autoplay
        style={styles.carouselLayout}
        bullets
        chosenBulletStyle={globalStyle.proDetCarSelectBullet}
        bulletStyle={globalStyle.productDetailBullet}
        bulletsContainerStyle={globalStyle.proDetCarBullet}              
        isLooped
        currentPage={0}
      >
        {alternate.map((image, index) => renderImages(image, index))}          
      </Carousel>
    );
  }

  return null;
}

inside CarouselComponent rendering images, and inside ReviewComponent rendering user reviews. — Ravi Sharma, Dec 06 '19 at 12:20
Maybe the `CarouselComponent` is a ScrollView itself, can you share the `CarouselComponent` code? — vitosorriso, Dec 06 '19 at 12:21
No, those are just functional component that return Carousel only. — Ravi Sharma, Dec 06 '19 at 12:22
No matter if it is a functional or class component, `Carousel` is not a react-native component, so maybe this component is using a bugged `ScrollView` — vitosorriso, Dec 06 '19 at 12:23
Or maybe the `ReviewComponent`. Please tell us more about these components. — vitosorriso, Dec 06 '19 at 12:24
Even if i use only one component I am getting same message, and I am using react-native-looped-carousel npm library for this purpose. — Ravi Sharma, Dec 06 '19 at 12:29

score 4 · Accepted Answer · answered Dec 06 '19 at 12:34

4

You are probably using an older version of react-native-looped-carousel. On github there is a issue, which was fixed 27 days ago, describing your problem.

Fix:

Updating to the latest version of react-native-looped-carousel should resolve your issue. As an alternative you can fix the error by manually adding the scrollEventThrottle. See here.

answered Dec 06 '19 at 12:34

Tim

10,459
4
36
47

I using latest version of ` react-native-looped-carousel` – Ravi Sharma Dec 06 '19 at 12:42
1

@RaviSharma you are right, the fix is not released yet. You can still fix it manually. – Tim Dec 06 '19 at 12:44

score 2 · Answer 2 · answered Dec 06 '19 at 12:37

There is nothing wrong in your code, the problem is contained into react-native-looped-carousel as an issue states here: https://github.com/phil-r/react-native-looped-carousel/issues/269

I suggest you to search for another library. React-native's code keep growing in a very fast way and every library should be updated frequently.

Just to learn something new, the scrollEventThrottle prop defines how many times the onScroll event will be fired while you scrolling. The bigger the number is, less times the event will be fired. 16 is most precise value.

score 1 · Answer 3 · answered Aug 05 '22 at 15:12

1

Actually, the main ScrollView component needs the following code:

<ScrollView
  scrollEventThrottle={16}
  ~~~

answered Aug 05 '22 at 15:12

AmerllicA

29,059
15
130
154

You specified `onScroll` on a but not `scrollEventThrottle`

3 Answers3