We have a sick button component now

app/(tabs)/index.tsx

@@ -1,17 +1,35 @@
 import { StyleSheet } from "react-native";
 import { ThemedText } from "@/components/ThemedText";
 import { ThemedView } from "@/components/ThemedView";
+import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+import FontAwesome from "@expo/vector-icons/FontAwesome";
 
 import Button from "@/components/buttons/Button";
 
 const Index = () => {
+  const scheme = useColorScheme() ?? 'light';
   return (
     <ThemedView style={styles.container}>
       <ThemedText style={styles.text}>
         Home Screen
       </ThemedText>
       <ThemedView style={styles.footerContainer}>
-        <Button label="Choose a photo" />
+        <Button width={220} height={60}
+          onPress={() => alert('You pressed a button.')}
+        >
+        <FontAwesome name="picture-o" size={18}
+          color='#25292e' style={styles.buttonIcon}
+        />
+        <ThemedText
+          style={[
+            styles.buttonLabel,
+            {color: Colors[scheme].background}
+          ]}
+        >
+          Press this button
+        </ThemedText>
+        </Button>
       </ThemedView>
     </ThemedView>
   );
@@ -31,4 +49,10 @@ const styles = StyleSheet.create({
     flex: 1 / 3, 
     alignItems: 'center',
   },
+  buttonLabel: {
+    fontSize: 16,
+  },
+  buttonIcon: {
+    paddingRight: 8,
+  },
 });

components/buttons/Button.tsx

@@ -3,67 +3,44 @@ import { ThemedText } from "@/components/ThemedText";
 import { ThemedView } from "@/components/ThemedView";
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
-import FontAwesome from "@expo/vector-icons/FontAwesome";
+
+const DEFAULT_WIDTH = 320;
+const DEFAULT_HEIGHT = 68;
 
 type Props = {
-  label: string;
+  width?: number;
-  theme?: 'primary';
+  height?: number;
   onPress?: () => void;
 };
 
-const Button = ({ label, theme, onPress }: Props) => {
+const Button = ({ width, height, children, onPress }: Props & React.ComponentProps<typeof Pressable>) => {
   const scheme = useColorScheme() ?? 'light';
-  if (theme === 'primary') {
+  return (
-    return (
+    <ThemedView
-      <ThemedView style={styles.buttonContainer}>
+      style={[
-        <Pressable
+        styles.buttonContainer,
-          style={[
+        {
-            styles.button,
+          width: (width ?? DEFAULT_WIDTH),
-            {backgroundColor: Colors[scheme].text}
+          height: (height ?? DEFAULT_HEIGHT),
-          ]}
+        },
-          onPress={() => alert('You pressed a button.')}
+      ]}
-        >
+      >
-          <ThemedText
+      <Pressable
-            style={[
+        style={[
-              styles.buttonLabel,
+          styles.button,
-              {color: Colors[scheme].background}
+          {backgroundColor: Colors[scheme].text}
-            ]}
+        ]}
-          >
+        onPress={onPress}
-            {label}
+      >
-          </ThemedText>
+        {children}
-        </Pressable>
+      </Pressable>
-      </ThemedView>
+    </ThemedView>
-    );
+  );
-  } else {
-    return (
-      <ThemedView style={styles.buttonContainer}>
-        <Pressable
-          style={[
-            styles.button,
-            {backgroundColor: Colors[scheme].text}
-          ]}
-          onPress={() => alert('You pressed a button.')}
-        >
-          <ThemedText
-            style={[
-              styles.buttonLabel,
-              {color: Colors[scheme].background}
-            ]}
-          >
-            {label}
-          </ThemedText>
-        </Pressable>
-      </ThemedView>
-    );
-  }
 };
 export default Button;
 
 const styles = StyleSheet.create({
   buttonContainer: {
-    width: 320,
-    height: 68,
-    marginHorizontal: 20,
     alignItems: 'center',
     justifyContent: 'center',
     padding: 3,
@@ -76,10 +53,4 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     flexDirection: 'row',
   },
-  buttonIcon: {
-    paddingRight: 8,
-  },
-  buttonLabel: {
-    fontSize: 16,
-  },
 });

constants/Colors.ts

@@ -5,19 +5,22 @@
 
 const tintColorLight = '#0a7ea4';
 const tintColorDark = '#fff';
+const black = '#2e2f3d'
+const white = '#ECEDEE'
 
 export const Colors = {
   light: {
-    text: '#11181C',
+    text: black,
-    background: '#fff',
+    background: white,
+    //background: '#fff',
     tint: tintColorLight,
     icon: '#687076',
     tabIconDefault: '#687076',
     tabIconSelected: tintColorLight,
   },
   dark: {
-    text: '#ECEDEE',
+    text: white,
-    background: '#2e2f3d',
+    background: black,
     tint: tintColorDark,
     icon: '#9BA1A6',
     tabIconDefault: '#9BA1A6',

package-lock.json

@@ -14,6 +14,7 @@
         "expo-constants": "~16.0.2",
         "expo-font": "~12.0.9",
         "expo-image": "~1.13.0",
+        "expo-image-picker": "~15.0.7",
         "expo-linking": "~6.3.1",
         "expo-router": "~3.5.23",
         "expo-splash-screen": "~0.27.5",
@@ -10112,6 +10113,27 @@
         "expo": "*"
       }
     },
+    "node_modules/expo-image-loader": {
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/expo-image-loader/-/expo-image-loader-4.7.0.tgz",
+      "integrity": "sha512-cx+MxxsAMGl9AiWnQUzrkJMJH4eNOGlu7XkLGnAXSJrRoIiciGaKqzeaD326IyCTV+Z1fXvIliSgNW+DscvD8g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
+    "node_modules/expo-image-picker": {
+      "version": "15.0.7",
+      "resolved": "https://registry.npmjs.org/expo-image-picker/-/expo-image-picker-15.0.7.tgz",
+      "integrity": "sha512-u8qiPZNfDb+ap6PJ8pq2iTO7JKX+ikAUQ0K0c7gXGliKLxoXgDdDmXxz9/6QdICTshJBJlBvI0MwY5NWu7A/uw==",
+      "license": "MIT",
+      "dependencies": {
+        "expo-image-loader": "~4.7.0"
+      },
+      "peerDependencies": {
+        "expo": "*"
+      }
+    },
     "node_modules/expo-keep-awake": {
       "version": "13.0.2",
       "resolved": "https://registry.npmjs.org/expo-keep-awake/-/expo-keep-awake-13.0.2.tgz",

package.json

@@ -34,7 +34,8 @@
     "react-native-safe-area-context": "4.10.5",
     "react-native-screens": "3.31.1",
     "react-native-web": "~0.19.10",
-    "expo-image": "~1.13.0"
+    "expo-image": "~1.13.0",
+    "expo-image-picker": "~15.0.7"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",