How do I stack cards up in React Native? (react-native-animated, scrollview)

Question

I tried.

But, there is a problem that you can see a part on the card. How do I solve this?

I used react-native-reanimated-carousel, react-native-swiper, react-native-snap-carousel But, This is a problem with infinite scrolling or there is a problem with scrollToTop, so i have to make it myself.

import React from 'react';
import { Extrapolate } from 'react-native-reanimated';
import { Dimensions, StyleSheet, Text, View, Animated } from 'react-native';

const { width: WINDOW_WIDTH, height: WINDOW_HEIGHT } = Dimensions.get('window');

const baseOptions = {
  width: WINDOW_WIDTH,
  height: Math.floor(WINDOW_HEIGHT * 0.725),
  gap: 16,
  itemHeight: 0,
};
baseOptions.itemHeight = baseOptions.height + baseOptions.gap;

const Test = () => {
  const scrollY = React.useRef(new Animated.Value(0)).current;

  return (
    <View style={styles.homeContainer}>
      <Animated.ScrollView
        disableIntervalMomentum
        horizontal={false}
        showsHorizontalScrollIndicator={false}
        showsVerticalScrollIndicator={false}
        snapToInterval={baseOptions.itemHeight}
        snapToAlignment='start'
        decelerationRate='fast'
        scrollEventThrottle={16}
        onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], {
          useNativeDriver: true,
        })}
      >
        {[1, 2, 3, 4, 5, 6, 7].map((card, index) => {
          const inputRange = [
            (index - 1) * baseOptions.itemHeight,
            index * baseOptions.itemHeight,
            (index + 1) * baseOptions.itemHeight,
          ];
          const scale = scrollY.interpolate({
            inputRange,
            outputRange: [1, 1, 0.9],
            extrapolate: 'clamp',
          });

          const translateY = scrollY.interpolate({
            inputRange,
            outputRange: [0, 0, baseOptions.itemHeight],
            extrapolate: 'clamp',
          });

          const zIndex = scrollY.interpolate({
            inputRange,
            outputRange: [1000, 0, -1000],
            extrapolate: 'clamp',
          });

          return (
            <Animated.View
              key={card}
              style={{
                zIndex,
                transform: [{ translateY }, { scale }],
              }}
            >
              <View style={styles.box}>
                <Text style={styles.text}>{card}</Text>
              </View>
            </Animated.View>
          );
        })}
      </Animated.ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  homeContainer: {
    flex: 1,
    position: 'relative',
    alignItems: 'center',
    paddingTop: 88,
    backgroundColor: 'black',
  },
  box: {
    width: baseOptions.width - 32,
    height: baseOptions.height,
    marginBottom: baseOptions.gap,
    backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 70,
  },
});

export default Test;

Watch the problematic video.

---

Please pay attention to the red box

There is a problem that you can see some of the previous 2 cards when you slide. I don't understand why that looks.

Thank you.