Implement complex items interaction (cards stack)

[bd-arc]

The goal is to implement the following kind of interaction, relying only on the FlatList component and on Animated interpolations. It might not be possible, but we need to find out :-)

Event-cards-iOS-interaction, by Divan Raj

Onboarding, by Luobing

InVision Studio - Movies app concept, by Charles Patterson for InVision

[bd-arc]

See also #244

[bd-arc]

And yes, this is possible 🎉

    _initPositionsAndInterpolators (props = this.props) {

        [...]

            } else {
                animatedValue = this._scrollPos.interpolate({
                    inputRange: [
                        (_index - 3) * sizeRef,
                        (_index - 2) * sizeRef,
                        (_index - 1) * sizeRef,
                        _index * sizeRef,
                        (_index + 1) * sizeRef
                    ],
                    outputRange: [3, 2, 1, 0, -1],
                    extrapolate: 'clamp'
                });
            }

            interpolators.push(animatedValue);
        });

        this.setState({ interpolators });
    }

    _renderItem ({ item, index }) {
        const { interpolators } = this.state;
        const {
            data,
            ...
        } = this.props;

        const animatedValue = interpolators && interpolators[index];

        if (!animatedValue && animatedValue !== 0) {
            return false;
        }

        [...]

        const animatedStyle = animate ? {
            zIndex: data.length - index,
            opacity: animatedValue.interpolate({
                inputRange: [-1, 0, 1, 2, 3],
                outputRange: [1, 1, 0.75, 0.5, 0]
            }),
            transform: [{
                scale: animatedValue.interpolate({
                    inputRange: [-1, 0, 1, 2, 3],
                    outputRange: [0.9, 1, 0.9, 0.8, 0.8]
                })
            }, {
                translateX: animatedValue.interpolate({
                    inputRange: [-1, 0, 1, 2, 3],
                    outputRange: [
                        -itemWidth * 0.5,
                        0,
                        -itemWidth * 0.99,
                        -itemWidth * 2.25,
                        -itemWidth * 3.45
                    ]
                })
            }]
        } : {};

        [...]
    }

I'm now going to work on adding the ability to use a custom interpolator like this one.

[bd-arc]

Feature released in version 3.6.0.