2

I am using carousel from react-native-snap-carousel module to scroll images horizontally from remote urls. it is working fine in android but in case of iOS sometimes the image is getting scrolled, most of the times not.

It is detecting my slide action but the image is not getting scrolled.

I have tried on iOS 13.1.3, react-native 0.59.8, react-native-snap-carousel 3.8.2

Following code is for Carousel

   <Carousel
            borderTopRightRadius={2}
            borderTopLeftRadius={2}
            ref={c => (this._ref = c)}
            data={images}
            renderItem={item => this.renderItem(item)}
            onSnapToItem={index => {
              this.setState({ currentImage: index });
              onSliderMove(index);
            }}
            layout={"default"}
            sliderWidth={parentWidth || width}
            itemWidth={parentWidth || width}
            loop={circleLoop || false}
            contentContainerCustomStyle={{}}
            scrollEnabled={scrollable}
            onStartShouldSetResponderCapture={() => {
              return scrollable;
            }}
            onMoveShouldSetResponderCapture={() => {
              return scrollable;
            }}
            layoutCardOffset={20}
          />

I am using a custom component to load an image.

     renderItem = ({ item, index }) => {
      return (
        <View style={{ width, height }}>
          <LoadableImage
            url={item}
            index={index}
          />
        </View>
       )
      }

Expected results: Horizontal scrolling should work on iOS smoothly. Actual results: Horizontal scrolling is not working most of the time.

Help me solve this issue

Rajesh Marotu
  • 61
  • 1
  • 6

1 Answers1

0

I was also facing an issue in scroll with this carousel. I looked into the library and tried the below attributes. You can try after adding the given attributes, they make the scroll smooth. I am not facing any issue after using the below attributes.

Try the last two attributes.

<Carousel
      ref={isCarousel}
      data={options}
      renderItem={renderItem}
      sliderWidth={SLIDER_WIDTH}
      itemWidth={itemWidth || ITEM_WIDTH}
      useScrollView
      activeSlideAlignment="start"
      inactiveSlideScale={1}
      inactiveSlideOpacity={1} 
     onSnapToItem={(index) => {console.log(index); setIndex(index)}}
     *enableMomentum={true}
     decelerationRate={0.9}*
   />
Kshitij
  • 360
  • 4
  • 12
  • This didn't solved my issue on android. Please suggest. Details are present in this https://stackoverflow.com/questions/72682972/issue-with-manual-scrolling-horizontally-on-react-native-snap-carousel-in-androi – christo-pher18 Jun 20 '22 at 06:56