I want to create a carousel like the one shown below. The center item will have a higher elevation to indicate that this is the current item and whenever the user scrolls, the next item will be elevated and so on. The center item will be overlapping the left and the right item. I tried to use react-native-snap-carousel with the stack option, but that only shows the left item and in case of ios, only the right item. I tried tinder, but that is quite same as well. I tried default, but there are gaps in between each item which I do not want. I tried react-native-anchor-carousel. But, this makes the center item transparent for some reason.

<Carousel
      style={styles.carousel}
      data={review}
      renderItem={renderitem}
      itemWidth={240}
      activeSlideAlignment="center"
      sliderWidth={windowWidth - 20}
      separatorWidth={-100}
      itemContainerStyle={{
        alignItem: 'center',
        marginTop: 18,
      }}
      inActiveOpacity={0.1}
      ref={carouselRef}
      loop={true}
/>

Render Item is below

 const renderitem = ({item}) => {
    return (
      <View
        style={[styles.item]}
        onPress={() => {
          this._carousel.scrollToIndex(index);
        }}>
        <View style={styles.circle}>
          <Image
            style={styles.image}
            source={{uri: item.serviceImage}}
            resizeMode="cover"
          />
        </View>
        <Text style={styles.serviceNameText}>{item.serviceName}</Text>
        <Text style={styles.name}>{item.reviewerName}</Text>

        <Text style={styles.content}>{item.content}</Text>
      </View>
    );
  };