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

Question

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>

Answer 1

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

UPDATE: This is a closer approach of what you are searching, depdending on your needs you'll have to adujst width and height properties.

Result:

Carousel:

import React from 'react'
import { View, SafeAreaView, StatusBar, StyleSheet, Dimensions } from 'react-native'
import Carousel from 'react-native-reanimated-carousel';
import TestItem from '../components/test/TestItem';

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

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

    const baseOptions = {
        parallaxScrollingOffset: 220,
        parallaxScrollingScale: 1,
        parallaxAdjacentItemScale: 1,
    }

    return (
        <SafeAreaView style={styles.safeArea}>
            <StatusBar/>

            <View style={styles.container}>
                
                <Carousel
                    loop={false}
                    autoPlay={false}
                    width={styles.container.width}
                    defaultIndex={1}
                    height={200}
                    data={data} 
                    style={{backgroundColor: 'green'}}
                    mode="parallax"
                    modeConfig={baseOptions}
                    renderItem={ ({index}) => <TestItem index={index}/>}>
                </Carousel>
               
            </View>
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    safeArea: {
        flex: 1,
        backgroundColor: 'black'
    },
    container: {
        backgroundColor: 'blue',
        position: 'relative',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        width: windowDimensions.width
    },
})

Item:

import { View, Text, StyleSheet } from 'react-native'
import React from 'react'

export default function TestItem(props) 
{
    const { index } = props;

    return (
        <View style={sytles.container}>
            <View style={sytles.content}>
                <Text>Image { index + 1}</Text>
            </View>
            <View>
                <Text>Your description</Text>
            </View>
        </View>
    )
}

const sytles = StyleSheet.create({
    container: {
        alignSelf: 'center',
        height: "100%",
        width: 150,
        backgroundColor: 'purple'
    },
    content: {
        backgroundColor: 'red',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        width: "100%",
        height: 150,
    },
    text: {
        color: 'white',
    }
})

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