add(screen): raw scan screen and detail scan screen

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@react-native-async-storage/async-storage": "1.17.11",
+    "@react-native-community/blur": "^4.3.2",
     "@react-native-community/masked-view": "^0.1.11",
     "@react-native-community/netinfo": "9.3.7",
     "@react-navigation/bottom-tabs": "^6.4.0",
@@ -20,6 +21,7 @@
     "@reduxjs/toolkit": "^1.8.5",
     "axios": "^1.6.2",
     "expo": "~48.0.21",
+    "expo-blur": "~12.2.2",
     "expo-camera": "~13.2.1",
     "expo-device": "~5.2.1",
     "expo-image-picker": "~14.1.1",

src/Components/Scan/Cate_Item.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, ColorValue } from 'react-native';
+
+interface YourComponentProps {
+  text: string;
+  color: ColorValue;
+}
+
+const YourComponent: React.FC<YourComponentProps> = ({ text, color }) => {
+  const calculateBorderColor = (baseColor: string, factor: number): string => {
+    const hex = baseColor.replace('#', '');
+    const num = parseInt(hex, 16);
+    let r = (num >> 16) + factor;
+    let g = ((num >> 8) & 255) + factor;
+    let b = (num & 255) + factor;
+
+    r = Math.max(0, Math.min(255, r));
+    g = Math.max(0, Math.min(255, g));
+    b = Math.max(0, Math.min(255, b));
+
+    return `#${(g | (b << 8) | (r << 16)).toString(16).padStart(6, '0')}`;
+  };
+
+  const calculateContrastColor = (baseColor: string): string => {
+    const hex = baseColor.replace('#', '');
+    const num = parseInt(hex, 16);
+    const r = (num >> 16) & 255;
+    const g = (num >> 8) & 255;
+    const b = num & 255;
+    const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+
+    return brightness > 125 ? '#000000' : '#ffffff';
+  };
+
+  const borderColor = calculateBorderColor(color.toString(), -20);
+  const textColor = calculateContrastColor(color.toString());
+
+  return (
+    <TouchableOpacity style={{width:100, height:120, position:"relative", top:12, left:10}}>
+      <View
+        style={{
+          width: 81.53,
+          height: 109,
+          left: -8,
+          top: -12,
+          position: 'absolute',
+          borderRadius: 50,
+          borderWidth: 1,
+          borderColor: borderColor,
+        }}
+      />
+      <View
+          style={{
+            width: 64.78,
+            height: 86.98,
+            backgroundColor: color,
+            borderRadius: 50,
+            justifyContent: 'center',
+            alignItems: 'center',
+            marginRight: 10,
+          }}
+        >
+        <Text>🍕</Text>
+        <Text
+            style={{
+              color: textColor,
+              fontSize: 12,
+              fontFamily: 'Inter',
+              fontWeight: '500',
+              letterSpacing: 0.5,
+            }}
+          >
+          {text}
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+export default YourComponent;

src/Components/Scan/Category.tsx

@@ -0,0 +1,61 @@
+import { Button, HStack, ScrollView, VStack, View } from "native-base";
+import React from "react";
+import { memo, useState } from "react";
+import { StyleSheet, Text } from "react-native";
+import CateItem from "./Cate_Item";
+
+interface TypeCategoryProps {
+
+}
+const Category: React.FC<TypeCategoryProps> = ({})=>{
+  const [selected, setSelected] = useState(0);
+  return (
+    <VStack alignContent={"flex-start"} style={styles.container}>
+      <Text style={styles.headerText}>Scanned Ingredient</Text>
+      <HStack justifyContent={"space-between"} paddingY={10}>
+        <Text style={styles.text}>Scanned Ingredient</Text>
+        <Button variant={"ghost"}>Show all</Button>
+      </HStack>
+      <ScrollView horizontal={true}>
+        <HStack space={2}>
+          <CateItem text={"Starches"} color={"#F0CCC1"} />
+          <CateItem text={"Proteins"} color={"#A9E88B33"} />
+          <CateItem text={"Oils"} color={"#C1DAF0"} />
+          <CateItem text={"Starches"} color={"#F2B822"} />
+        </HStack>
+      </ScrollView>
+    </VStack>);
+};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    width:"100%",
+    marginTop:40,
+    padding: 10
+  },
+  iconBack: {
+    position: 'absolute',
+    top: 0,
+    left: 20,
+    zIndex: 1,
+  },
+  headerText:{
+    color: '#3E5481',
+    fontSize: 22,
+    fontFamily: 'Inter',
+    fontWeight: '700',
+    lineHeight: 32,
+    letterSpacing: 0.50,
+    wordWrap: 'break-word'
+  },
+  text:{
+    color: '#9FA5C0',
+    fontSize: 12,
+    fontFamily: 'Inter',
+    fontWeight: '500',
+    letterSpacing: 0.50,
+    wordWrap: 'break-word'
+  }
+});
+
+export default memo(Category);

src/Components/Scan/Item.tsx

