Custom animation that scrolls to 2 items, not 1

[devoren]

Hi! I have a vertical carousel which is disabled for scrolling. I want to create a custom animation that scrolls to 2 items, not 1. When the carousel scrolls, only 1 item scrolls, not 2. Do you know how to implement this? What i have now:

const itemSize = scale.size(50);

const animationStyle = React.useCallback(
(value: number) => {
    'worklet';

    const translate = interpolate(value, [0, 1], [0, itemSize]);

    return {
        transform: [
            {
                translateY: translate,
            },
        ],
    };
},
[itemSize],
);

return (
<RNCarousel
    vertical
    ref={ref}
    height={scale.size(50)}
    data={data}
    loop={true}
    autoPlay={true}
    pagingEnabled={false}
    autoPlayInterval={5000}
    scrollAnimationDuration={600}
    windowSize={3}
    renderItem={renderItem}
    enabled={false}
    overscrollEnabled={false}
    style={{
        width: window.width,
        height: scale.size(100),
    }}
    customAnimation={animationStyle}
/>
);

[dohooo]

Maybe you can render two items in one? Just like

const itemWidth = xx;
const itemHeight = xx;
<RNCarousel
    vertical
    ref={ref}
        width={itemWidth}
    height={itemWidth*2}
    data={[
        [1,2],

        [3,4],

        [5,6],
    ]}
    loop={true}
    autoPlay={true}
    pagingEnabled={false}
    autoPlayInterval={5000}
    scrollAnimationDuration={600}
    windowSize={3}
    renderItem={({item})=>{
        const [item_1,item_2] = item; 

        return ...
    }}
    enabled={false}
    overscrollEnabled={false}
    style={{
        width: itemWidth,
        height: itemHeight,
    }}
    customAnimation={animationStyle}
/>

Hope I understand your question correctly.

[devoren]

@dohooo This is what I want 💯 Thank you very much!