From 9733c0fd4a2c4f3727a7643695c0f8f93dc7c538 Mon Sep 17 00:00:00 2001 From: XunGong Date: Fri, 21 Jan 2022 13:35:56 +0800 Subject: [PATCH 1/5] refactor: fix script bootstrap --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 9e23c05b..a68725f4 100644 --- a/package.json +++ b/package.json @@ -35,7 +35,7 @@ "android": "yarn --cwd example android", "android:pretty": "yarn --cwd example android:pretty", "pods": "cd example && pod-install --quiet", - "bootstrap": "yarn example && yarn && yarn pods", + "bootstrap": "yarn && yarn pods", "deploy": "cd example && yarn deploy" }, "keywords": [ From 6aa3cc4a557efaa9e3262202f4a98ff960255b54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E6=9D=B1=E6=BE=94?= Date: Sun, 23 Jan 2022 15:19:04 +0800 Subject: [PATCH 2/5] fix: when autoPlay is false, manual sliding will still autoPlay fix #111 --- src/hooks/useAutoPlay.ts | 5 ++++- yarn.lock | 2 +- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/hooks/useAutoPlay.ts b/src/hooks/useAutoPlay.ts index b5b845b1..af5c40d6 100644 --- a/src/hooks/useAutoPlay.ts +++ b/src/hooks/useAutoPlay.ts @@ -35,9 +35,12 @@ export function useAutoPlay(opts: { }, []); const start = React.useCallback(() => { + if (!autoPlay) { + return; + } stopped.current = false; play(); - }, [play]); + }, [play, autoPlay]); React.useEffect(() => { if (autoPlay) { diff --git a/yarn.lock b/yarn.lock index 0c8f0749..992fc823 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3607,7 +3607,7 @@ cz-conventional-changelog@3.2.0: cz-conventional-changelog@^3.3.0: version "3.3.0" - resolved "https://registry.npm.taobao.org/cz-conventional-changelog/download/cz-conventional-changelog-3.3.0.tgz#9246947c90404149b3fe2cf7ee91acad3b7d22d2" + resolved "https://registry.nlark.com/cz-conventional-changelog/download/cz-conventional-changelog-3.3.0.tgz#9246947c90404149b3fe2cf7ee91acad3b7d22d2" integrity sha1-kkaUfJBAQUmz/iz37pGsrTt9ItI= dependencies: chalk "^2.4.1" From 122082b44c32272b9916f538efb3bb1f9807eef4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E6=9D=B1=E6=BE=94?= Date: Sun, 23 Jan 2022 15:20:47 +0800 Subject: [PATCH 3/5] Update yarn.lock --- yarn.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/yarn.lock b/yarn.lock index 992fc823..0c8f0749 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3607,7 +3607,7 @@ cz-conventional-changelog@3.2.0: cz-conventional-changelog@^3.3.0: version "3.3.0" - resolved "https://registry.nlark.com/cz-conventional-changelog/download/cz-conventional-changelog-3.3.0.tgz#9246947c90404149b3fe2cf7ee91acad3b7d22d2" + resolved "https://registry.npm.taobao.org/cz-conventional-changelog/download/cz-conventional-changelog-3.3.0.tgz#9246947c90404149b3fe2cf7ee91acad3b7d22d2" integrity sha1-kkaUfJBAQUmz/iz37pGsrTt9ItI= dependencies: chalk "^2.4.1" From bdb2d74245dfdefe024ba11b462dbe29bd7e18d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E6=9D=B1=E6=BE=94?= Date: Sun, 23 Jan 2022 15:33:18 +0800 Subject: [PATCH 4/5] fix: onProgressChange & onSnapToItem bug when only 2 image fix #74 --- src/Carousel.tsx | 9 +++++---- src/hooks/useInitProps.ts | 22 +++++++++++++--------- src/hooks/useOnProgressChange.ts | 13 +++++++------ 3 files changed, 25 insertions(+), 19 deletions(-) diff --git a/src/Carousel.tsx b/src/Carousel.tsx index 273f13e3..b4dc1ead 100644 --- a/src/Carousel.tsx +++ b/src/Carousel.tsx @@ -25,6 +25,7 @@ function Carousel( const { data, + rawData, loop, mode, style, @@ -58,7 +59,7 @@ function Carousel( }, [loop, size, data]); usePropsErrorBoundary(props); - useOnProgressChange({ size, offsetX, data, onProgressChange }); + useOnProgressChange({ size, offsetX, rawData, onProgressChange }); const carouselController = useCarouselController({ loop, @@ -135,11 +136,11 @@ function Carousel( const renderLayout = React.useCallback( (item: T, i: number) => { let realIndex = i; - if (data.length === DATA_LENGTH.SINGLE_ITEM) { + if (rawData.length === DATA_LENGTH.SINGLE_ITEM) { realIndex = i % 1; } - if (data.length === DATA_LENGTH.DOUBLE_ITEM) { + if (rawData.length === DATA_LENGTH.DOUBLE_ITEM) { realIndex = i % 2; } @@ -162,7 +163,7 @@ function Carousel( ); }, [ - data, + rawData, offsetX, visibleRanges, renderItem, diff --git a/src/hooks/useInitProps.ts b/src/hooks/useInitProps.ts index f08d49f5..b6801a92 100644 --- a/src/hooks/useInitProps.ts +++ b/src/hooks/useInitProps.ts @@ -15,14 +15,17 @@ export type TInitializeCarouselProps = TCarouselProps & | 'height' | 'scrollAnimationDuration' | 'autoPlayInterval' - >; + > & { + // Raw data that has not been processed + rawData: T[]; + }; export function useInitProps( props: TCarouselProps ): TInitializeCarouselProps { const { defaultIndex = 0, - data: _data = [], + data: rawData = [], loop = true, autoPlayInterval: _autoPlayInterval = 1000, scrollAnimationDuration = 500, @@ -39,18 +42,18 @@ export function useInitProps( const autoPlayInterval = Math.max(_autoPlayInterval, 0); const data = React.useMemo(() => { - if (!loop) return _data; + if (!loop) return rawData; - if (_data.length === DATA_LENGTH.SINGLE_ITEM) { - return [_data[0], _data[0], _data[0]]; + if (rawData.length === DATA_LENGTH.SINGLE_ITEM) { + return [rawData[0], rawData[0], rawData[0]]; } - if (_data.length === DATA_LENGTH.DOUBLE_ITEM) { - return [_data[0], _data[1], _data[0], _data[1]]; + if (rawData.length === DATA_LENGTH.DOUBLE_ITEM) { + return [rawData[0], rawData[1], rawData[0], rawData[1]]; } - return _data; - }, [_data, loop]); + return rawData; + }, [rawData, loop]); if (props.mode === 'vertical-stack' || props.mode === 'horizontal-stack') { if (!props.modeConfig) { @@ -63,6 +66,7 @@ export function useInitProps( ...props, defaultIndex, data, + rawData, loop, autoPlayInterval, scrollAnimationDuration, diff --git a/src/hooks/useOnProgressChange.ts b/src/hooks/useOnProgressChange.ts index 92d0db8c..6a61469c 100644 --- a/src/hooks/useOnProgressChange.ts +++ b/src/hooks/useOnProgressChange.ts @@ -9,31 +9,32 @@ export function useOnProgressChange( opts: { size: number; offsetX: Animated.SharedValue; - } & Pick + rawData: TCarouselProps['data']; + } & Pick ) { - const { offsetX, data, size, onProgressChange } = opts; + const { offsetX, rawData, size, onProgressChange } = opts; useAnimatedReaction( () => offsetX.value, (_value) => { let value = _value; - if (data.length === DATA_LENGTH.SINGLE_ITEM) { + if (rawData.length === DATA_LENGTH.SINGLE_ITEM) { value = value % size; } - if (data.length === DATA_LENGTH.DOUBLE_ITEM) { + if (rawData.length === DATA_LENGTH.DOUBLE_ITEM) { value = value % (size * 2); } let absoluteProgress = Math.abs(value / size); if (value > 0) { - absoluteProgress = data.length - absoluteProgress; + absoluteProgress = rawData.length - absoluteProgress; } !!onProgressChange && runOnJS(onProgressChange)(value, absoluteProgress); }, - [onProgressChange, data] + [onProgressChange, rawData] ); } From d0f56262c0ab75ed4ae70bd15b72281175b64ac0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B5=B5=E6=9D=B1=E6=BE=94?= Date: Sun, 23 Jan 2022 15:37:32 +0800 Subject: [PATCH 5/5] chore: release 2.2.2 --- CHANGELOG.md | 8 ++++++++ package.json | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) 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",