example1 is not working with onScroll

[bingbing720]

This is a bug report.

	"react": "16.2.0",
	"react-native": "0.52.x",
	"react-native-linear-gradient": "2.4.0",
	"react-native-snap-carousel": "3.8.0"

I have been trying to run example1 code with onScroll like this.

            <Carousel
              ref={c => this._slider1Ref = c}
              data={ENTRIES1}
              renderItem={this._renderItemWithParallax}
              sliderWidth={sliderWidth}
              itemWidth={itemWidth}
              hasParallaxImages={true}
              firstItem={SLIDER_1_FIRST_ITEM}
              inactiveSlideScale={0.5}
              inactiveSlideOpacity={0.5}
              // inactiveSlideShift={20}
              containerCustomStyle={styles.slider}
              contentContainerCustomStyle={styles.sliderContentContainer}
              loop={true}
              loopClonesPerSide={2}
              autoplay={true}
              autoplayDelay={500}
              autoplayInterval={3000}
              onSnapToItem={(index) => this.setState({ slider1ActiveSlide: index }) }
              onScroll={e=>{//----------it's only code I have added.


              }}

            />

I have added empty onScroll prop then snap item seems to change as active or deactivate but not changing opacity and scale. Please check it and help me how to fix it.

[bingbing720]

example2 is working with onScroll prop. only difference is activeAnimationOptions={{ friction: 4, tension: 40 }}

[bingbing720]

Hi archriss. I have to implement onScroll props to animate another view following carousel's animation. But it causes issue not changing active or inactive status. only one time working the next time is not. You need more detail for this issue? Would you have any solution? Thank you.

[bd-arc]

Well, you did not follow the contributing guidelines.

Unless you provide a Snack example in which the issue can be reproduced we won't be able to help you.

[esoh]

So I think it's because we're using functional components, and the setScrollHandler is being called with every rerender because it doesn't think that prevProps.onScroll === this.props.onScroll, and this causes the bug.

This solution should work if you don't have a use case for swapping out onScroll, and even if you did maybe you can wrangle this to make it work for you.

I use this wrapped Carousel as normal except ref is innerRef.

import React from 'react';
import RNSCarousel from 'react-native-snap-carousel';

export default class Carousel extends React.Component {

  handleScroll = (e) => {
    this.props.onScroll(e);
  }

  render() {
    const {
      innerRef,
      onScroll,
      ...attr
    } = this.props;
    return (
      <RNSCarousel
        {...attr}
        ref={innerRef}
        onScroll={this.handleScroll}
      />
    );
  }
}

[elisechant]

(adding onScroll prop) causes issue not changing active or inactive status

I can report that @bingbing720's feedback is also an issue I have found.

As soon as I add onScroll prop, the active slide never updates.

I work around this by unsetting inactive styled state by setting props:

inactiveSlideScale={1}
inactiveSlideOpacity={1}

[xXDeonoXx]

there is a solution ? same issue here, need to do a custom animation after last item on scroll but using onScroll to get current position causes my custom interpolation to not work.

[kutaisan]

This issue still exists

[dohooo]

Sorry, please allow me to advertise for my open source library! ~ I think this library react-native-reanimated-carousel will solve your problem. It is a high performance and very simple component, complete with React-Native reanimated 2

[vaishnavipy]

(adding onScroll prop) causes issue not changing active or inactive status

I can report that @bingbing720's feedback is also an issue I have found.

As soon as I add onScroll prop, the active slide never updates.

I work around this by unsetting inactive styled state by setting props:

inactiveSlideScale={1}
inactiveSlideOpacity={1}

This worked for me ! Thank you.

[priami93]

So I think it's because we're using functional components, and the setScrollHandler is being called with every rerender because it doesn't think that prevProps.onScroll === this.props.onScroll, and this causes the bug.

This solution should work if you don't have a use case for swapping out onScroll, and even if you did maybe you can wrangle this to make it work for you.

I use this wrapped Carousel as normal except ref is innerRef.

import React from 'react';
import RNSCarousel from 'react-native-snap-carousel';

export default class Carousel extends React.Component {

  handleScroll = (e) => {
    this.props.onScroll(e);
  }

  render() {
    const {
      innerRef,
      onScroll,
      ...attr
    } = this.props;
    return (
      <RNSCarousel
        {...attr}
        ref={innerRef}
        onScroll={this.handleScroll}
      />
    );
  }
}

can you confirm that converting this to a functional components doesn't work?

[esoh]

So I think it's because we're using functional components, and the setScrollHandler is being called with every rerender because it doesn't think that prevProps.onScroll === this.props.onScroll, and this causes the bug. This solution should work if you don't have a use case for swapping out onScroll, and even if you did maybe you can wrangle this to make it work for you. I use this wrapped Carousel as normal except ref is innerRef.

import React from 'react';
import RNSCarousel from 'react-native-snap-carousel';

export default class Carousel extends React.Component {

  handleScroll = (e) => {
    this.props.onScroll(e);
  }

  render() {
    const {
      innerRef,
      onScroll,
      ...attr
    } = this.props;
    return (
      <RNSCarousel
        {...attr}
        ref={innerRef}
        onScroll={this.handleScroll}
      />
    );
  }
}

can you confirm that converting this to a functional components doesn't work?

Honestly I think I wrote this when I wasn't good with react functional components. I suspect you should be able to wrap your onScroll handler with a useCallback hook instead of having to wrap the carousel in a class component.

Something like

const handleScroll = useCallback((e) => {
  // do whatever
}, []);
...
<Carousel onScroll={handleScroll} />

Haven't tried it but it would make sense to me