Opacity issue in vertical manner card swipe

[harshalkd]

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

[dohooo]

Sorry, please allow me to advertise for my open source library! ~ I think this library react-native-reanimated-carousel will solve your problem. It is a high performance and very simple component, complete with React-Native reanimated 2