diff --git a/packages/app-mobile/package.json b/packages/app-mobile/package.json
index 9c305d356..3de698bb2 100644
--- a/packages/app-mobile/package.json
+++ b/packages/app-mobile/package.json
@@ -41,7 +41,7 @@
     "big-integer": "^1.6.51",
     "buffer": "^6.0.3",
     "ethers": "^5.7.2",
-    "expo": "^48.0.4",
+    "expo": "^48.0.9",
     "expo-av": "~13.2.1",
     "expo-blur": "~12.2.1",
     "expo-checkbox": "~2.3.1",
diff --git a/packages/app-mobile/patches/expo+48.0.4.patch b/packages/app-mobile/patches/expo+48.0.10.patch
similarity index 100%
rename from packages/app-mobile/patches/expo+48.0.4.patch
rename to packages/app-mobile/patches/expo+48.0.10.patch
diff --git a/packages/app-mobile/patches/react-native-gifted-chat+2.0.1.patch b/packages/app-mobile/patches/react-native-gifted-chat+2.0.1.patch
new file mode 100644
index 000000000..4528e8522
--- /dev/null
+++ b/packages/app-mobile/patches/react-native-gifted-chat+2.0.1.patch
@@ -0,0 +1,67 @@
+diff --git a/node_modules/react-native-gifted-chat/lib/GiftedChat.js b/node_modules/react-native-gifted-chat/lib/GiftedChat.js
+index a91d004..54fd541 100644
+--- a/node_modules/react-native-gifted-chat/lib/GiftedChat.js
++++ b/node_modules/react-native-gifted-chat/lib/GiftedChat.js
+@@ -44,6 +44,7 @@ class GiftedChat extends React.Component {
+             typingDisabled: false,
+             text: undefined,
+             messages: undefined,
++            contextValues: {}
+         };
+         this.getLocale = () => this._locale;
+         this.onKeyboardWillShow = (e) => {
+@@ -193,6 +194,11 @@ class GiftedChat extends React.Component {
+         this.initLocale();
+         this.setMessages(messages || []);
+         this.setTextFromProp(text);
++        this.setState({contextValues: {
++          actionSheet: this.props.actionSheet ||
++            (() => { var _a; return (_a = this._actionSheetRef.current) === null || _a === void 0 ? void 0 : _a.getContext(); }),
++          getLocale: this.getLocale,
++        }});
+     }
+     componentWillUnmount() {
+         this.setIsMounted(false);
+@@ -416,13 +422,7 @@ class GiftedChat extends React.Component {
+     }
+     render() {
+         if (this.state.isInitialized === true) {
+-            const actionSheet = this.props.actionSheet ||
+-                (() => { var _a; return (_a = this._actionSheetRef.current) === null || _a === void 0 ? void 0 : _a.getContext(); });
+-            const { getLocale } = this;
+-            return (<GiftedChatContext.Provider value={{
+-                    actionSheet,
+-                    getLocale,
+-                }}>
++        return (<GiftedChatContext.Provider value={this.state.contextValues}>
+           <View testID={TEST_ID.WRAPPER} style={styles.wrapper}>
+             <ActionSheetProvider ref={this._actionSheetRef}>
+               <View style={styles.container} onLayout={this.onMainViewLayout}>
+diff --git a/node_modules/react-native-gifted-chat/lib/MessageContainer.js b/node_modules/react-native-gifted-chat/lib/MessageContainer.js
+index 6bdf6da..7256f5a 100644
+--- a/node_modules/react-native-gifted-chat/lib/MessageContainer.js
++++ b/node_modules/react-native-gifted-chat/lib/MessageContainer.js
+@@ -54,6 +54,7 @@ export default class MessageContainer extends React.PureComponent {
+             showScrollBottom: false,
+             hasScrolled: false,
+         };
++        this._extraData = [undefined, undefined]
+         this.renderTypingIndicator = () => {
+             if (Platform.OS === 'web') {
+                 return null;
+@@ -191,8 +192,14 @@ export default class MessageContainer extends React.PureComponent {
+     }
+     render() {
+         const { inverted } = this.props;
++      if (
++            this._extraData[0] !== this.props.extraData ||
++            this._extraData[1] !== this.props.isTyping
++          ) {
++            this._extraData = [this.props.extraData, this.props.isTyping]
++          }
+         return (<View style={this.props.alignTop ? styles.containerAlignTop : styles.container}>
+-        <FlatList ref={this.props.forwardRef} extraData={[this.props.extraData, this.props.isTyping]} keyExtractor={this.keyExtractor} enableEmptySections automaticallyAdjustContentInsets={false} inverted={inverted} data={this.props.messages} style={styles.listStyle} contentContainerStyle={styles.contentContainerStyle} renderItem={this.renderRow} {...this.props.invertibleScrollViewProps} ListEmptyComponent={this.renderChatEmpty} ListFooterComponent={inverted ? this.renderHeaderWrapper : this.renderFooter} ListHeaderComponent={inverted ? this.renderFooter : this.renderHeaderWrapper} onScroll={this.handleOnScroll} scrollEventThrottle={100} onLayout={this.onLayoutList} onEndReached={this.onEndReached} onEndReachedThreshold={0.1} {...this.props.listViewProps}/>
++        <FlatList ref={this.props.forwardRef} extraData={this._extraData} keyExtractor={this.keyExtractor} enableEmptySections automaticallyAdjustContentInsets={false} inverted={inverted} data={this.props.messages} style={styles.listStyle} contentContainerStyle={styles.contentContainerStyle} renderItem={this.renderRow} {...this.props.invertibleScrollViewProps} ListEmptyComponent={this.renderChatEmpty} ListFooterComponent={inverted ? this.renderHeaderWrapper : this.renderFooter} ListHeaderComponent={inverted ? this.renderFooter : this.renderHeaderWrapper} onScroll={this.handleOnScroll} scrollEventThrottle={100} onLayout={this.onLayoutList} onEndReached={this.onEndReached} onEndReachedThreshold={0.1} {...this.props.listViewProps}/>
+         {this.state.showScrollBottom && this.props.scrollToBottom
+                 ? this.renderScrollToBottomWrapper()
+                 : null}
diff --git a/packages/app-mobile/src/screens/Unlocked/Chat/ChatDetailScreen.tsx b/packages/app-mobile/src/screens/Unlocked/Chat/ChatDetailScreen.tsx
index 7482b4bd5..0f79982df 100644
--- a/packages/app-mobile/src/screens/Unlocked/Chat/ChatDetailScreen.tsx
+++ b/packages/app-mobile/src/screens/Unlocked/Chat/ChatDetailScreen.tsx
@@ -1,9 +1,10 @@
 import type { StackScreenProps } from "@react-navigation/stack";
 
-import { useState, useEffect, useCallback, useRef } from "react";
-import { Platform, Button, View, Text } from "react-native";
+import { useState, useCallback, useMemo } from "react";
 
-import { Video, ResizeMode, AVPlaybackStatus } from "expo-av";
+import * as Crypto from "expo-crypto";
+
+// import { Video, ResizeMode, AVPlaybackStatus } from "expo-av";
 
 import { CHAT_MESSAGES } from "@coral-xyz/common";
 import { createEmptyFriendship } from "@coral-xyz/db";
@@ -13,40 +14,45 @@ import {
   SignalingManager,
   useChatsWithMetadata,
 } from "@coral-xyz/tamagui";
-import { GiftedChat, MessageVideoProps } from "react-native-gifted-chat";
+import { GiftedChat, Send } from "react-native-gifted-chat";
 import { v4 as uuidv4 } from "uuid";
 
+import { UserAvatar } from "~components/UserAvatar";
 import { ChatStackNavigatorParamList } from "~screens/Unlocked/Chat/ChatHelpers";
 
-function VideoMessage() {
-  const video = useRef(null);
-  const [status, setStatus] = useState<AVPlaybackStatus | object>({});
-  return (
-    <View>
-      <Video
-        ref={video}
-        style={{ width: 150, height: 100 }}
-        source={{
-          uri: "https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4",
-        }}
-        useNativeControls
-        resizeMode={ResizeMode.CONTAIN}
-        isLooping
-        onPlaybackStatusUpdate={(status) => setStatus(() => status)}
-      />
-      <View>
-        <Button
-          title={status.isPlaying ? "Pause" : "Play"}
-          onPress={() =>
-            status.isPlaying
-              ? video.current.pauseAsync()
-              : video.current.playAsync()
-          }
-        />
-      </View>
-    </View>
-  );
-}
+const generateId = () => {
+  return Crypto.randomUUID();
+};
+
+// function VideoMessage() {
+//   const video = useRef(null);
+//   const [status, setStatus] = useState<AVPlaybackStatus | object>({});
+//   return (
+//     <View>
+//       <Video
+//         ref={video}
+//         style={{ width: 150, height: 100 }}
+//         source={{
+//           uri: "https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4",
+//         }}
+//         useNativeControls
+//         resizeMode={ResizeMode.CONTAIN}
+//         isLooping
+//         onPlaybackStatusUpdate={(status) => setStatus(() => status)}
+//       />
+//       <View>
+//         <Button
+//           title={status.isPlaying ? "Pause" : "Play"}
+//           onPress={() =>
+//             status.isPlaying
+//               ? video.current.pauseAsync()
+//               : video.current.playAsync()
+//           }
+//         />
+//       </View>
+//     </View>
+//   );
+// }
 
 const formatDate = (created_at: string) => {
   return !isNaN(new Date(parseInt(created_at, 10)).getTime())
@@ -54,6 +60,31 @@ const formatDate = (created_at: string) => {
     : 0;
 };
 
+const formatChats = (chats) => {
+  return chats
+    .map((x) => {
+      return {
+        _id: x.client_generated_uuid,
+        text: x.message,
+        createdAt: formatDate(x.created_at),
+        received: x.received,
+        sent: true,
+        pending: false,
+        // Videos / images follow this format
+        // video:
+        //   "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
+        // image:
+        //   "https://d33wubrfki0l68.cloudfront.net/7e97b18b02060f1d4b65a5850b49e2488da391bb/d60ff/img/homepage/dissection/3.png",
+        user: {
+          _id: x.uuid,
+          name: x.username,
+          avatar: x.image,
+        },
+      };
+    })
+    .reverse();
+};
+
 export function ChatDetailScreen({
   // navigation,
   route,
@@ -61,7 +92,6 @@ export function ChatDetailScreen({
   const { roomType, roomId, remoteUserId, remoteUsername } = route.params;
   const user = useUser();
   const avatarUrl = useAvatarUrl();
-  const existingChatRef = useRef<any>();
 
   const [isLoadingEarlier, setIsLoadingEarlier] = useState(false);
   const { chats } = useChatsWithMetadata({
@@ -69,56 +99,18 @@ export function ChatDetailScreen({
     type: roomType,
   });
 
-  const onLoadEarlier = async () => {
+  const messages = useMemo(() => formatChats(chats), [chats]);
+
+  const onLoadEarlier = useCallback(async () => {
     setIsLoadingEarlier(true);
     try {
       await fetchMoreChatsFor(user.uuid, roomId.toString(), roomType);
     } catch (e) {
       console.error(e);
+    } finally {
+      setIsLoadingEarlier(false);
     }
-    setIsLoadingEarlier(false);
-  };
-
-  const [messages, setMessages] = useState([]);
-
-  useEffect(() => {
-    if (
-      existingChatRef.current &&
-      JSON.stringify(chats) === JSON.stringify(existingChatRef.current)
-    ) {
-      return;
-    }
-    if (chats && chats.length) {
-      SignalingManager.getInstance().debouncedUpdateLastRead(
-        chats[chats.length - 1]
-      );
-    }
-    const _messages = chats
-      .map((x) => {
-        return {
-          _id: x.client_generated_uuid,
-          text: x.message,
-          createdAt: formatDate(x.created_at),
-          received: x.received,
-          sent: true,
-          pending: false,
-          // Videos / images follow this format
-          // video:
-          //   "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
-          // image:
-          //   "https://d33wubrfki0l68.cloudfront.net/7e97b18b02060f1d4b65a5850b49e2488da391bb/d60ff/img/homepage/dissection/3.png",
-          user: {
-            _id: x.uuid,
-            name: x.username,
-            avatar: x.image,
-          },
-        };
-      })
-      .reverse();
-
-    existingChatRef.current = chats;
-    setMessages(_messages);
-  }, [chats]);
+  }, [roomId, roomType, user.uuid]);
 
   const onSend = useCallback(
     async (messages = []) => {
@@ -166,14 +158,22 @@ export function ChatDetailScreen({
     [chats.length, roomId, roomType, user.uuid, remoteUserId, remoteUsername]
   );
 
-  const renderMessageVideo = useCallback((props: MessageVideoProps<any>) => {
-    const { video } = props.currentMessage;
-    return <VideoMessage />;
+  const renderSend = useCallback((props) => {
+    return <Send {...props} />;
+  }, []);
+
+  // const renderMessageVideo = useCallback((props: MessageVideoProps<any>) => {
+  //   const { video } = props.currentMessage;
+  //   return <VideoMessage />;
+  // }, []);
+
+  const renderAvatar = useCallback((props) => {
+    return <UserAvatar uri={props.currentMessage.user.avatar} size={32} />;
   }, []);
 
   return (
     <GiftedChat
-      messageIdGenerator={() => uuidv4()}
+      messageIdGenerator={generateId}
       showAvatarForEveryMessage
       alwaysShowSend
       loadEarlier
@@ -183,7 +183,9 @@ export function ChatDetailScreen({
       inverted
       messages={messages}
       onSend={onSend}
-      renderMessageVideo={renderMessageVideo}
+      renderSend={renderSend}
+      renderAvatar={renderAvatar}
+      // renderMessageVideo={renderMessageVideo}
       user={{
         _id: user.uuid,
         name: user.username,
diff --git a/yarn.lock b/yarn.lock
index 9411ef63b..3b76ddd01 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3302,7 +3302,7 @@ __metadata:
     buffer: ^6.0.3
     eslint-config-custom: "*"
     ethers: ^5.7.2
-    expo: ^48.0.4
+    expo: ^48.0.9
     expo-av: ~13.2.1
     expo-blur: ~12.2.1
     expo-checkbox: ~2.3.1
@@ -15146,21 +15146,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-preset-expo@npm:~9.3.1":
-  version: 9.3.1
-  resolution: "babel-preset-expo@npm:9.3.1"
-  dependencies:
-    "@babel/plugin-proposal-decorators": ^7.12.9
-    "@babel/plugin-proposal-object-rest-spread": ^7.12.13
-    "@babel/plugin-transform-react-jsx": ^7.12.17
-    "@babel/preset-env": ^7.20.0
-    babel-plugin-module-resolver: ^4.1.0
-    babel-plugin-react-native-web: ~0.18.10
-    metro-react-native-babel-preset: 0.73.8
-  checksum: a2923d2b5524224804b8be31d5e5a62607ac6415fc4608d5a9ca14e613c73549428d680897c3727bbd1a73120b162f688d53b68d337a90d38b73fd942471a163
-  languageName: node
-  linkType: hard
-
 "babel-preset-expo@npm:~9.3.2":
   version: 9.3.2
   resolution: "babel-preset-expo@npm:9.3.2"
@@ -21543,39 +21528,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"expo@npm:^48.0.4":
-  version: 48.0.9
-  resolution: "expo@npm:48.0.9"
-  dependencies:
-    "@babel/runtime": ^7.20.0
-    "@expo/cli": 0.6.2
-    "@expo/config": 8.0.2
-    "@expo/config-plugins": 6.0.1
-    "@expo/vector-icons": ^13.0.0
-    babel-preset-expo: ~9.3.1
-    cross-spawn: ^6.0.5
-    expo-application: ~5.1.1
-    expo-asset: ~8.9.1
-    expo-constants: ~14.2.1
-    expo-file-system: ~15.2.2
-    expo-font: ~11.1.1
-    expo-keep-awake: ~12.0.1
-    expo-modules-autolinking: 1.1.2
-    expo-modules-core: 1.2.6
-    fbemitter: ^3.0.0
-    getenv: ^1.0.0
-    invariant: ^2.2.4
-    md5-file: ^3.2.3
-    node-fetch: ^2.6.7
-    pretty-format: ^26.5.2
-    uuid: ^3.4.0
-  bin:
-    expo: bin/cli.js
-  checksum: 7e901402c47408162a20ac3cd547e37e7d3c49f0e9782c104899a54e8e4262135b00cb7ae5ea8ef2e15755cbc10fac4ab1d5b144903f620fdba10db45b2ebaa4
-  languageName: node
-  linkType: hard
-
-"expo@npm:^48.0.7":
+"expo@npm:^48.0.7, expo@npm:^48.0.9":
   version: 48.0.10
   resolution: "expo@npm:48.0.10"
   dependencies:
@@ -28747,54 +28700,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"metro-react-native-babel-preset@npm:0.73.8":
-  version: 0.73.8
-  resolution: "metro-react-native-babel-preset@npm:0.73.8"
-  dependencies:
-    "@babel/core": ^7.20.0
-    "@babel/plugin-proposal-async-generator-functions": ^7.0.0
-    "@babel/plugin-proposal-class-properties": ^7.0.0
-    "@babel/plugin-proposal-export-default-from": ^7.0.0
-    "@babel/plugin-proposal-nullish-coalescing-operator": ^7.0.0
-    "@babel/plugin-proposal-object-rest-spread": ^7.0.0
-    "@babel/plugin-proposal-optional-catch-binding": ^7.0.0
-    "@babel/plugin-proposal-optional-chaining": ^7.0.0
-    "@babel/plugin-syntax-dynamic-import": ^7.0.0
-    "@babel/plugin-syntax-export-default-from": ^7.0.0
-    "@babel/plugin-syntax-flow": ^7.18.0
-    "@babel/plugin-syntax-nullish-coalescing-operator": ^7.0.0
-    "@babel/plugin-syntax-optional-chaining": ^7.0.0
-    "@babel/plugin-transform-arrow-functions": ^7.0.0
-    "@babel/plugin-transform-async-to-generator": ^7.0.0
-    "@babel/plugin-transform-block-scoping": ^7.0.0
-    "@babel/plugin-transform-classes": ^7.0.0
-    "@babel/plugin-transform-computed-properties": ^7.0.0
-    "@babel/plugin-transform-destructuring": ^7.0.0
-    "@babel/plugin-transform-flow-strip-types": ^7.0.0
-    "@babel/plugin-transform-function-name": ^7.0.0
-    "@babel/plugin-transform-literals": ^7.0.0
-    "@babel/plugin-transform-modules-commonjs": ^7.0.0
-    "@babel/plugin-transform-named-capturing-groups-regex": ^7.0.0
-    "@babel/plugin-transform-parameters": ^7.0.0
-    "@babel/plugin-transform-react-display-name": ^7.0.0
-    "@babel/plugin-transform-react-jsx": ^7.0.0
-    "@babel/plugin-transform-react-jsx-self": ^7.0.0
-    "@babel/plugin-transform-react-jsx-source": ^7.0.0
-    "@babel/plugin-transform-runtime": ^7.0.0
-    "@babel/plugin-transform-shorthand-properties": ^7.0.0
-    "@babel/plugin-transform-spread": ^7.0.0
-    "@babel/plugin-transform-sticky-regex": ^7.0.0
-    "@babel/plugin-transform-template-literals": ^7.0.0
-    "@babel/plugin-transform-typescript": ^7.5.0
-    "@babel/plugin-transform-unicode-regex": ^7.0.0
-    "@babel/template": ^7.0.0
-    react-refresh: ^0.4.0
-  peerDependencies:
-    "@babel/core": "*"
-  checksum: 3d9b6308163b60ffc4d066b997e5d0205a39f72f0de4e376713262e552f22fc1369321f225636cf94f4833b3d2dd737b4ec2f92776137641c085d2a13db00979
-  languageName: node
-  linkType: hard
-
 "metro-react-native-babel-preset@npm:0.73.9":
   version: 0.73.9
   resolution: "metro-react-native-babel-preset@npm:0.73.9"