fix expo patch & chat slowness (#3662)

* expo patch

* fix

* merge other stuff

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",

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}

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,112 +14,103 @@ 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())
     ? new Date(parseInt(created_at, 10)).getTime()
     : 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,
 }: StackScreenProps<ChatStackNavigatorParamList, "ChatDetail">): JSX.Element {
   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({
     room: roomId.toString(),
     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,