first commit

FLAD/.gitignore

@@ -0,0 +1,14 @@
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store

FLAD/App.tsx

@@ -0,0 +1,38 @@
+import { StatusBar } from 'expo-status-bar';
+import { useState, useTransition } from 'react';
+import { Animated, StyleSheet, Text, View } from 'react-native';
+import Card from './components/Card';
+
+// import { cards as cardArray } from './FakeData/data'
+
+ 
+export default function App() {
+
+  return (
+    <View>
+      
+    </View>
+    
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+    card: {
+      borderRadius : 8,
+      shadowRadius : 20,
+      shadowColor : '#'
+    },
+    image: {
+        width: 320,
+        height: 440,
+        borderRadius: 18,
+        resizeMode : "cover",
+        placeholder: "assets/images/loadingPlaceholder.gif"
+      },
+});

FLAD/FakeData/data.ts

@@ -0,0 +1,17 @@
+export const cards = [{
+    name : "blue",
+    sourceUrl : "https://images.unsplash.com/photo-1484589065579-248aad0d8b13?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1359&q=80",
+    index : 3
+  },
+  {
+    name : "red",
+    sourceUrl : "https://images.unsplash.com/photo-1614613535308-eb5fbd3d2c17?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80",
+    index : 2
+  },
+  {
+    name : "green",
+    sourceUrl : "https://images.unsplash.com/photo-1584679109597-c656b19974c9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=580&q=80",
+    index : 1
+  }
+  
+  ]

FLAD/app.json

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

FLAD/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

FLAD/components/Card.tsx

@@ -0,0 +1,68 @@
+import { View, Text, Image, Animated ,PanResponder, Dimensions } from 'react-native'
+import React, { useRef } from 'react'
+
+
+const {width : wWidht} = Dimensions.get("window");
+const width = wWidht *0.75;
+const height = wWidht * (465/264);
+const borderRadius = 24;
+
+
+
+interface CardProps {
+    title: string;
+    image: any;
+    onSwipe: (direction: "left" | "right") => void;
+  }
+
+  
+  const Card: React.FC<CardProps> = ({ title, image, onSwipe }) => {
+    const pan = useRef(new Animated.ValueXY()).current;
+    const panResponder = useRef(
+      PanResponder.create({
+        onMoveShouldSetPanResponder: (evt, gestureState) => {
+          // Only set the pan responder if the user has moved the card more than a certain threshold
+          if (Math.abs(gestureState.dx) > 10) {
+            return true;
+          }
+          return false;
+        },
+        onPanResponderMove: (evt, gestureState) => {
+          // Update the position of the card as the user swipes it
+          pan.setValue({ x: gestureState.dx, y: 0 });
+          console.log("Card");
+        },
+        onPanResponderRelease: (evt, gestureState) => {
+          // Handle the swipe action based on the swipe direction
+          if (gestureState.dx > 50) {
+            onSwipe("right");
+          } else if (gestureState.dx < -50) {
+            onSwipe("left");
+          } else {
+            // Swiped a small amount, reset the position of the card
+            Animated.spring(pan, {
+              toValue: { x: 0, y: 0 },
+              useNativeDriver: true,
+            }).start();
+          }
+        },
+      })
+    ).current;
+  
+    return (
+      <View>
+        <Animated.View
+          style={{ transform: [{ translateX: pan.x }] }}
+          {...panResponder.panHandlers} 
+        >
+          <Image source={image} style={{ width: 200, height: 200 }} />
+        </Animated.View>
+      </View>
+    );
+  };
+  
+  export default Card;
+
+
+
+

FLAD/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "flad",
+  "version": "1.0.0",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "expo": "~47.0.12",
+    "expo-status-bar": "~1.4.2",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
+    "react-native": "0.70.5",
+    "react-native-web": "~0.18.9"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.9",
+    "@types/react": "~18.0.14",
+    "@types/react-native": "~0.70.6",
+    "typescript": "^4.6.3"
+  },
+  "private": true
+}

FLAD/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true
+  }
+}