Stack of cards example: cards from both side

[aibolorazbekov]

Hello.

I need a carousel slider like in example 3 (Stack of cards). But the problem is that cards should be from both sides: Example

How can i make such kind of slider?

[AdamGerthel]

Uhm, I think you first need to figure out the logic. What's supposed to happen when the top card is swiped? Do both the one on the left and the right move to the top of the stack?

[aibolorazbekov]

I have an example, but this is for web) here

[AdamGerthel]

Well, that's not a stack of cards, that's just a regular carousel (with loop: true). I don't know if react-native-snap-carousel supports the movement of the slides furthest to the back from left to right (and reverse), but if you can live without that, it shouldn't be a problem.

In either case, you shouldn't be using the 'stack' layout, what you linked to is a normal carousel.

If you want the items to overlap, then you can likely solve that with styling.

[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

[nikitakulish]

The only way I found to do something like this was to change 2 functions in the source files. Try to change stackScrollInterpolator and stackAnimatedStyles in node_modules -> react-native-snap-carousel -> src -> utils -> animations.js

in stackScrollInterpolator const range = IS_ANDROID ? [3, 2, 1, 0, -1, -2, -3] : [3, 2, 1, 0, -1, -2, -3];

in stackAnimatedStyles `const opacityOutputRange = carouselProps.inactiveSlideOpacity === 1 ? [1, 1, 1, 0] : [1, 0.75, 0.5, 0]; return IS_ANDROID ? { // elevation: carouselProps.data.length - index, // fix zIndex bug visually, but not from a logic point of view zIndex: animatedValue.interpolate({ inputRange: [-3, -2, -1, 0, 1, 2, 3], outputRange: [0, 1, 2, 3, 2, 1, 0], extrapolate: 'clamp' }), opacity: animatedValue.interpolate({ inputRange: [ -3, -2, -1, 0, 1, 2, 3], outputRange: [0, 0.5, 1, 1, 1, 0.75, 0], extrapolate: 'clamp' }), transform: [{ scale: animatedValue.interpolate({ inputRange: [-2, -1, 0, 1, 2], outputRange: [card2Scale, card1Scale, 1, card1Scale, card2Scale], extrapolate: 'clamp' }) }, {

            inputRange: [-3, -2, -1, 0, 1, 2, 3],
            outputRange: [
                250,
                250,
                85,
                0,
                -75,
                -220,
                0
            ],
            extrapolate: 'clamp'
        })
    }]
} : {
    zIndex: animatedValue.interpolate({
        inputRange: [-3, -2, -1, 0, 1, 2, 3],
        outputRange: [0, 1, 2, 3, 2, 1, 0],
        extrapolate: 'clamp'
    }),
    opacity: animatedValue.interpolate({
        inputRange: [ -3, -2, -1, 0, 1, 2, 3],
        outputRange: [0, 0.5, 1, 1, 1, 0.75, 0],
        extrapolate: 'clamp'
    }),
    transform: [{
        scale: animatedValue.interpolate({
            inputRange: [-2, -1, 0, 1, 2],
            outputRange: [card2Scale, card1Scale, 1, card1Scale, card2Scale],
            extrapolate: 'clamp'
        })
    }, {
        [translateProp]: animatedValue.interpolate({
            inputRange: [-3, -2, -1, 0, 1, 2, 3],
            outputRange: [
                240,
                240,
                105,
                0,
                -105,
                -240,
                0
            ],
            extrapolate: 'clamp'
        })
    }]
};`