Add Sign in with Apple sorta

components/Account.tsx

@@ -1,44 +1,44 @@
-import { useState, useEffect } from 'react'
-import { supabase } from '../lib/supabase'
-import { StyleSheet, View, Alert } from 'react-native'
-import { Button, Input } from '@rneui/themed'
-import { Session } from '@supabase/supabase-js'
+import { useState, useEffect } from 'react';
+import { supabase } from '../lib/supabase';
+import { StyleSheet, View, Alert } from 'react-native';
+import { Button, Input } from '@rneui/themed';
+import { Session } from '@supabase/supabase-js';
 
 export default function Account({ session }: { session: Session }) {
-  const [loading, setLoading] = useState(true)
-  const [username, setUsername] = useState('')
-  const [website, setWebsite] = useState('')
-  const [avatarUrl, setAvatarUrl] = useState('')
+  const [loading, setLoading] = useState(true);
+  const [username, setUsername] = useState('');
+  const [website, setWebsite] = useState('');
+  const [avatarUrl, setAvatarUrl] = useState('');
 
   useEffect(() => {
-    if (session) getProfile()
-  }, [session])
+    if (session) getProfile();
+  }, [session]);
 
   async function getProfile() {
     try {
-      setLoading(true)
-      if (!session?.user) throw new Error('No user on the session!')
+      setLoading(true);
+      if (!session?.user) throw new Error('No user on the session!');
 
       const { data, error, status } = await supabase
         .from('profiles')
         .select(`username, website, avatar_url`)
         .eq('id', session?.user.id)
-        .single()
+        .single();
       if (error && status !== 406) {
-        throw error
+        throw error;
       }
 
       if (data) {
-        setUsername(data.username)
-        setWebsite(data.website)
-        setAvatarUrl(data.avatar_url)
+        setUsername(data.username);
+        setWebsite(data.website);
+        setAvatarUrl(data.avatar_url);
       }
     } catch (error) {
       if (error instanceof Error) {
-        Alert.alert(error.message)
+        Alert.alert(error.message);
       }
     } finally {
-      setLoading(false)
+      setLoading(false);
     }
   }
 
@@ -47,13 +47,13 @@ export default function Account({ session }: { session: Session }) {
     website,
     avatar_url,
   }: {
-    username: string
-    website: string
-    avatar_url: string
+    username: string;
+    website: string;
+    avatar_url: string;
   }) {
     try {
-      setLoading(true)
-      if (!session?.user) throw new Error('No user on the session!')
+      setLoading(true);
+      if (!session?.user) throw new Error('No user on the session!');
 
       const updates = {
         id: session?.user.id,
@@ -61,32 +61,32 @@ export default function Account({ session }: { session: Session }) {
         website,
         avatar_url,
         updated_at: new Date(),
-      }
+      };
 
-      const { error } = await supabase.from('profiles').upsert(updates)
+      const { error } = await supabase.from('profiles').upsert(updates);
 
       if (error) {
-        throw error
+        throw error;
       }
     } catch (error) {
       if (error instanceof Error) {
-        Alert.alert(error.message)
+        Alert.alert(error.message);
       }
     } finally {
-      setLoading(false)
+      setLoading(false);
     }
   }
 
   return (
     <View style={styles.container}>
       <View style={[styles.verticallySpaced, styles.mt20]}>
-        <Input label="Email" value={session?.user?.email} disabled />
+        <Input label='Email' value={session?.user?.email} disabled />
       </View>
       <View style={styles.verticallySpaced}>
-        <Input label="Username" value={username || ''} onChangeText={(text) => setUsername(text)} />
+        <Input label='Username' value={username || ''} onChangeText={(text) => setUsername(text)} />
       </View>
       <View style={styles.verticallySpaced}>
-        <Input label="Website" value={website || ''} onChangeText={(text) => setWebsite(text)} />
+        <Input label='Website' value={website || ''} onChangeText={(text) => setWebsite(text)} />
       </View>
 
       <View style={[styles.verticallySpaced, styles.mt20]}>
@@ -98,10 +98,10 @@ export default function Account({ session }: { session: Session }) {
       </View>
 
       <View style={styles.verticallySpaced}>
-        <Button title="Sign Out" onPress={() => supabase.auth.signOut()} />
+        <Button title='Sign Out' onPress={() => supabase.auth.signOut()} />
       </View>
     </View>
-  )
+  );
 }
 
 const styles = StyleSheet.create({
@@ -117,4 +117,4 @@ const styles = StyleSheet.create({
   mt20: {
     marginTop: 20,
   },
-})
+});

