rewrite finished i believe

app/(tabs)/index.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { StyleSheet } from 'react-native';
+import { ThemedView } from '@/components/theme/Theme';
+import UserInfo from '@/components/home/UserInfo';
+import Relationship from '@/components/home/Relationship';
+
+const IndexScreen = () => {
+  const [pfpUrl, setPfpUrl] = useState<string | null>(null);
+  const handlePfpUpdate = (newPfpUrl: string) => {
+    setPfpUrl(newPfpUrl);
+  };
+  return (
+    <ThemedView style={styles.container}>
+      <UserInfo onPfpUpdate={handlePfpUpdate} />
+      <Relationship pfpUrl={pfpUrl} />
+      <ThemedView style={styles.footerContainer}>
+      </ThemedView>
+    </ThemedView>
+  );
+};
+export default IndexScreen;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+  },
+  footerContainer: {
+    flex: 1 / 3,
+    alignItems: 'center',
+  },
+});

app/(tabs)/messages.tsx

@@ -13,7 +13,7 @@ import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 import AccessoryBar from '@/components/chat/AccessoryBar';
 import CustomActions from '@/components/chat/CustomActions';
 import CustomView from '@/components/chat/CustomView';
-import NavBar from '@/components/chat/NavBar';
+//import NavBar from '@/components/chat/NavBar';
 import earlierMessages from '@/components/chat/data/earlierMessages';
 import messages from '@/components/chat/data/messages';
 import * as Clipboard from 'expo-clipboard';
@@ -22,7 +22,6 @@ import {
   GCState,
   GCStateAction,
   ActionKind,
-  GCMessage
 } from '@/constants/Types';
 
 const tempUser: GCUser = {
@@ -71,8 +70,193 @@ const MessagesScreen = () => {
     isTyping: false,
   })
 
