When swiping item, they stop in the middle

[trilam1409]

Hello everyone,

There are some issues on some Android devices. Slider can't move full next one.

This is my code:

const carouselRef = useRef<Carousel<{uri: string}>>(null);
  const SLIDER_WIDTH = Dimensions.get('window').width;

  const [index, setIndex] = React.useState(0);

  const _goToGallery = () => {
    navigation.navigate('PropertyDetailGallery');
  };

  const _renderItem = ({item}: {item: string}) => (
    <Pressable style={PropertyDetailStyles.carouselCard} onPress={_goToGallery}>
      <ImageIndicator source={item} style={PropertyDetailStyles.image} />
    </Pressable>
  );

  const _onSnapToItem = (index: number) => setIndex(index);

  return (
    <>
      <ButtonArrow
        onPress={goBack}
        containerStyle={PropertyDetailStyles.backButton}
      />
      <Carousel
        removeClippedSubviews
        /* @ts-ignore */
        ref={carouselRef}
        data={imageList}
        renderItem={_renderItem}
        sliderWidth={SLIDER_WIDTH}
        itemWidth={SLIDER_WIDTH}
        onSnapToItem={_onSnapToItem}
      />
      <Pagination
        dotsLength={imageList.length}
        activeDotIndex={index}
        containerStyle={PropertyDetailStyles.carouselPagination}
        dotContainerStyle={PropertyDetailStyles.carouselDotContainer}
        dotStyle={PropertyDetailStyles.carouselDot}
        dotColor={BLACK_COLOR}
        inactiveDotColor={FIFTH_GREY}
        inactiveDotScale={1}
        tappableDots={true}
        /* @ts-ignore */
        carouselRef={carouselRef}
      />
    </>
  );

Do you meet this issue? Is there any way to resolve it? Thank you.

[wangzeshen]

4.0.0-beta6

[AndreBovolini]

Upgrading to '4.0.0-beta6' worked perfectly for me!

[geovrisco]

@wangzeshen @AndreBovolini how to upgrade? mine still on "react-native-snap-carousel": "^3.9.1",

[AndreBovolini]

@geovrisco you can choose the version you want like that:

yarn add [email protected]

[fengjueji]

@geovrisco you can choose the version you want like that:

yarn add [email protected]

Hi，I have the same issues, but I can't find [email protected] in npm or yarn

[geovrisco]

npm i [email protected]

you can just install it like that

[geovrisco]

@AndreBovolini thanks btw,

[AggravatedAstronomer]

For anyone struggling with this, there is a . before the beta number. Without this, the install command will fail @fengjueji @geovrisco

npm i [email protected]

You can find this out for yourself by doing:

npm view react-native-snap-carousel and checking the dist-tags at the bottom.

[ringcoa]

Funny enough npm i didn't work. I used npm install and it worked.

[Navipro70]

enableMomentum fix this issue (RNSC 3.6v.)

[hamzasajid1995]

In [email protected] "enableMomentum" prop is removed. so if you want to stop momentum you have to use disableIntervalMomentum: true Read More

[princefishthrower]

@hamzasajid1995 - do we set disableIntervalMomentum as a prop right on the <Carousel> component? It doesn't appear in the typings...

[jbolter]

4.0.0-beta.6 fixed the issue for me.

[dohooo]

@trilam1409 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

[MrJYJ]

@hamzasajid1995 - do we set disableIntervalMomentum as a prop right on the component? It doesn't appear in the typings...

试试： yarn add [email protected]

[jordan2816]

Anyone know what changes make it correct?

[NensiKasundra]

Any Solution for the above issue?

[ganesh-oracle]

Upgrading to '4.0.0-beta6' worked perfectly for me!

Works perfectly