components/Auth.tsx

@@ -1,95 +0,0 @@
-import React, { useState } from 'react'
-import { Alert, StyleSheet, View, AppState } from 'react-native'
-import { supabase } from '../lib/supabase'
-import { Button, Input } from '@rneui/themed'
-
-// Tells Supabase Auth to continuously refresh the session automatically if
-// the app is in the foreground. When this is added, you will continue to receive
-// `onAuthStateChange` events with the `TOKEN_REFRESHED` or `SIGNED_OUT` event
-// if the user's session is terminated. This should only be registered once.
-AppState.addEventListener('change', (state) => {
-  if (state === 'active') {
-    supabase.auth.startAutoRefresh()
-  } else {
-    supabase.auth.stopAutoRefresh()
-  }
-})
-
-export default function Auth() {
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
-  const [loading, setLoading] = useState(false)
-
-  async function signInWithEmail() {
-    setLoading(true)
-    const { error } = await supabase.auth.signInWithPassword({
-      email: email,
-      password: password,
-    })
-
-    if (error) Alert.alert(error.message)
-    setLoading(false)
-  }
-
-  async function signUpWithEmail() {
-    setLoading(true)
-    const {
-      data: { session },
-      error,
-    } = await supabase.auth.signUp({
-      email: email,
-      password: password,
-    })
-
-    if (error) Alert.alert(error.message)
-    if (!session) Alert.alert('Please check your inbox for email verification!')
-    setLoading(false)
-  }
-
-  return (
-    <View style={styles.container}>
-      <View style={[styles.verticallySpaced, styles.mt20]}>
-        <Input
-          label="Email"
-          leftIcon={{ type: 'font-awesome', name: 'envelope' }}
-          onChangeText={(text) => setEmail(text)}
-          value={email}
-          placeholder="email@address.com"
-          autoCapitalize={'none'}
-        />
-      </View>
-      <View style={styles.verticallySpaced}>
-        <Input
-          label="Password"
-          leftIcon={{ type: 'font-awesome', name: 'lock' }}
-          onChangeText={(text) => setPassword(text)}
-          value={password}
-          secureTextEntry={true}
-          placeholder="Password"
-          autoCapitalize={'none'}
-        />
-      </View>
-      <View style={[styles.verticallySpaced, styles.mt20]}>
-        <Button title="Sign in" disabled={loading} onPress={() => signInWithEmail()} />
-      </View>
-      <View style={styles.verticallySpaced}>
-        <Button title="Sign up" disabled={loading} onPress={() => signUpWithEmail()} />
-      </View>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    marginTop: 40,
-    padding: 12,
-  },
-  verticallySpaced: {
-    paddingTop: 4,
-    paddingBottom: 4,
-    alignSelf: 'stretch',
-  },
-  mt20: {
-    marginTop: 20,
-  },
-})

components/auth/AppleSignIn.tsx

