Opacity issue in vertical manner card swipe

HI team I want to integrate inshorts type UI so below is my code for that

main.js

const isTinder = type === 'stack';
return (
<View style={[styles.exampleContainer, isTinder ? styles.exampleContainerDark : styles.exampleContainerLight]}>
<Carousel
ref={'carousel'}
//data={isTinder ? this.state.data : ENTRIES1}
data={this.state.data}
//renderItem={isTinder ? this._renderLightItem : this._renderItem}
renderItem={this._renderItem}
sliderWidth={sliderWidth}
itemWidth={itemWidth}
itemHeight={screenHeight}
sliderHeight={screenHeight}
containerCustomStyle={styles.slider}
contentContainerCustomStyle={styles.sliderContentContainer}
layout={type}
loop={false}
vertical={true}

            />
        </View>
    );

animation.js file

export function stackAnimatedStyles (index, animatedValue, carouselProps, cardOffset) {
const sizeRef = carouselProps.vertical ? carouselProps.itemHeight : carouselProps.itemWidth;
const translateProp = carouselProps.vertical ? 'translateY' : 'translateX';

const card1Scale = 0.9;
const card2Scale = 0.8;

cardOffset = !cardOffset && cardOffset !== 0 ? 18 : cardOffset;

const getTranslateFromScale = (cardIndex, scale) => {
    const centerFactor = 1 / scale * cardIndex;
    const centeredPosition = -Math.round(sizeRef * centerFactor);
    const edgeAlignment = Math.round((sizeRef - (sizeRef * scale)) / 2);
    const offset = Math.round(cardOffset * Math.abs(cardIndex) / scale);
    const output = IS_ANDROID ?
    centeredPosition - edgeAlignment - offset :
    centeredPosition + edgeAlignment + offset;
    console.log("getTranslateFromScale "+ output);
    
    return output;


};


return IS_ANDROID ? {
    opacity: animatedValue.interpolate({
        inputRange: [0,1],
        outputRange: [1,0],
        extrapolate: 'clamp',
    }),
    
    transform: [{
        scale: animatedValue.interpolate({
            inputRange: [-1, 0, 1, 2],
            outputRange: [card1Scale, 1, card1Scale, card2Scale],
            extrapolate: 'clamp'
        })
    }, {
        [translateProp]: animatedValue.interpolate({
            inputRange: [-1, 0, 1, 2, 3],
            outputRange: [
                -sizeRef * 0.5,
                0,
                getTranslateFromScale(1, card1Scale),
                getTranslateFromScale(2, card2Scale),
                getTranslateFromScale(3, card2Scale)
            ],
           
            extrapolate: 'clamp'
        })
    }]
} : {
    zIndex: carouselProps.data.length - index,
    opacity: animatedValue.interpolate({
        inputRange: [0, 1, 2, 3],
        outputRange: [1, 0.75, 0.5, 0],
        extrapolate: 'clamp'
    }),
    transform: [{
        scale: animatedValue.interpolate({
            inputRange: [-1, 0, 1, 2],
            outputRange: [card1Scale, 1, card1Scale, card2Scale],
            extrapolate: 'clamp'
        })
    }, {
        [translateProp]: animatedValue.interpolate({
            inputRange: [-1, 0, 1, 2, 3],
            outputRange: [
                -sizeRef * 0.5,
                0,
                getTranslateFromScale(1, card1Scale),
                getTranslateFromScale(2, card2Scale),
                getTranslateFromScale(3, card2Scale)
            ],
            extrapolate: 'clamp'
        })
    }]
};

}

I face below issue
https://im.ezgif.com/tmp/ezgif-1-c08cf2d7316e.gif

I want inshort app type UI when user swipe bottom at that time opacity of first card shoudl not down so how can i solve this ? Please help me out on this issue

Start with the vertical stack configuration in main.js and the stackAnimatedStyles function in animation.js, then reproduce the swipe shown in the linked GIF. Compare the platform-specific opacity interpolation and confirm the first card retains the intended opacity during a downward swipe on the affected platform.