diff --git a/CHANGELOG.md b/CHANGELOG.md index e0bb80ff..cabdf2cf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,11 @@ +## [2.2.2](https://github.com/dohooo/react-native-reanimated-carousel/compare/v2.2.1...v2.2.2) (2022-01-23) + + +### Bug Fixes + +* onProgressChange & onSnapToItem bug when only 2 image ([bdb2d74](https://github.com/dohooo/react-native-reanimated-carousel/commit/bdb2d74245dfdefe024ba11b462dbe29bd7e18d6)), closes [#74](https://github.com/dohooo/react-native-reanimated-carousel/issues/74) +* when autoPlay is false, manual sliding will still autoPlay ([6aa3cc4](https://github.com/dohooo/react-native-reanimated-carousel/commit/6aa3cc4a557efaa9e3262202f4a98ff960255b54)), closes [#111](https://github.com/dohooo/react-native-reanimated-carousel/issues/111) + ## [2.2.1](https://github.com/dohooo/react-native-reanimated-carousel/compare/v2.1.2...v2.2.1) (2022-01-16) diff --git a/package.json b/package.json index a68725f4..4001f4be 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-reanimated-carousel", - "version": "2.2.1", + "version": "2.2.2", "description": "Simple carousel component.fully implemented using Reanimated 2.Infinitely scrolling, very smooth.", "main": "lib/commonjs/index", "module": "lib/module/index", diff --git a/src/Carousel.tsx b/src/Carousel.tsx index b4dc1ead..c792d4ea 100644 --- a/src/Carousel.tsx +++ b/src/Carousel.tsx @@ -90,21 +90,25 @@ function Carousel( carouselController, }); - const scrollViewGestureOnScrollBegin = React.useCallback(() => { - pause(); - onScrollBegin?.(); - }, [onScrollBegin, pause]); - const _onScrollEnd = React.useCallback(() => { computedIndex(); onScrollEnd?.(sharedPreIndex.current, sharedIndex.current); }, [sharedPreIndex, sharedIndex, computedIndex, onScrollEnd]); + const scrollViewGestureOnScrollBegin = React.useCallback(() => { + pause(); + onScrollBegin?.(); + }, [onScrollBegin, pause]); + const scrollViewGestureOnScrollEnd = React.useCallback(() => { start(); _onScrollEnd(); }, [_onScrollEnd, start]); + const scrollViewGestureOnTouchBegin = React.useCallback(pause, [pause]); + + const scrollViewGestureOnTouchEnd = React.useCallback(start, [start]); + const goToIndex = React.useCallback( (i: number, animated?: boolean) => { carouselController.to(i, animated); @@ -186,6 +190,8 @@ function Carousel( translation={handlerOffsetX} onScrollBegin={scrollViewGestureOnScrollBegin} onScrollEnd={scrollViewGestureOnScrollEnd} + onTouchBegin={scrollViewGestureOnTouchBegin} + onTouchEnd={scrollViewGestureOnTouchEnd} > void; onScrollBegin?: () => void; + onScrollEnd?: () => void; + onTouchBegin?: () => void; + onTouchEnd?: () => void; style?: StyleProp; translation: Animated.SharedValue; } @@ -45,7 +47,14 @@ const IScrollViewGesture: React.FC = (props) => { }, } = React.useContext(CTX); - const { translation, onScrollBegin, onScrollEnd, size } = props; + const { + translation, + size, + onScrollBegin, + onScrollEnd, + onTouchBegin, + onTouchEnd, + } = props; const maxPage = data.length; const isHorizontal = useDerivedValue(() => !vertical, [vertical]); @@ -116,22 +125,28 @@ const IScrollViewGesture: React.FC = (props) => { ] ); - const resetBoundary = React.useCallback(() => { - 'worklet'; - const onFinish = (isFinished: boolean) => { + const onFinish = React.useCallback( + (isFinished: boolean) => { + 'worklet'; if (isFinished) { touching.value = false; onScrollEnd && runOnJS(onScrollEnd)(); } - }; - const activeDecay = () => { - touching.value = true; - translation.value = withDecay( - { velocity: scrollEndVelocity.value }, - onFinish - ); - }; + }, + [onScrollEnd, touching] + ); + + const activeDecay = React.useCallback(() => { + 'worklet'; + touching.value = true; + translation.value = withDecay( + { velocity: scrollEndVelocity.value }, + onFinish + ); + }, [onFinish, scrollEndVelocity.value, touching, translation]); + const resetBoundary = React.useCallback(() => { + 'worklet'; if (touching.value) { return; } @@ -158,15 +173,14 @@ const IScrollViewGesture: React.FC = (props) => { } } }, [ - infinite, - touching, - _withSpring, + touching.value, translation, - scrollEndTranslation, - scrollEndVelocity, - onScrollEnd, maxPage, size, + scrollEndTranslation.value, + infinite, + activeDecay, + _withSpring, ]); useAnimatedReaction( @@ -176,7 +190,7 @@ const IScrollViewGesture: React.FC = (props) => { resetBoundary(); } }, - [pagingEnabled] + [pagingEnabled, resetBoundary] ); const panGestureEventHandler = useAnimatedGestureHandler< @@ -227,7 +241,16 @@ const IScrollViewGesture: React.FC = (props) => { } }, }, - [pagingEnabled, isHorizontal.value, infinite, maxPage, size, enableSnap] + [ + pagingEnabled, + isHorizontal.value, + infinite, + maxPage, + size, + enableSnap, + onScrollBegin, + onScrollEnd, + ] ); const directionStyle = React.useMemo(() => { @@ -235,7 +258,11 @@ const IScrollViewGesture: React.FC = (props) => { }, [vertical]); return ( - + { + if (!autoPlay) { + return; + } timer.current && clearInterval(timer.current); stopped.current = true; - }, []); + }, [autoPlay]); const start = React.useCallback(() => { if (!autoPlay) {