image sliding not smooth when have a lot of images

Describe the bug we use this library in our product detail, and our product images has minimum 10 images. when press in and sliding the animation is not smooth, FPS drop to 20-30 (depends on different specs)

i tried different setup the issue still occur. i tried with only 2-3 image the issue is gone, FPS consistent 50+ i tried with snap-carousel to compare the performance, and its better. FPS drop minimum 44 and average 50+. (you can see video below)

To Reproduce Steps to reproduce the behavior, here is my code:

const CarouselBanner = (props) => {

  ...

  const renderItem = useCallback(({ index, item }) => {
    // console.log('renderItem');
    return (
      <Touchable
        key={index}
        onPress={() => {
          if (item.alt_links) _callbackBanner(item.id, item.title, item.alt_links)
        }}
      >
        <AsyncImage
          source={{ uri: item.img_mobile }}
          style={style}
          placeholderColor={Colors.colorLevel3}
        />
      </Touchable>
    );
  }, [data]);

  const Indicator = memo(props => {
    // console.log('Indicator');
    const { animValue, index, length } = props;

    const animStyle = useAnimatedStyle(() => {
      let inputRange = [index - 1, index, index + 1];
      let outputRange = [-width, 0, width];

      if (index === 0 && animValue.value > length - 1) {
        inputRange = [length - 1, length, length + 1];
        outputRange = [-width, 0, width];
      }

      return {
        transform: [{
          translateX: interpolate(
            animValue.value,
            inputRange,
            outputRange,
            Extrapolate.CLAMP
          )
        }],
      };
    }, [animValue, index, length]);

    return (
      <View key={`indicatorBanner_${index}`} style={styles.indicator}>
        <Animated.View style={[styles.active, animStyle]} />
      </View>
    );

  }, () => true);

  const _onProgressChange = useCallback((offsetProgress, absoluteProgress) => {
    // console.log('offsetProgress, absoluteProgress', offsetProgress, absoluteProgress);
    if (data.length === 2 && absoluteProgress >= 2) {
      return progressValue.value = absoluteProgress - 2;
    } else return progressValue.value = absoluteProgress;
  }, [])


  return (
    <View key='CarouselBanner'>
      <Carousel
        key='CarouselBanner'
        width={widthCarousel}
        height={heightCarousel}
        data={data}
        autoPlay={autoPlay}
        autoPlayInterval={autoPlayInterval}
        // windowSize={windowSize}
        onProgressChange={_onProgressChange}
        renderItem={renderItem}
        scrollAnimationDuration={300}
        loop={false}
      />

      <View key='pagination' style={styles.pagination}>
        {data.map((record, index) => {
          return <Indicator key={index} index={index} length={data.length} animValue={progressValue} />;
        })}
      </View>
    </View>
  );
};

Expected behavior smooth animation when slide

Screen record react-native-reanimated-carousel https://user-images.githubusercontent.com/17826213/174019683-42f2976e-57b4-474f-a143-7435c2f12028.mp4

react-native-snap-carousel https://user-images.githubusercontent.com/17826213/174015388-cb86d3ff-dca7-4549-86fc-b48ceca64b86.mp4

Versions (please complete the following information):

• react: v17.0.1
• react-native: v0.64.3
• react-native-reanimated: v2.2.0
• react-native-reanimated-carousel: v2.4.0
• react-native-gesture-handler: v1.10.3

Smartphone (please complete the following information):

• Device: oneplus 5, zenfone 5
• OS: android 9 & 10

[oliverloops]

Hi @hotaryuzaki, I reproduce your example and I recommend you to set a value for the windowSize prop. loop prop just enables you to scroll in the opposite direction if is true (eg. if you have 100 items you can scroll from 0 -> 99 with loop={true}) . with this in mind having windowSize enabled helps rendering just a couple of elements of any large list, keeping a good frame rate (between 56 - 60 FPS). I was playing around with the windowSize param and found better results giving it a value between 3 -> 5. I recommend you to try this with your own implementation and compare it against the base use case.

[mahaaoo]

I think this problem is probably caused by pagination, Remove pagination and try again.