@@ -0,0 +1,191 @@
+import React, { useRef } from 'react';
+import { View, Text, PanResponder, Animated } from 'react-native';
+import SvgUri from 'react-native-svg-uri';
+
+const TickIcon = () => (
+  <View style={{ borderRadius: 10, justifyContent: 'center' }}>
+    <SvgUri source={require('../../../assets/Tick.svg')} />
+  </View>
+);
+const NoTickIcon = () => (
+  <View style={{ borderRadius: 10, justifyContent: 'center' }}>
+    <SvgUri source={require('../../../assets/NoTick.svg')} />
+  </View>
+);
+const Item = () => {
+  const animatedValue = useRef(new Animated.Value(0)).current;
+  const tickAnimatedValue = useRef(new Animated.Value(100)).current;
+
+  const tickPanResponder = PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onPanResponderGrant: () => {
+      Animated.timing(tickAnimatedValue, {
+        toValue: 1,
+        duration: 100, // Adjust duration as needed
+        useNativeDriver: false,
+      }).start();
+    },
+    onPanResponderRelease: () => {
+      Animated.timing(tickAnimatedValue, {
+        toValue: 0,
+        duration: 500, // Adjust duration as needed
+        useNativeDriver: false,
+      }).start();
+      console.log('Tick button released');
+    },
+  });
+
+  const tickWidth = tickAnimatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["85%", "0%"],
+  });
+
+  const tickBackgroundColor = tickAnimatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['rgba(0, 0, 0, 0)', 'rgba(168.62, 231.63, 138.98, 0.80)'], // Transparent to red
+  });
+
+  const panResponder = PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onPanResponderGrant: () => {
+      Animated.timing(animatedValue, {
+        toValue: 1,
+        duration: 100, // Adjust duration as needed
+        useNativeDriver: false,
+      }).start();
+    },
+    onPanResponderRelease: () => {
+      Animated.timing(animatedValue, {
+        toValue: 0,
+        duration: 500, // Adjust duration as needed
+        useNativeDriver: false,
+      }).start();
+      console.log('Tick button released');
+    },
+  });
+
+  const width = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["0%", "85%"],
+  });
+  const borderColor = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ["#3EC032", "#E24F2F"],
+  });
+
+  const backgroundColor = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['rgba(0, 0, 0, 0)', '#F0CCC1'], // Transparent to red
+  });
+
+  const lineWidth = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 200],
+  });
+
+  const lineBackgroundColor = animatedValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['rgba(0, 0, 0, 0)', '#FF6464'], // Transparent to red
+  });
+
+  return (
+    <Animated.View
+      style={{
+        width: '100%',
+        maxWidth: 120,
+        height: '100%',
+        paddingLeft: 7,
+        paddingRight: 7,
+        paddingTop: 4,
+        paddingBottom: 4,
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: borderColor,
+        justifyContent: 'flex-start',
+        alignItems: 'center',
+        flexDirection: 'row',
+        gap: 21,
+        backgroundColor: "transparent",
+        position:"relative",
+        zIndex:100,
+        overflow:"hidden"
+
+      }}
+    >
+      <Animated.View  {...tickPanResponder.panHandlers} style={{ width: 8, height: "100%", zIndex:100, flex:1, justifyContent:"center", alignItems:"center" }}>
+        <TickIcon />
+      </Animated.View>
+      <Text
+        style={{
+          color: '#2E3E5C',
+          fontSize: 15,
+          fontWeight: '500',
+          lineHeight: 25,
+          letterSpacing: 0.5,
+          flexWrap: 'wrap',
+          zIndex:100
+        }}
+      >
+        Egg
+      </Text>
+      <Animated.View {...panResponder.panHandlers} style={{flex:1, justifyContent:"center", alignItems:"center" , width: 6, height: 6, zIndex:100 }}>
+        <NoTickIcon />    
+      </Animated.View>
+      <Animated.View
+        style={{
+          position: 'absolute',
+          top: 0,
+          bottom:0,
+          right: 0,
+          width: width,
+          // height: '100%',
+          backgroundColor: backgroundColor,
+          paddingLeft: 7,
+          paddingRight: 7,
+          paddingTop: 4, // Adjust padding top value
+          paddingBottom: 4, // Adjust padding bottom value
+          borderRadius: 10,
+          borderTopLeftRadius: 20,
+          borderBottomLeftRadius: 20,
+          zIndex: 2, // Ensure it's above the overlay
+        }}
+      />
+
+      <Animated.View
+        style={{
+          position: 'absolute',
+          top: "65%",
+          right: -10,
+          width: lineWidth,
+          height: 1,
+          backgroundColor: lineBackgroundColor,
+           // Adjust padding bottom value
+          borderRadius: 25,
+          zIndex: 2, // Ensure it's above the overlay
+        }}
+      />
+
+      <Animated.View
+        style={{
+          position: 'absolute',
+          top: 0,
+          bottom:0,
+          left: 0,
+          width: tickWidth,
+          // height: '100%',
+          backgroundColor: tickBackgroundColor,
+          paddingLeft: 7,
+          paddingRight: 7,
+          paddingTop: 4, // Adjust padding top value
+          paddingBottom: 4, // Adjust padding bottom value
+          borderRadius: 10,
+          borderTopRightRadius: 20,
+          borderBottomRightRadius: 20,
+          zIndex: 2, // Ensure it's above the overlay
+        }}
+      />
+    </Animated.View>
+  );
+};
+
+export default Item;