@@ -0,0 +1,129 @@
+import React, { useState, useEffect } from 'react';
+import { StyleSheet, Alert, Platform } from 'react-native';
+import * as AppleAuthentication from 'expo-apple-authentication';
+import { supabase } from '@/lib/supabase';
+import { useColorScheme } from '@/hooks/useColorScheme';
+
+type AppleSignInProps = {
+  onSignInStart?: () => void;
+  onSignInComplete?: () => void;
+  onSignInError?: (error: any) => void;
+};
+
+const AppleSignIn: React.FC<AppleSignInProps> = ({
+  onSignInStart,
+  onSignInComplete,
+  onSignInError,
+}) => {
+  const scheme = useColorScheme() ?? 'dark';
+  const [isAppleAuthAvailable, setIsAppleAuthAvailable] = useState(false);
+
+  useEffect(() => {
+    if (Platform.OS === 'ios') {
+      AppleAuthentication.isAvailableAsync().then(setIsAppleAuthAvailable);
+    }
+  }, []);
+
+  const handleAppleSignIn = async () => {
+    try {
+      onSignInStart?.();
+      
+      // Get credentials from Apple
+      const credential = await AppleAuthentication.signInAsync({
+        requestedScopes: [
+          AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
+          AppleAuthentication.AppleAuthenticationScope.EMAIL,
+        ],
+      });
+      
+      if (!credential.email) {
+        throw new Error('Email is required for Apple Sign In');
+      }
+      
+      // Extract user information
+      const { email, fullName, user: appleUserId } = credential;
+      
+      // Create a name from the fullName object if available
+      let name = null;
+      if (fullName?.givenName || fullName?.familyName) {
+        name = `${fullName?.givenName || ''} ${fullName?.familyName || ''}`.trim();
+      }
+      
+      // Create a deterministic password based on the Apple user ID
+      // This way the user can sign in again with the same password
+      const password = `Apple-${appleUserId.substring(0, 16)}`;
+      
+      // First try to sign in (in case the user already exists)
+      const { data: signInData, error: signInError } = await supabase.auth.signInWithPassword({
+        email,
+        password,
+      });
+      
+      if (!signInError && signInData?.user) {
+        // User exists and signed in successfully
+        onSignInComplete?.();
+        return;
+      }
+      
+      // If sign-in failed, create a new user
+      const { data: signUpData, error: signUpError } = await supabase.auth.signUp({
+        email,
+        password,
+        options: {
+          data: {
+            full_name: name,
+          }
+        }
+      });
+      
+      if (signUpError) {
+        throw signUpError;
+      }
+      
+      // User created successfully
+      onSignInComplete?.();
+      
+    } catch (error) {
+      console.error('Apple sign in error:', error);
+      
+      if (error.code === 'ERR_REQUEST_CANCELED') {
+        console.log('Sign in was canceled');
+      } else {
+        Alert.alert(
+          'Sign in error',
+          'An error occurred while signing in with Apple. Please try again.'
+        );
+        onSignInError?.(error);
+      }
+    }
+  };
+
+  // Only render on iOS and if Apple Authentication is available
+  if (Platform.OS !== 'ios' || !isAppleAuthAvailable) {
+    return null;
+  }
+
+  return (
+    <AppleAuthentication.AppleAuthenticationButton
+      buttonType={AppleAuthentication.AppleAuthenticationButtonType.SIGN_IN}
+      buttonStyle={
+        scheme === 'light'
+          ? AppleAuthentication.AppleAuthenticationButtonStyle.BLACK
+          : AppleAuthentication.AppleAuthenticationButtonStyle.WHITE
+      }
+      cornerRadius={10}
+      style={styles.button}
+      onPress={handleAppleSignIn}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    width: 320,
+    height: 50,
+    marginVertical: 10,
+  },
+});
+
+export default AppleSignIn;

components/auth/Login.tsx

