React-native-snap-carousel: 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