-  const onSend = useCallback((messages: GCMessage[]) => {
+  const onSend = useCallback((messages: any[]) => {
     const sentMessages = [{ ...messages[0], sent: true, received: true }]
+    const newMessages = GiftedChat.append(
+      state.messages, sentMessages, Platform.OS !== 'web'
+    );
+    dispatch({ type: ActionKind.SEND_MESSAGE, payload: newMessages });
+  }, [dispatch, state.messages]);
 
+  const onLoadEarlier = useCallback(() => {
+    dispatch({ type: ActionKind.LOAD_EARLIER_START });
+    setTimeout(() => {
+      const newMessages = GiftedChat.prepend(
+        state.messages, earlierMessages() as IMessage[], Platform.OS !== 'web'
+      );
+      dispatch({ type: ActionKind.LOAD_EARLIER_MESSAGES, payload: newMessages })
+    }, 1500) // simulating network
+  }, [dispatch, state.messages]);
+
+  const parsePatterns = useCallback(() => {
+    return [
+      {
+        pattern: /#(\w+)/g,
+        style: { textDecorationLine: 'underline', color: 'darkorange' },
+        onPress: () => Linking.openURL('https://www.gbrown.org'),
+      },
+    ]
+  }, []);
+
+  const onLongPressAvatar = useCallback((pressedUser: any) => {
+    Alert.alert(JSON.stringify(pressedUser))
+  }, []);
+
+  const onPressAvatar = useCallback(() => {
+    Alert.alert('Pressed avatar!')
+  }, []);
+
+  const handleLongPress = useCallback((context: unknown, currentMessage: object) => {
+    if (!currentMessage.text) return;
+    const options = [
+      'Copy text',
+      'Cancel',
+    ]
+    const cancelButtonIndex = options.length - 1;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (context as any).actionSheet().showActionSheetWithOptions(
+      { options, cancelButtonIndex },
+      (buttonIndex: number) => {
+        switch (buttonIndex) {
+          case 0:
+            Clipboard.setStringAsync(currentMessage.text);
+            break;
+          default: break;
+        }
+      }
+    )
+  }, []);
+
+  const onQuickReply = useCallback((replies: any[]) => {
+    const createdAt = new Date();
+    if (replies.length === 1)
+      onSend([
+        {
+          createdAt,
+          _id: Math.round(Math.random() * 1000000),
+          text: replies[0].title,
+          tempUser,
+        },
+      ]);
+    else if (replies.length > 1)
+      onSend([
+        {
+          createdAt,
+          _id: Math.round(Math.random() * 1000000),
+          text: replies.map(reply => reply.title).join(', '),
+          tempUser,
+        },
+      ]);
+    else console.warn('replies param is not set correctly');
+  }, []);
+
+  const renderQuickReplySend = useCallback(() => {
+    return <ThemedText>{'custom send =>'}</ThemedText>
+  }, []);
+
+  const setIsTyping = useCallback((isTyping: boolean) => {
+    dispatch({ type: ActionKind.SET_IS_TYPING, payload: isTyping });
+  }, [dispatch]);
+
+  const onSendFromUser = useCallback((messages: IMessage[] = []) => {
+    const createdAt = new Date();
+    const messagesToUpload = messages.map(message => ({
+      ...message, tempUser, createdAt, id: Math.round(Math.random() * 1000000),
+    }));
+    onSend(messagesToUpload);
+  }, [onSend]);
+
+  const renderAccessory = useCallback(() => {
+    return (
+      <AccessoryBar
+        onSend={onSendFromUser}
+        isTyping={() => setIsTyping(!state.isTyping)}
+      />
+    );
+  }, [onSendFromUser, setIsTyping, state.isTyping]);
+
+  const renderCustomActions = useCallback(
+    props =>
+      Platform.OS === 'web' ? null : (
+        <CustomActions {...props} onSend={onSendFromUser} />
+      ),
+    [onSendFromUser]
+  );
+
+  const renderSystemMessage = useCallback(props => {
+    return (
+      <SystemMessage
+        {...props}
+        containerStyle={{marginBottom: 15}}
+        textStyle={{fontSize: 14}}
+      />
+    );
+  }, []);
+
+  const renderCustomView = useCallback(props => {
+    return <CustomView {...props} />
+  }, []);
+
+  const renderSend = useCallback((props: SendProps<IMessage>) => {
+    return (
+      <Send
+        {...props}
+        containerStyle={{justifyContent: 'center', paddingHorizontal: 10}}
+      >
+        <MaterialIcons size={30} color={'tomato'} name={'send'} />
+      </Send>
+    );
+  }, []);
+  return (
+    <SafeAreaView style={styles.fill}>
+      <ThemedView style={styles.fill}>
+        <GiftedChat
+          messages={state.messages}
+          onSend={onSend}
+          loadEarlier={state.loadEarlier}
+          onLoadEarlier={onLoadEarlier}
+          isLoadingEarlier={state.isLoadingEarlier}
+          parsePatterns={parsePatterns}
+          user={tempUser}
+          scrollToBottom
+          onPressAvatar={onPressAvatar}
+          onLongPressAvatar={onLongPressAvatar}
+          onLongPress={handleLongPress}
+          onQuickReply={onQuickReply}
+          quickReplyStyle={{ borderRadius: 2 }}
+          quickReplyTextStyle={{
+            fontWeight: '200',
+          }}
+          renderQuickReplySend={renderQuickReplySend}
+          //renderAccessory={renderAccessory}
+          renderActions={renderCustomActions}
+          renderSystemMessage={renderSystemMessage}
+          renderCustomView={renderCustomView}
+          renderSend={renderSend}
+          keyboardShouldPersistTaps='never'
+          timeTextStyle={{
+            left: { color: 'red' },
+            right: { color: 'yellow' },
+          }}
+          isTyping={state.isTyping}
+          inverted={Platform.OS !== 'web'}
+          infiniteScroll
+        />
+      </ThemedView>
+    </SafeAreaView>
+  )
 };
-export default MessagesScreen;
+
+const ChatWrapper = () => {
+  return (
+    <SafeAreaProvider><MessagesScreen /></SafeAreaProvider>
+  );
+};
+
+export default ChatWrapper;
+
+const styles = StyleSheet.create({
+  fill: {
+    flex: 1,
+  },
+});

app/(tabs)/settings.tsx

@@ -0,0 +1,25 @@
+import { StyleSheet } from "react-native";
+import { ThemedText, ThemedView } from "@/components/theme/Theme";
+
+const Settings = () => {
+  return (
+    <ThemedView style={styles.container}>
+      <ThemedText style={styles.text}>
+        Settings
+      </ThemedText>
+    </ThemedView>
+  );
+};
+
+export default Settings;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    fontSize: 24,
+  },
+});