diff --git a/src/Carousel.tsx b/src/Carousel.tsx index 3efe9db4..e9ab2467 100644 --- a/src/Carousel.tsx +++ b/src/Carousel.tsx @@ -95,6 +95,13 @@ export interface ICarouselProps { Partial, 'onHandlerStateChange' >; + /** + * Determines the maximum number of items will respond to scroll animation events, + * windowSize={11} will active visible item plus up to 5 items above and 5 below the viewpor, + * Reducing this number will reduce the calculation of the animation value and may improve performance. + * @default 0 + */ + windowSize?: number; /** * Render carousel item. */ @@ -161,6 +168,7 @@ function Carousel( renderItem, onSnapToItem, onProgressChange, + windowSize, } = props; usePropsErrorBoundary({ @@ -384,6 +392,7 @@ function Carousel( total: data.length, viewSize: width, translation: handlerOffsetX, + windowSize, }); const renderLayout = React.useCallback( diff --git a/src/hooks/useOffsetX.ts b/src/hooks/useOffsetX.ts index 0358c76c..0f1c2349 100644 --- a/src/hooks/useOffsetX.ts +++ b/src/hooks/useOffsetX.ts @@ -31,12 +31,10 @@ export const useOffsetX = (opts: IOpts, visibleRanges: IVisibleRanges) => { const HALF_WIDTH = 0.5 * width; const x = useDerivedValue(() => { - function inRange(i: number, range: number[]) { - return i >= range[0] && i <= range[1]; - } + const { negativeRange, positiveRange } = visibleRanges.value; if ( - !inRange(index, visibleRanges.value.negativeRange) && - !inRange(index, visibleRanges.value.positiveRange) + (index < negativeRange[0] || index > negativeRange[1]) && + (index < positiveRange[0] || index > positiveRange[1]) ) { return Number.MAX_SAFE_INTEGER; } diff --git a/src/hooks/useVisibleRanges.tsx b/src/hooks/useVisibleRanges.tsx index 3a30b151..97bb3f4e 100644 --- a/src/hooks/useVisibleRanges.tsx +++ b/src/hooks/useVisibleRanges.tsx @@ -9,19 +9,14 @@ export type IVisibleRanges = Animated.SharedValue<{ export function useVisibleRanges(options: { total: number; viewSize: number; - positiveCount?: number; - negativeCount?: number; + windowSize?: number; translation: Animated.SharedValue; }): IVisibleRanges { - const { - total, - viewSize, - positiveCount = 1, - negativeCount = 1, - translation, - } = options; + const { total, viewSize, windowSize = 0, translation } = options; const ranges = useDerivedValue(() => { + const positiveCount = Math.round(windowSize / 2); + const negativeCount = windowSize - positiveCount; let curIndex = Math.round(-translation.value / viewSize); curIndex = curIndex < 0 ? (curIndex % total) + total : curIndex; const negativeRange = [ @@ -41,7 +36,7 @@ export function useVisibleRanges(options: { positiveRange[0] = 0; } return { negativeRange, positiveRange }; - }, [positiveCount, positiveCount, total, translation]); + }, [total, windowSize, translation]); return ranges; } diff --git a/src/utils/log.ts b/src/utils/log.ts index 23aea112..9061b4fa 100644 --- a/src/utils/log.ts +++ b/src/utils/log.ts @@ -2,6 +2,6 @@ * In worklet * e.g. runOnJS(lop)(...); */ -export function log(msg: any) { - console.log(msg); +export function log(...msg: any) { + console.log(...msg); }