ANIMATION TESTING

CardCascade.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import {View, Text, StyleSheet, Dimensions, StatusBar} from 'react-native';
import Animated, {
  diffClamp,
  interpolate,
  Extrapolate,
  add,
} from 'react-native-reanimated';
import {PanGestureHandler} from 'react-native-gesture-handler';
import {usePanGestureHandler, withOffset, withDecay} from 'react-native-redash';

const TOP_COLOR = '#283593';
const HEADER_HEIGHT = 80;
const CARD_HEIGHT = 200 + 20;
const {height} = Dimensions.get('screen');

const style = StyleSheet.create({
  header: {
    backgroundColor: TOP_COLOR,
    height: HEADER_HEIGHT,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 10,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 3,
    },
    shadowOpacity: 0.27,
    shadowRadius: 4.65,

    elevation: 6,
  },
  header_text: {
    color: 'white',
    fontSize: 20,
    textAlign: 'center',
  },
  card: {
    backgroundColor: 'green',
    padding: 20,
    height: CARD_HEIGHT - 20,
    borderRadius: 10,
    shadowColor: '#0000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.23,
    shadowRadius: 2.62,

    elevation: 4,
  },
  card_title: {
    marginTop: 10,
  },
  card_text: {
    fontSize: 20,
    fontWeight: 'bold',
    color: 'white',
    fontStyle: 'italic',
  },
  content: {
    marginVertical: 25,
  },
  content_text: {
    fontSize: 20,
    color: 'white',
    letterSpacing: 5,
  },
  footer: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginBottom: 10,
  },
  meta: {},
  meta_title: {
    fontSize: 10,
    color: 'white',
  },
  meta_text: {
    color: 'white',
  },
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#eeeeee',
  },
  card_container: {
    marginVertical: 10,
  },
});

const Cards = ({color}) => (
  <View style={[style.card, {backgroundColor: color}]}>
    <View style={style.card_title}>
      <Text style={style.card_text}>VISA</Text>
    </View>
    <View style={style.content}>
      <Text style={style.content_text}>**** **** **** 3728</Text>
    </View>
    <View style={style.footer}>
      <View style={style.meta}>
        <Text style={style.meta_title}>Card Holder Name</Text>
        <Text style={style.meta_text}>Kabeer Khan</Text>
      </View>
      <View style={style.meta}>
        <Text style={style.meta_title}>Expiry Date</Text>
        <Text style={style.meta_text}>05/22</Text>
      </View>
    </View>
  </View>
);

const App = () => {
  const container_height = height - HEADER_HEIGHT;
  const cards = [
    {
      color: '#00796b',
    },
    {
      color: '#ef6c00',
    },
    {
      color: '#c2185b',
    },
    {
      color: '#7b1fa2',
    },
    {
      color: '#283593',
    },
    {
      color: '#d84315',
    },
  ];

  const vis_cards = Math.floor(container_height / CARD_HEIGHT);

  const {gestureHandler, translation, velocity, state} = usePanGestureHandler();

  const y = diffClamp(
    withDecay({
      value: translation.y,
      velocity: velocity.y,
      state,
    }),
    -CARD_HEIGHT * cards.length + vis_cards * CARD_HEIGHT - HEADER_HEIGHT,
    0,
  );

  return (
    <>
      <StatusBar backgroundColor={TOP_COLOR} barStyle="light-content" />
      <View style={style.header}>
        <Text style={style.header_text}>CARD CASCADER</Text>
      </View>
      <View style={style.container}>
        <PanGestureHandler {...gestureHandler}>
          <Animated.View>
            {cards.map((item, i) => {
              const translateY = interpolate(y, {
                inputRange: [-CARD_HEIGHT * i, 0],
                outputRange: [-CARD_HEIGHT * i, 0],
                extrapolate: Extrapolate.CLAMP,
              });

              const positionY = add(y, i * CARD_HEIGHT);
              const isDisappearing = -CARD_HEIGHT;
              const isTop = 0;
              const isBotton = CARD_HEIGHT * (vis_cards - 1);
              const isAppearing = CARD_HEIGHT * vis_cards;

              const scale = interpolate(positionY, {
                inputRange: [isDisappearing, isTop, isBotton, isAppearing],
                outputRange: [0.5, 1, 1, 0.5],
                extrapolate: Extrapolate.CLAMP,
              });

              const opacity = interpolate(positionY, {
                inputRange: [isDisappearing, isTop, isBotton, isAppearing],
                outputRange: [0, 1, 1, 0],
                extrapolate: Extrapolate.CLAMP,
              });

              return (
                <Animated.View
                  style={[
                    style.card_container,
                    {transform: [{translateY}, {scale}], opacity},
                  ]}
                  key={i}>
                  <Cards {...item} />
                </Animated.View>
              );
            })}
          </Animated.View>
        </PanGestureHandler>
      </View>
    </>
  );
};

export default App;

package.json

{
  "name": "animernapp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "16.11.0",
    "react-native": "0.62.2",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-reanimated": "^1.9.0",
    "react-native-redash": "^14.1.1"
  },
  "devDependencies": {
    "@babel/core": "^7.6.2",
    "@babel/runtime": "^7.6.2",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.9.0",
    "eslint": "^6.5.1",
    "jest": "^24.9.0",
    "metro-react-native-babel-preset": "^0.58.0",
    "react-test-renderer": "16.11.0"
  },
  "jest": {
    "preset": "react-native"
  }
}