Off behavior when

[Eljoy]

When itemWidth is less than the width of the actual content the content itself is being cut off.
This could be useful when one wants to have side items being visible.

Expected behavior:

Actual behavior:

export const Carousel = withCarouselContext(
  ({ extractImageUrl, ...props }: Props) => {
    const { width, height } = useWindowDimensions();
    return (
      <View>
        <CarouselRN
          style={styles.carousel}
          loop
          itemWidth={width - 60}
          inactiveOpacity={1}
          inactiveScale={0.82}
          renderItem={(data) => {
            return (
              <View
                style={{
                  borderRadius: 24,
                  width: width - 40,
                  height: 183,
                  overflow: 'hidden',
                  justifyContent: 'center',
                  zIndex: 300,
                }}
              >
                <Image
                  source={{ uri: data.item }}
                  style={[
                    { width: width },
                    styles.image,
                  ]}
                />
              </View>
            );
          }}
          {...props}
        />
      </View>
    );
  }
);

const styles = StyleSheet.create({
  image: {
    borderRadius: 24,
    height: 183,
  },
})