Update home screen.

app/(tabs)/_layout.tsx

@@ -10,7 +10,7 @@ const TabLayout = () => {
     <Tabs
       screenOptions={{
         tabBarActiveTintColor: Colors[scheme].tint,
-        headerShown: false,
+        //headerShown: false,
         headerStyle: {
           backgroundColor: Colors[scheme].background,
         },

app/(tabs)/index.tsx

@@ -1,108 +1,113 @@
 import React, { useEffect, useState } from "react";
-import { StyleSheet, Alert } from "react-native";
+import { StyleSheet, Alert, Image, TouchableOpacity } from "react-native";
 import { ThemedText } from "@/components/ThemedText";
 import { ThemedView } from "@/components/ThemedView";
+import { getUserData } from "@/components/services/securestorage/UserData";
 import { Colors } from '@/constants/Colors';
 import { useColorScheme } from '@/hooks/useColorScheme';
-import FontAwesome from "@expo/vector-icons/FontAwesome";
+import * as ImagePicker from 'expo-image-picker';
-import Button from "@/components/buttons/Button";
+
-import { getUserData } from "@/components/services/securestorage/UserData";
+type UserData = {
+  fullName: string;
+  appleEmail: string;
+  pfpURL: string;
+  // Add other fields as needed
+};
 
 const Index = () => {
   const scheme = useColorScheme() ?? 'light';
-  const [pushToken, setPushToken] = useState<string | null>(null);
+  const [userData, setUserData] = useState<UserData | null>(null);
 
   useEffect(() => {
     const fetchUserData = async () => {
-      const userData = await getUserData();
+      try {
-      if (userData) {
+        const data = await getUserData();
-        setPushToken(userData.pushToken);
+        setUserData(data);
+      } catch (error) {
+        console.error("Error fetching user data:", error);
+        Alert.alert("Error", "Failed to load user data");
       }
     };
+
     fetchUserData();
   }, []);
 
-  const sendPushNotification = async () => {
+  const handleUpdateProfilePicture = async () => {
-    if (!pushToken) {
+    const permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();
-      Alert.alert('Error', 'Push token not available');
+    
+    if (permissionResult.granted === false) {
+      Alert.alert("Permission Required", "You need to grant permission to access your photos");
       return;
     }
 
-    const message = {
+    const result = await ImagePicker.launchImageLibraryAsync({
-      to: pushToken,
+      mediaTypes: ImagePicker.MediaTypeOptions.Images,
-      sound: 'default',
+      allowsEditing: true,
-      title: 'Hey Baby!',
+      aspect: [1, 1],
-      body: 'Are you ready for push notifications?!?',
+      quality: 1,
-      data: {
-        someData: 'goes here'
-      },
-    };
-
-    try {
-      const response = await fetch(`https://exp.host/--/api/v2/push/send`, {
-          method: 'POST',
-          headers: {
-            Accept: 'application/json',
-            'Accept-encoding': 'gzip, deflate',
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify(message),
     });
 
-      const result = await response.json();
+    if (!result.canceled) {
-      console.log('Result:', result);
+      // Here you would typically upload the image to your server
-      Alert.alert('Success', 'Push notification sent successfully');
+      // and update the user's profile picture URL
-
+      console.log("Selected image:", result.assets[0].uri);
-    } catch (error) {
+      // For now, let's just update the local state
-      console.error('Error sending push notification:', error);
+      setUserData(prevData => prevData ? {...prevData, pfpURL: result.assets[0].uri} : null);
-      Alert.alert('Error', 'Failed to send push notification');
     }
   };
 
   return (
     <ThemedView style={styles.container}>
-      <ThemedText style={styles.text}>
+      {userData ? (
-        Home Screen
+        <ThemedView style={styles.profileContainer}>
-      </ThemedText>
+          <TouchableOpacity onPress={handleUpdateProfilePicture}>
-      <ThemedView style={styles.footerContainer}>
+            <Image
-        <Button width={220} height={60}
+              source={userData.pfpURL ? { uri: userData.pfpURL } : require('@/assets/images/default-profile.png')}
-          onPress={sendPushNotification}
+              style={styles.profilePicture}
-        >
-        <FontAwesome name="bell" size={18}
-          color={Colors[scheme].background} style={styles.buttonIcon}
             />
-        <ThemedText
+          </TouchableOpacity>
-          style={[
+          <ThemedText style={styles.name}>{userData.fullName}</ThemedText>
-            styles.buttonLabel,
+          <ThemedText style={styles.email}>{userData.appleEmail}</ThemedText>
-            {color: Colors[scheme].background}
+        </ThemedView>
-          ]}
+      ) : (
-        >
+        <ThemedText>Loading user data...</ThemedText>
-          Send Push Notification
+      )}
-        </ThemedText>
+      <ThemedView style={styles.footerContainer}>
-        </Button>
+        {/* Add your relationship request button or other components here */}
       </ThemedView>
     </ThemedView>
   );
 }
+
 export default Index;
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     alignItems: 'center',
-    justifyContent: 'center',
   },
-  text: {
+  profileContainer: {
+    alignItems: 'center',
+    marginTop: 20,
+    marginBottom: 20,
+  },
+  profilePicture: {
+    width: 100,
+    height: 100,
+    borderRadius: 50,
+    marginBottom: 10,
+  },
+  name: {
     fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 5,
+  },
+  email: {
+    fontSize: 16,
+    marginBottom: 20,
   },
   footerContainer: {
     flex: 1 / 3, 
     alignItems: 'center',
   },
-  buttonLabel: {
-    fontSize: 16,
-  },
-  buttonIcon: {
-    paddingRight: 8,
-  },
 });

app/(tabs)/messages.tsx

@@ -11,25 +11,19 @@ import {
   SystemMessage,
 } from 'react-native-gifted-chat'
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context'
-import NavBar from '@/components/chat/NavBar'
 import AccessoryBar from '@/components/chat/AccessoryBar'
 import CustomActions from '@/components/chat/CustomActions'
 import CustomView from '@/components/chat/CustomView'
 import earlierMessages from '@/components/chat/data/earlierMessages'
 import messagesData from '@/components/chat/data/messages'
 import * as Clipboard from 'expo-clipboard'
+//import NavBar from '@/components/chat/NavBar'
 
 const user = {
   _id: 1,
   name: 'Developer',
 }
 
-// const otherUser = {
-//   _id: 2,
-//   name: 'React Native',
-//   avatar: 'https://facebook.github.io/react/img/logo_og.png',
-// }
-
 interface IState {
   messages: any[]
   step: number
@@ -125,7 +119,7 @@ const App = () => {
       {
         pattern: /#(\w+)/,
         style: { textDecorationLine: 'underline', color: 'darkorange' },
-        onPress: () => Linking.openURL('http://gifted.chat'),
+        onPress: () => Linking.openURL('https://gbrown.org'),
       },
     ]
   }, [])
@@ -264,7 +258,6 @@ const App = () => {
 
   return (
     <SafeAreaView style={styles.fill}>
-      <NavBar />
       <ThemedView style={styles.fill}>
         <GiftedChat
           messages={state.messages}
@@ -284,7 +277,7 @@ const App = () => {
             fontWeight: '200',
           }}
           renderQuickReplySend={renderQuickReplySend}
-          renderAccessory={renderAccessory}
+          //renderAccessory={renderAccessory}
           renderActions={renderCustomActions}
           renderSystemMessage={renderSystemMessage}
           renderCustomView={renderCustomView}
@@ -315,6 +308,8 @@ const styles = StyleSheet.create({
   fill: {
     flex: 1,
   },
+  sendLine: {
+  }
 })
 
 export default AppWrapper

components/auth/SignInScreen.tsx

@@ -7,13 +7,6 @@ import * as Notifications from 'expo-notifications';
 import Constants from 'expo-constants';
 import { saveUserData } from '@/components/services/securestorage/UserData';
 
-type UserData = {
-  appleId: string;
-  appleEmail: string;
-  fullName: string;
-  pushToken: string;
-};
-
 export default function SignInScreen({ onSignIn }: { onSignIn: () => void }) {
   const scheme = useColorScheme() ?? 'light';
 

components/chat/CustomView.tsx

@@ -82,7 +82,8 @@ const CustomView = ({
 export default CustomView
 
 const styles = StyleSheet.create({
-  container: {},
+  container: {
+  },
   mapView: {
     width: 150,
     height: 100,

components/home/TestPush.tsx

@@ -0,0 +1,89 @@
+import React, { useEffect, useState } from "react";
+import { StyleSheet, Alert } from "react-native";
+import { ThemedText } from "@/components/ThemedText";
+import { Colors } from '@/constants/Colors';
+import { useColorScheme } from '@/hooks/useColorScheme';
+import FontAwesome from "@expo/vector-icons/FontAwesome";
+import Button from "@/components/buttons/Button";
+import { getUserData } from "@/components/services/securestorage/UserData";
+
+const TestPush = () => {
+  const scheme = useColorScheme() ?? 'light';
+  const [pushToken, setPushToken] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchUserData = async () => {
+      const userData = await getUserData();
+      if (userData) {
+        setPushToken(userData.pushToken);
+      }
+    };
+    fetchUserData();
+  }, []);
+
+  const sendPushNotification = async () => {
+    if (!pushToken) {
+      Alert.alert('Error', 'Push token not available');
+    return;
+    }
+
+    const message = {
+      to: pushToken,
+      sound: 'default',
+      title: 'Hey Baby!',
+      body: 'Are you ready for push notifications?!?',
+      data: {
+        someData: 'goes here'
+      },
+    };
+
+    try {
+      const response = await fetch(`https://exp.host/--/api/v2/push/send`, {
+          method: 'POST',
+          headers: {
+            Accept: 'application/json',
+            'Accept-encoding': 'gzip, deflate',
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(message),
+      });
+
+      const result = await response.json();
+      console.log('Result:', result);
+      Alert.alert('Success', 'Push notification sent successfully');
+
+    } catch (error) {
+      console.error('Error sending push notification:', error);
+      Alert.alert('Error', 'Failed to send push notification');
+    }
+  };
+
+  return (
+    <Button width={220} height={60}
+      onPress={sendPushNotification}
+    >
+      <FontAwesome name="bell" size={18}
+        color={Colors[scheme].background} style={styles.buttonIcon}
+      />
+      <ThemedText
+        style={[
+          styles.buttonLabel,
+          {color: Colors[scheme].background}
+        ]}
+      >
+        Send Push Notification
+      </ThemedText>
+    </Button>
+  );
+
+};
+export default TestPush;
+
+const styles = StyleSheet.create({
+  buttonLabel: {
+    fontSize: 16,
+  },
+  buttonIcon: {
+    paddingRight: 8,
+  },
+});

components/services/securestorage/UserData.tsx

@@ -1,12 +1,5 @@
 import * as SecureStore from 'expo-secure-store';
 
-type UserData = {
-  appleId: string;
-  appleEmail: string;
-  fullName: string;
-  pushToken: string;
-};
-
 export const saveUserData = async (userData: any) => {
   try {
     await SecureStore.setItemAsync('userData', JSON.stringify(userData));