How can I create a carousel with multiple item like the image attached?

is there any library out there that can create such a carousel ? I have tried react-native-snap-carousel, but it doesn’t have this feature.

I have also tried react-native-reanimated-carousel, but their documentation wasn’t of great help. could you try pointing me in the right direction ?

If there’s a way to write it out without a library with less bugs, it would be helpful, because i’m going to be rendering a lot of this component on the home screen.

the react-native-snap-carousel

<ScrollView style={{ backgroundColor: "#f2f2f2" }}>
      {/* Pagination Carousel */}
      <Carousel
        ref={isCarousel}
        onSnapToItem={(page) => setPage(page)}
        data={entries}
        renderItem={renderItem4}
        sliderWidth={400}
        itemWidth={250}
        hasParallaxImages={true}
      />
      <Pagination
        activeDotIndex={page}
        carouselRef={isCarousel}
        tappableDots={true}
        inactiveDotOpacity={0.4}
        inactiveDotScale={0.6}
        dotsLength={exploreSongs.length}
        dotStyle={{
          width: 10,
          height: 10,
          borderRadius: 100,
          backgroundColor: "#F54800",
        }}
        inactiveDotStyle={{
          backgroundColor: "grey",
        }}
        containerStyle={{
          marginTop: -30,
        }}
      />

      <View style={{ marginTop: 100 }}></View>
    </ScrollView>

With react-native-reanimated-carousel this should work correctly:

import React from 'react'
import { View, Text, Dimensions } from 'react-native'
import Carousel from 'react-native-reanimated-carousel'

const windowDimensions = Dimensions.get('screen');

export default function CarouselComponent() 
{ 
    const data = [...Array(3).keys()];

    return (
         
        <Carousel
            loop={false}
            autoPlay={false}
            width={windowDimensions.width}
            height={windowDimensions.width}
            data={data} 
            style={{backgroundColor: 'green'}}
            mode="parallax"
            modeConfig={{parallaxScrollingOffset: 200, parallaxScrollingScale: 0.9}}
            renderItem={ () =>
                <View style={{width: '50%', height: '100%', backgroundColor: 'red', alignSelf: 'center'}}>
                    <Text>View</Text>
                </View>
            }>

        </Carousel>
    )
}

Check parallax example on its repo to see a better implementation: https://github.com/dohooo/react-native-reanimated-carousel/blob/main/example/app/src/pages/parallax/index.tsx