Final APP Dev Build Android

.gitignore

@@ -36,3 +36,4 @@ yarn-error.*
 *.tsbuildinfo
 
 app-example
+.env

app.json

@@ -1,7 +1,7 @@
 {
   "expo": {
-    "name": "test1",
-    "slug": "test1",
+    "name": "colorextract-app",
+    "slug": "colorextract-app",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/images/icon.png",
@@ -15,7 +15,8 @@
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/adaptive-icon.png",
         "backgroundColor": "#ffffff"
-      }
+      },
+      "package": "com.imparth.colorextractapp"
     },
     "web": {
       "bundler": "metro",
@@ -36,6 +37,14 @@
     ],
     "experiments": {
       "typedRoutes": true
+    },
+    "extra": {
+      "router": {
+        "origin": false
+      },
+      "eas": {
+        "projectId": "37d0fd40-bb96-4d55-8cdd-3053b30ddb82"
+      }
     }
   }
 }

app/_layout.tsx

@@ -30,10 +30,10 @@ export default function RootLayout() {
   return (
     <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
       <Stack>
-        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+        <Stack.Screen name="index" options={{ headerShown: false }} />
         <Stack.Screen name="+not-found" />
       </Stack>
-      <StatusBar style="auto" hidden />
+      <StatusBar style="auto" />
     </ThemeProvider>
   );
 }

app/(tabs)/index.tsx → app/index.tsx

@@ -1,7 +1,11 @@
 import React, { useState } from 'react';
-import { View, Text, Button, StyleSheet, ActivityIndicator, ScrollView, Image } from 'react-native';
+import { View, Text, Button, StyleSheet, ActivityIndicator, ScrollView, Image, StatusBar, Platform, TouchableOpacity } from 'react-native';
 import * as DocumentPicker from 'expo-document-picker';
 import { SafeAreaView } from 'react-native'
+import { ThemedView } from '@/components/ThemedView';
+import { ThemedText } from '@/components/ThemedText';
+import checkColor from '@/utils/checkColor';
+import * as Clipboard from 'expo-clipboard';
 
 type FileInfo = {
   uri: string;
@@ -50,6 +54,17 @@ export default function HomeScreen() {
     }
   };
 
+  // Function to Clear File Selection
+  const clearFile = () => {
+    setFile(null)
+    setColors([])
+  }
+
+  // Function to copy color text
+  const copyColor = async (txt: string) => {
+    await Clipboard.setStringAsync(txt);
+  }
+
   // Function to call API
   const callApi = async (fileData: FileInfo) => {
     try {
@@ -58,14 +73,15 @@ export default function HomeScreen() {
 
       // Create form data
       const formData = new FormData();
+      formData.append("n_colors", "10");
       formData.append('image', {
         uri: fileData.uri,
         name: fileData.name,
         type: fileData.mimeType || 'application/octet-stream',
       } as any);
 
       // Call the API
-      const response = await fetch('http://127.0.0.1:5000/extract-colors', {  // Ensure your API endpoint is correct
+      const response = await fetch(`${process.env.EXPO_PUBLIC_API_URL}/extract-colors`, {  // Ensure your API endpoint is correct
         method: 'POST',
         body: formData,
       });
@@ -79,7 +95,7 @@ export default function HomeScreen() {
 
       // Parse JSON response
       const result = await response.json();
-      console.log('API Response:', result);
+      // console.log('API Response:', result);
 
       if (result.colors) {
         setColors(result.colors);
@@ -95,12 +111,15 @@ export default function HomeScreen() {
 
 
   return (
-    <SafeAreaView style={styles.container}>
-      <View style={styles.container}>
-        <Text style={styles.title}>File Upload & Color Boxes</Text>
+    <SafeAreaView style={[styles.safeview, { marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0 }]}>
+      <ThemedView style={styles.container}>
+        <ThemedText style={styles.title}>Color Extractor</ThemedText>
 
         {/* File Picker Button */}
-        <Button title="Pick a File" onPress={pickFile} />
+        <View style={{ display: 'flex', flexDirection: 'row', gap: 10 }}>
+          <Button title="Pick a File" onPress={pickFile} />
+          <Button title="Clear Selection" onPress={clearFile} disabled={!loading && colors && !file || loading} />
+        </View>
 
         {/* Display Image Preview */}
         {file && (
@@ -113,27 +132,42 @@ export default function HomeScreen() {
         {loading && <ActivityIndicator size="large" color="#007BFF" style={{ marginTop: 10 }} />}
 
         {/* Display Colors */}
-        <ScrollView contentContainerStyle={styles.colorContainer}>
-          {colors.map((color, index) => (
-            <View key={index} style={[styles.colorBox, { backgroundColor: color.Hex }]}>
-              <Text style={styles.colorText}>{color.Hex}</Text>
-              <Text style={styles.colorText}>{color.RGB}</Text>
-              <Text style={styles.colorText}>{color.HSL}</Text>
-            </View>
-          ))}
+        <ScrollView overScrollMode='never' showsVerticalScrollIndicator={false} showsHorizontalScrollIndicator={false}>
+          <View style={styles.colorContainer}>
+            {colors.map((color, index) => {
+              let textColor = checkColor(color.HSL);
+              return (
+                <TouchableOpacity key={index} activeOpacity={0.8} onPress={() => copyColor(color.Hex)}>
+                  <View style={[styles.colorBox, { backgroundColor: color.Hex }]}>
+                    <Text style={[styles.colorText, { color: textColor }]}>{color.Hex}</Text>
+                    <Text style={[styles.colorText, { color: textColor }]}>{color.RGB}</Text>
+                    <Text style={[styles.colorText, { color: textColor }]}>{color.HSL}</Text>
+                  </View>
+                </TouchableOpacity>
+              )
+            })}
+          </View>
         </ScrollView>
-      </View>
+      </ThemedView>
     </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
+  safeview: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: "100%",
+    height: "100%",
+  },
   container: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    padding: 20,
-    backgroundColor: '#f9f9f9',
+    paddingHorizontal: 20,
+    paddingTop: 30,
+    width: "100%",
   },
   title: {
     fontSize: 24,
@@ -151,20 +185,21 @@ const styles = StyleSheet.create({
     marginTop: 20,
     marginBottom: 20,
     borderRadius: 10,
-    borderWidth: 1,
-    borderColor: '#ccc',
   },
   colorContainer: {
-    marginTop: 20,
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 5,
+    paddingVertical: 25,
     alignItems: 'center',
     justifyContent: 'center',
   },
   colorBox: {
-    width: 200,
+    width: 150,
     height: 100,
     justifyContent: 'center',
     alignItems: 'center',
-    marginBottom: 15,
     borderRadius: 10,
     shadowColor: '#000',
     shadowOffset: { width: 0, height: 2 },
@@ -173,7 +208,6 @@ const styles = StyleSheet.create({
     elevation: 3,
   },
   colorText: {
-    color: '#fff',
     fontWeight: 'bold',
     textAlign: 'center',
   },

eas.json

@@ -0,0 +1,21 @@
+{
+  "cli": {
+    "version": ">= 13.4.2",
+    "appVersionSource": "remote"
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal"
+    },
+    "preview": {
+      "distribution": "internal"
+    },
+    "production": {
+      "autoIncrement": true
+    }
+  },
+  "submit": {
+    "production": {}
+  }
+}