@@ -0,0 +1,162 @@
+import React, { useState, useEffect } from 'react';
+import { Alert, StyleSheet, AppState, Image, Platform } from 'react-native';
+import { supabase } from '@/lib/supabase';
+import { ThemedView, ThemedText, ThemedTextButton, ThemedTextInput } from '@/components/theme';
+import AppleSignIn from '@/components/auth/AppleSignIn';
+
+// Tells Supabase Auth to continuously refresh the session automatically if
+// the app is in the foreground. When this is added, you will continue to receive
+// `onAuthStateChange` events with the `TOKEN_REFRESHED` or `SIGNED_OUT` event
+// if the user's session is terminated. This should only be registered once.
+if (Platform.OS !== 'web') {
+  AppState.addEventListener('change', (state) => {
+    if (state === 'active') {
+      supabase.auth.startAutoRefresh();
+    } else {
+      supabase.auth.stopAutoRefresh();
+    }
+  });
+}
+
+const LoginPage = () => {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  
+  // Set up auto-refreshing for web
+  useEffect(() => {
+    if (Platform.OS === 'web') {
+      supabase.auth.startAutoRefresh();
+      return () => {
+        supabase.auth.stopAutoRefresh();
+      };
+    }
+  }, []);
+  
+  const signInWithEmail = async () => {
+    setLoading(true);
+    const { error } = await supabase.auth.signInWithPassword({
+      email: email,
+      password: password,
+    });
+    if (error) Alert.alert(error.message);
+    setLoading(false);
+  };
+  
+  const signUpWithEmail = async () => {
+    setLoading(true);
+    const {
+      data: { session },
+      error,
+    } = await supabase.auth.signUp({
+      email: email,
+      password: password,
+    });
+    if (error) Alert.alert(error.message);
+    else if (!session) Alert.alert('Please check your inbox for email verification!');
+    setLoading(false);
+  };
+  
+  return (
+    <ThemedView style={styles.container}>
+      <ThemedView style={styles.titleContainer}>
+        <Image source={require('@/assets/images/tech_tracker_logo.png')} style={styles.reactLogo} />
+        <ThemedText type='title' style={styles.headerTitle}>
+          Tech Tracker
+        </ThemedText>
+      </ThemedView>
+      
+      <ThemedView style={[styles.verticallySpaced]}>
+        <ThemedTextInput
+          fontSize={24}
+          onChangeText={(text) => setEmail(text)}
+          value={email}
+          placeholder='email@address.com'
+        />
+      </ThemedView>
+      
+      <ThemedView style={styles.verticallySpaced}>
+        <ThemedTextInput
+          fontSize={24}
+          onChangeText={(text) => setPassword(text)}
+          value={password}
+          secureTextEntry={true}
+          placeholder='Password'
+        />
+      </ThemedView>
+      
+      <ThemedView style={[styles.verticallySpaced, styles.mt20]}>
+        <ThemedTextButton
+          text='Sign in'
+          disabled={loading}
+          onPress={() => signInWithEmail()}
+          fontSize={24}
+        />
+      </ThemedView>
+      
+      <ThemedView style={styles.verticallySpaced}>
+        <ThemedTextButton
+          text='Sign up'
+          disabled={loading}
+          onPress={() => signUpWithEmail()}
+          fontSize={24}
+        />
+      </ThemedView>
+      
+      {/* Apple Sign In - Only shows on iOS */}
+      <ThemedView style={[styles.verticallySpaced, styles.mt20]}>
+        <AppleSignIn 
+          onSignInStart={() => setLoading(true)}
+          onSignInComplete={() => setLoading(false)}
+          onSignInError={() => setLoading(false)}
+        />
+      </ThemedView>
+    </ThemedView>
+  );
+};
+
+export default LoginPage;
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 12,
+    height: '100%',
+  },
+  verticallySpaced: {
+    paddingTop: 4,
+    paddingBottom: 4,
+    alignItems: 'center',
+  },
+  mt20: {
+    marginTop: 20,
+  },
+  reactLogo: {
+    height: 70,
+    width: 72,
+  },
+  titleContainer: {
+    marginTop: 60,
+    marginBottom: 20,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+  },
+  headerTitle: {
+    textAlign: 'center',
+    fontSize: 48,
+    lineHeight: 64,
+    fontWeight: 'bold',
+  },
+  divider: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginVertical: 20,
+  },
+  dividerText: {
+    marginHorizontal: 10,
+    fontSize: 16,
+    opacity: 0.7,
+  },
+});

components/auth/Logout_Button.tsx

@@ -0,0 +1,23 @@
+import { supabase } from '@/lib/supabase';
+import { ThemedView, ThemedText, ThemedTextButton, ThemedTextInput } from '@/components/theme';
+import { Alert, StyleSheet, AppState } from 'react-native';
+
+const Logout_Button = () => {
+  const signOut = async () => {
+    const { error } = await supabase.auth.signOut();
+    if (error) Alert.alert(error.message);
+  };
+
+  return (
+    <ThemedTextButton
+      width={120}
+      height={60}
+      text='Logout'
+      fontSize={16}
+      onPress={() => signOut()}
+    />
+  );
+};
+export default Logout_Button;
+
+const styles = StyleSheet.create({});

components/default/Collapsible.tsx

@@ -1,6 +1,6 @@
 import { PropsWithChildren, useState } from 'react';
 import { StyleSheet, TouchableOpacity } from 'react-native';
-import { ThemedText, ThemedView } from '@/components/theme/Theme';
+import { ThemedText, ThemedView } from '@/components/theme';
 import { IconSymbol } from '@/components/ui/IconSymbol';
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';

components/default/ParallaxScrollView.tsx

@@ -6,7 +6,7 @@ import Animated, {
   useAnimatedStyle,
   useScrollViewOffset,
 } from 'react-native-reanimated';
-import { ThemedText, ThemedView } from '@/components/theme/Theme';
+import { ThemedText, ThemedView } from '@/components/theme';
 import { useBottomTabOverflow } from '@/components/ui/TabBarBackground';
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';

