Finish Day 19

README.md

@@ -118,3 +118,9 @@ https://github.com/hewad-mubariz/reactnative-50-days/assets/32339404/92e37581-72
 The Expandable Floating Action Button (FAB) component is a customizable, circular button that expands to reveal multiple action buttons. When the main FAB is pressed, it expands smoothly to display a list of actions, each with its own icon, color, title, and description. This component is designed to provide quick access to multiple actions in a user-friendly and visually appealing manner.
 
 https://github.com/hewad-mubariz/reactnative-50-days/assets/32339404/3f0a1002-3cbf-4287-a8b8-36d4c09c4fa0
+
+# Day 19 Micro Swipe Actions
+
+Micro Swipe Actions brings a sleek and intuitive way for users to interact with list items or cards through swipe gestures. This component allows for smooth, responsive swipe actions that reveal a set of customizable icons. As the user swipes, icons transition from dots to fully visible icons, offering actions such as bookmarking, starring and etc. The component ensures a fluid user experience with spring animations that make the interactions feel natural and engaging. Perfect for enhancing the functionality of lists or cards in some apps.
+
+https://github.com/hewad-mubariz/reactnative-50-days/assets/32339404/cfbf83c1-e37b-493e-b32c-fd15eef38a47

micro-swipe-actions/App.tsx

@@ -0,0 +1,24 @@
+import { StatusBar } from "expo-status-bar";
+import { StyleSheet, Text, View } from "react-native";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import Card from "./src/components/Card";
+
+export default function App() {
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <View style={styles.container}>
+        <Card />
+      </View>
+    </GestureHandlerRootView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "lightblue",
+    alignItems: "center",
+    justifyContent: "center",
+    paddingHorizontal: 12,
+  },
+});

micro-swipe-actions/app.json

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

micro-swipe-actions/babel.config.js

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