How do I make a proper "endless" loop even if there is only one element?

[falk-stefan]

I am not quite sure if I am just doing it wrong, or if what I am trying to do is simply not supported.

If I set loop={true}, I would expect the entire canvas to be filled with items. No matter if there is just one element or more.

However, I am facing two problem atm:

First, what I just describe does not work - at least I am not able to get this right:

video_2025-05-25_14-26-03.mp4

and second, even if there are more items, somehow the right most item seems to just "pop into existence" as you can see:

video_2025-05-25_14-25-22.mp4

The Code

I am currently running with version ^4.0.2 and below is what I currently have (as I am experimenting basically).

import { GestureHandlerRootView } from 'react-native-gesture-handler';
import Carousel from 'react-native-reanimated-carousel';
import React, { JSX, useState } from 'react';
import { CarouselRenderItemInfo } from 'react-native-reanimated-carousel/src/types';
import { LayoutChangeEvent, useWindowDimensions, View } from 'react-native';

const styles = {
  gestureHandler: { flex: 1, width: '100%' },
};

type CarouselViewProps<T> = {
  items: T[];
  itemWidth: number;
  height: number;
  renderItem: (item: CarouselRenderItemInfo<T>) => JSX.Element;
};

export const CarouselView = <T,>({
  items,
  itemWidth = 330,
  height = 320,
  renderItem,
}: CarouselViewProps<T>) => {
  const [containerWidth, setContainerWidth] = useState(999);
  const { width: screenWidth } = useWindowDimensions();

  console.log(containerWidth);

  const handleLayout = (event: LayoutChangeEvent) => {
    setContainerWidth(event.nativeEvent.layout.width);
  };

  return (
    <View className="w-full bg-green-200 mt-1 mb-1" onLayout={handleLayout}>
      <GestureHandlerRootView style={{ width: '100%' } as const}>
        <Carousel
          loop={true}
          snapEnabled={false}
          autoFillData={false}
          pagingEnabled={false}
          // containerStyle={{
          //   width: containerWidth,
          //   backgroundColor: 'yellow',
          //   marginTop: 2,
          //   marginBottom: 2,
          // }}
          width={itemWidth}
          height={height}
          data={items}
          style={{ width: '100%' } as const}
          renderItem={(item) => (
            <View className="bg-black" style={{ width: itemWidth }}>
              {renderItem(item)}
            </View>
          )}
          onConfigurePanGesture={(g) => {
            // Disable vertical gestures
            g.activeOffsetY([-999999, 999999]);
            // Enable horizontal gestures with a small threshold
            g.activeOffsetX([-15, 15]);
          }}
        />
      </GestureHandlerRootView>
    </View>
  );
};

Any help would be much appreciated.