components/theme/buttons/TextButton.tsx

@@ -1,33 +0,0 @@
-import Button from '@/components/theme/buttons/Button';
-import { ThemedText } from '@/components/theme/Theme';
-import { Colors } from '@/constants/Colors';
-import { useColorScheme } from '@/hooks/useColorScheme';
-
-const DEFAULT_FONT_SIZE = 16;
-
-type Props = {
-  width?: number;
-  height?: number;
-  text: string;
-  fontSize?: number;
-  onPress?: () => void;
-};
-
-const TextButton = ({ width, height, text, fontSize, onPress }: Props) => {
-  const scheme = useColorScheme() ?? 'dark';
-  return (
-    <Button width={width} height={height} onPress={onPress}>
-      <ThemedText
-        style={[
-          {
-            color: Colors[scheme].background,
-            fontSize: fontSize ?? DEFAULT_FONT_SIZE,
-          },
-        ]}
-      >
-        {text}
-      </ThemedText>
-    </Button>
-  );
-};
-export default TextButton;

components/theme/buttons/ThemedButton.tsx

@@ -1,25 +1,30 @@
-import { StyleSheet, Pressable } from 'react-native';
-import { ThemedView } from '@/components/theme/Theme';
+import React from 'react';
+import { StyleSheet, Pressable, PressableProps } from 'react-native';
+import ThemedView from '@/components/theme/default/ThemedView';
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
-import { StyleProp, ViewStyle } from 'react-native';
 
 const DEFAULT_WIDTH = 320;
 const DEFAULT_HEIGHT = 68;
 
