Completed Day 5

README.md

@@ -19,3 +19,7 @@ This React Native component is a customizable, dynamic, and animated tab bar wit
 # Day 4 Sticky Header
 
 Sticky Header component that interpolates its content to the Y-axis origin based on the defined value.
+
+# Day 5 Animated Cards
+
+The AnimatedCards component displays a list of cards (Master or Visa) that can be expanded when pressed. When a card is expanded, the component navigates to the CardDetail screen. The cards are animated with React Native Reanimated, and the animations include moving the cards to their expanded positions, changing the opacity of the close button, and translating the title.

animated-cards/@types/index.ts

@@ -0,0 +1,9 @@
+type RootStackParamList = {
+  AnimatedCards: undefined;
+  CardDetail: { card: "master" | "visa" };
+};
+
+type TabParamList = {
+  AnimatedCards: undefined;
+  CardDetail: undefined;
+};

animated-cards/App.tsx

@@ -0,0 +1,16 @@
+import { StyleSheet } from "react-native";
+import React from "react";
+import { NavigationContainer } from "@react-navigation/native";
+import AppNavigation from "./src/containers/AppNavigation";
+
+const App = () => {
+  return (
+    <NavigationContainer>
+      <AppNavigation />
+    </NavigationContainer>
+  );
+};
+
+export default App;
+
+const styles = StyleSheet.create({});

animated-cards/app.json

@@ -0,0 +1,30 @@
+{
+  "expo": {
+    "name": "animated-cards",
+    "slug": "animated-cards",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": [
+      "**/*"
+    ],
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    }
+  }
+}

animated-cards/babel.config.js

@@ -0,0 +1,8 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+    plugins: ['react-native-reanimated/plugin'],
+
+  };
+};