-type Props = {
+type ThemedButtonProps = PressableProps & {
   width?: number;
   height?: number;
-  onPress?: () => void;
+  containerStyle?: object;
+  buttonStyle?: object;
 };
 
-const Button = ({
+const ThemedButton: React.FC<ThemedButtonProps> = ({
   width,
   height,
   children,
-  onPress,
-}: Props & React.ComponentProps<typeof Pressable>) => {
+  containerStyle,
+  buttonStyle,
+  style,
+  ...restProps // This now includes onPress automatically
+}) => {
   const scheme = useColorScheme() ?? 'dark';
+
   return (
     <ThemedView
       style={[
@@ -28,18 +33,20 @@ const Button = ({
           width: width ?? DEFAULT_WIDTH,
           height: height ?? DEFAULT_HEIGHT,
         },
+        containerStyle,
       ]}
     >
       <Pressable
-        style={[styles.button, { backgroundColor: Colors[scheme].text }]}
-        onPress={onPress}
+        style={[styles.button, { backgroundColor: Colors[scheme].text }, buttonStyle, style]}
+        {...restProps} // This passes onPress and all other Pressable props
       >
         {children}
       </Pressable>
     </ThemedView>
   );
 };
-export default Button;
+
+export default ThemedButton;
 
 const styles = StyleSheet.create({
   buttonContainer: {

components/theme/buttons/ThemedTextButton.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { TextStyle, PressableProps } from 'react-native';
+import ThemedButton from '@/components/theme/buttons/ThemedButton';
+import ThemedText from '@/components/theme/default/ThemedText';
+import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+
+const DEFAULT_FONT_SIZE = 16;
+
+// Extend ThemedButton props (which already extends PressableProps)
+type ThemedTextButtonProps = Omit<PressableProps, 'children'> & {
+  width?: number;
+  height?: number;
+  text: string;
+  fontSize?: number;
+  textStyle?: TextStyle;
+  containerStyle?: object;
+  buttonStyle?: object;
+};
+
+const ThemedTextButton: React.FC<ThemedTextButtonProps> = ({
+  width,
+  height,
+  text,
+  fontSize,
+  textStyle,
+  containerStyle,
+  buttonStyle,
+  ...restProps // This includes onPress and all other Pressable props
+}) => {
+  const scheme = useColorScheme() ?? 'dark';
+
+  return (
+    <ThemedButton
+      width={width}
+      height={height}
+      containerStyle={containerStyle}
+      buttonStyle={buttonStyle}
+      {...restProps}
+    >
+      <ThemedText
+        style={[
+          {
+            color: Colors[scheme].background,
+            fontSize: fontSize ?? DEFAULT_FONT_SIZE,
+          },
+          textStyle,
+        ]}
+      >
+        {text}
+      </ThemedText>
+    </ThemedButton>
+  );
+};
+
+export default ThemedTextButton;

components/theme/default/ThemedText.tsx

@@ -1,4 +1,4 @@
-import { View, type ViewProps } from 'react-native';
+import { type ViewProps } from 'react-native';
 import { Text, type TextProps, StyleSheet } from 'react-native';
 import { useThemeColor } from '@/hooks/useThemeColor';
 
@@ -12,12 +12,7 @@ export type ThemedTextProps = TextProps & {
   type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link';
 };
 
-export const ThemedView = ({ style, lightColor, darkColor, ...otherProps }: ThemedViewProps) => {
-  const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background');
-  return <View style={[{ backgroundColor }, style]} {...otherProps} />;
-};
-
-export const ThemedText = ({
+const ThemedText = ({
   style,
   lightColor,
   darkColor,
@@ -40,6 +35,7 @@ export const ThemedText = ({
     />
   );
 };
+export default ThemedText;
 
 const styles = StyleSheet.create({
   default: {

components/theme/default/ThemedView.tsx

@@ -0,0 +1,13 @@
+import { View, type ViewProps } from 'react-native';
+import { useThemeColor } from '@/hooks/useThemeColor';
+
+export type ThemedViewProps = ViewProps & {
+  lightColor?: string;
+  darkColor?: string;
+};
+
+const ThemedView = ({ style, lightColor, darkColor, ...otherProps }: ThemedViewProps) => {
+  const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background');
+  return <View style={[{ backgroundColor }, style]} {...otherProps} />;
+};
+export default ThemedView;

components/theme/index.tsx

@@ -0,0 +1,25 @@
+import ThemedText from '@/components/theme/default/ThemedText';
+import ThemedView from '@/components/theme/default/ThemedView';
+import ThemedButton from '@/components/theme/buttons/ThemedButton';
+import ThemedTextButton from '@/components/theme/buttons/ThemedTextButton';
+import ThemedTextInput from '@/components/theme/inputs/ThemedTextInput';
+import ThemedCard from '@/components/theme/ui/ThemedCard';
+import ThemedBadge from '@/components/theme/ui/ThemedBadge';
+import ThemedIcon from '@/components/theme/ui/ThemedIcon';
+import ThemedSwitch from '@/components/theme/inputs/ThemedSwitch';
+import ThemedAvatar from '@/components/theme/ui/ThemedAvatar';
+import ThemedSearchBar from '@/components/theme/inputs/ThemedSearchBar';
+
+export {
+  ThemedText,
+  ThemedView,
+  ThemedButton,
+  ThemedTextButton,
+  ThemedTextInput,
+  ThemedCard,
+  ThemedBadge,
+  ThemedIcon,
+  ThemedSwitch,
+  ThemedAvatar,
+  ThemedSearchBar,
+};

components/theme/inputs/ThemedSearchBar.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { StyleSheet, ViewProps, DimensionValue } from 'react-native';
+import ThemedView from '@/components/theme/default/ThemedView';
+import ThemedTextInput from '@/components/theme/inputs/ThemedTextInput';
+import { Ionicons } from '@expo/vector-icons';
+import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+
+type ThemedSearchBarProps = ViewProps & {
+  placeholder?: string;
+  value: string;
+  onChangeText: (text: string) => void;
+  width?: DimensionValue;
+  height?: number;
+};
+
+const ThemedSearchBar: React.FC<ThemedSearchBarProps> = ({
+  placeholder = 'Search',
+  value,
+  onChangeText,
+  width = '100%',
+  height = 40,
+  style,
+  ...restProps
+}) => {
+  const scheme = useColorScheme() ?? 'dark';
+
+  return (
+    <ThemedView style={[styles.container, { width }, style]} {...restProps}>
+      <Ionicons name='search' size={20} color={Colors[scheme].text} style={styles.icon} />
+      <ThemedTextInput
+        placeholder={placeholder}
+        value={value}
+        onChangeText={onChangeText}
+        height={height}
+        width={width}
+        style={styles.input}
+      />
+    </ThemedView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  icon: {
+    position: 'absolute',
+    zIndex: 1,
+    left: 15,
+  },
+  input: {
+    paddingLeft: 45,
+  },
+});
+
+export default ThemedSearchBar;

components/theme/inputs/ThemedSwitch.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Switch, SwitchProps } from 'react-native';
+import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+
+type ThemedSwitchProps = SwitchProps;
+
+const ThemedSwitch: React.FC<ThemedSwitchProps> = ({ ...props }) => {
+  const scheme = useColorScheme() ?? 'dark';
+
+  return (
+    <Switch
+      trackColor={{
+        false: Colors[scheme].border,
+        true: Colors[scheme].tint + '80',
+      }}
+      thumbColor={props.value ? Colors[scheme].tint : Colors[scheme].card}
+      ios_backgroundColor={Colors[scheme].border}
+      {...props}
+    />
+  );
+};
+
+export default ThemedSwitch;

components/theme/inputs/ThemedTextInput.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { StyleSheet, TextInput, TextInputProps, DimensionValue } from 'react-native';
+import ThemedView from '@/components/theme/default/ThemedView';
+import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+
+const DEFAULT_WIDTH = 320;
+const DEFAULT_HEIGHT = 50;
+
+type ThemedTextInputProps = TextInputProps & {
+  width?: DimensionValue;
+  height?: DimensionValue;
+  fontSize?: number;
+  containerStyle?: object;
+};
+
+const ThemedTextInput: React.FC<ThemedTextInputProps> = ({
+  width = DEFAULT_WIDTH,
+  height = DEFAULT_HEIGHT,
+  fontSize = 16,
+  containerStyle,
+  style,
+  ...restProps
+}) => {
+  const scheme = useColorScheme() ?? 'dark';
+
+  return (
+    <ThemedView
+      style={[
+        styles.inputContainer,
+        {
+          width,
+          height,
+          borderColor: Colors[scheme].accent },
+          containerStyle,
+      ]}
+    >
+      <TextInput
+        style={[
+          styles.input,
+          {
+            color: Colors[scheme].text,
+            backgroundColor: Colors[scheme].background,
+            fontSize,
+          },
+          style,
+        ]}
+        placeholderTextColor={Colors[scheme].text + '80'} // 50% opacity
+        {...restProps}
+      />
+    </ThemedView>
+  );
+};
+
+export default ThemedTextInput;
+
+const styles = StyleSheet.create({
+  inputContainer: {
+    padding: 3,
+    borderRadius: 10,
+    borderWidth: 1,
+  },
+  input: {
+    width: '100%',
+    height: '100%',
+    borderRadius: 8,
+    paddingHorizontal: 15,
+  },
+});

components/theme/ui/ThemedAvatar.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { StyleSheet, Image, ImageProps, View } from 'react-native';
+import ThemedText from '@/components/theme/default/ThemedText';
+import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+
+type ThemedAvatarProps = Omit<ImageProps, 'source'> & {
+  size?: number;
+  source?: ImageProps['source'];
+  name?: string;
+  borderWidth?: number;
+  borderColor?: string;
+};
+
+const ThemedAvatar: React.FC<ThemedAvatarProps> = ({
+  size = 50,
+  source,
+  name,
+  borderWidth = 0,
+  borderColor,
+  style,
+  ...restProps
+}) => {
+  const scheme = useColorScheme() ?? 'dark';
+  const border = borderColor || Colors[scheme].tint;
+
+  // Get initials from name
+  const getInitials = (name?: string) => {
+    if (!name) return '';
+    return name
+      .split(' ')
+      .map((part) => part[0])
+      .join('')
+      .toUpperCase()
+      .substring(0, 2);
+  };
+
+  const initials = getInitials(name);
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          borderWidth,
+          borderColor: border,
+          backgroundColor: source ? 'transparent' : Colors[scheme].tint,
+        },
+      ]}
+    >
+      {source ? (
+        <Image
+          source={source}
+          style={[
+            {
+              width: size - 2 * borderWidth,
+              height: size - 2 * borderWidth,
+              borderRadius: (size - 2 * borderWidth) / 2,
+            },
+            style,
+          ]}
+          {...restProps}
+        />
+      ) : (
+        <ThemedText style={{ color: Colors[scheme].background, fontSize: size * 0.4 }}>
+          {initials}
+        </ThemedText>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+  },
+});
+
+export default ThemedAvatar;

components/theme/ui/ThemedBadge.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { StyleSheet, ViewProps } from 'react-native';
+import ThemedText from '@/components/theme/default/ThemedText';
+import ThemedView from '@/components/theme/default/ThemedView';
+import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+
+type ThemedBadgeProps = ViewProps & {
+  value: number | string;
+  size?: number;
+  color?: string;
+  textColor?: string;
+};
+
+const ThemedBadge: React.FC<ThemedBadgeProps> = ({
+  value,
+  size = 24,
+  color,
+  textColor,
+  style,
+  ...restProps
+}) => {
+  const scheme = useColorScheme() ?? 'dark';
+  const badgeColor = color || Colors[scheme].tint;
+  const badgeTextColor = textColor || Colors[scheme].background;
+
+  return (
+    <ThemedView
+      style={[
+        styles.badge,
+        {
+          width: size,
+          height: size,
+          borderRadius: size / 2,
+          backgroundColor: badgeColor,
+        },
+        style,
+      ]}
+      {...restProps}
+    >
+      <ThemedText style={[styles.text, { color: badgeTextColor, fontSize: size * 0.5 }]}>
+        {value}
+      </ThemedText>
+    </ThemedView>
+  );
+};
+
+const styles = StyleSheet.create({
+  badge: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    fontWeight: 'bold',
+  },
+});
+
+export default ThemedBadge;

components/theme/ui/ThemedCard.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { StyleSheet, ViewProps, Platform, DimensionValue } from 'react-native';
+import ThemedView from '@/components/theme/default/ThemedView';
+import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+
+type ThemedCardProps = ViewProps & {
+  width?: DimensionValue;
+  height?: DimensionValue;
+  padding?: number;
+  elevation?: number;
+  borderRadius?: number;
+};
+
+const ThemedCard: React.FC<ThemedCardProps> = ({
+  width = '100%',
+  height,
+  padding = 16,
+  elevation = 3,
+  borderRadius = 12,
+  style,
+  children,
+  ...restProps
+}) => {
+  const scheme = useColorScheme() ?? 'dark';
+
+  return (
+    <ThemedView
+      style={[
+        styles.card,
+        {
+          width,
+          height,
+          padding,
+          borderRadius,
+          backgroundColor: Colors[scheme].card,
+          ...Platform.select({
+            ios: {
+              shadowColor: Colors[scheme].text,
+              shadowOffset: { width: 0, height: elevation / 2 },
+              shadowOpacity: 0.1,
+              shadowRadius: elevation,
+            },
+            android: {
+              elevation,
+            },
+          }),
+        },
+        style,
+      ]}
+      {...restProps}
+    >
+      {children}
+    </ThemedView>
+  );
+};
+
+const styles = StyleSheet.create({
+  card: {
+    overflow: 'hidden',
+  },
+});
+
+export default ThemedCard;

components/theme/ui/ThemedDivider.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { StyleSheet, ViewProps, View, DimensionValue } from 'react-native';
+import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+
+type ThemedDividerProps = ViewProps & {
+  orientation?: 'horizontal' | 'vertical';
+  thickness?: DimensionValue;
+  length?: DimensionValue;
+  color?: string;
+};
+
+const ThemedDivider: React.FC<ThemedDividerProps> = ({
+  orientation = 'horizontal',
+  thickness = 1,
+  length = '100%',
+  style,
+  ...restProps
+}) => {
+  const scheme = useColorScheme() ?? 'dark';
+  const color = restProps.color || Colors[scheme].border;
+
+  return (
+    <View
+      style={[
+        orientation === 'horizontal'
+          ? { height: thickness, width: length }
+          : { width: thickness, height: length },
+        { backgroundColor: color },
+        style,
+      ]}
+      {...restProps}
+    />
+  );
+};
+
+export default ThemedDivider;

components/theme/ui/ThemedIcon.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { StyleSheet, ViewProps } from 'react-native';
+import { Ionicons } from '@expo/vector-icons'; // Or your preferred icon library
+import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+
+type ThemedIconProps = ViewProps & {
+  name: string;
+  size?: number;
+  color?: string;
+};
+
+const ThemedIcon: React.FC<ThemedIconProps> = ({ name, size = 24, color, style, ...restProps }) => {
+  const scheme = useColorScheme() ?? 'dark';
+  const iconColor = color || Colors[scheme].text;
+
+  return <Ionicons name={name} size={size} color={iconColor} style={style} {...restProps} />;
+};
+
+export default ThemedIcon;