From 1ac13abf4d7e294c34114e4c433f0b81742d5ed0 Mon Sep 17 00:00:00 2001
From: Hailey <me@haileyok.com>
Date: Sat, 18 May 2024 16:45:46 -0700
Subject: [PATCH] =?UTF-8?q?[=F0=9F=90=B4]=20Minor=20nits=20(#4102)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* set a better size for `initialNumToRender`

* memo list items

* scroll to end on both platforms

* rev
---
 src/screens/Messages/Conversation/MessagesList.tsx | 11 ++++++++---
 src/screens/Messages/List/ChatListItem.tsx         | 11 +++++++++--
 src/screens/Messages/List/index.tsx                |  2 +-
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/screens/Messages/Conversation/MessagesList.tsx b/src/screens/Messages/Conversation/MessagesList.tsx
index f099e267a1..b0723c0201 100644
--- a/src/screens/Messages/Conversation/MessagesList.tsx
+++ b/src/screens/Messages/Conversation/MessagesList.tsx
@@ -1,8 +1,8 @@
 import React, {useCallback, useRef} from 'react'
 import {FlatList, View} from 'react-native'
 import Animated, {
-  dispatchCommand,
   runOnJS,
+  scrollTo,
   useAnimatedKeyboard,
   useAnimatedReaction,
   useAnimatedRef,
@@ -229,9 +229,14 @@ export function MessagesList({
         return
       }
 
-      // Only call this on every frame while _opening_ the keyboard
+      // We are setting some arbitrarily high number here to ensure that we end up scrolling to the bottom. There is not
+      // any other way to synchronously scroll to the bottom of the list, since we cannot get the content size of the
+      // scrollview synchronously.
+      // On iOS we could have used `dispatchCommand('scrollToEnd', [])` since the underlying view has a `scrollToEnd`
+      // method. It doesn't exist on Android though. That's probably why `scrollTo` which is implemented in Reanimated
+      // doesn't support a `scrollToEnd`.
       if (prev && now > 0 && now >= prev) {
-        dispatchCommand(flatListRef, 'scrollToEnd', [false])
+        scrollTo(flatListRef, 0, 1e7, false)
       }
 
       // We want to store the full keyboard height after it fully opens so we can make some
diff --git a/src/screens/Messages/List/ChatListItem.tsx b/src/screens/Messages/List/ChatListItem.tsx
index 791dc82c0d..9a9a78ba7f 100644
--- a/src/screens/Messages/List/ChatListItem.tsx
+++ b/src/screens/Messages/List/ChatListItem.tsx
@@ -25,12 +25,17 @@ import {Bell2Off_Filled_Corner0_Rounded as BellStroke} from '#/components/icons/
 import {useMenuControl} from '#/components/Menu'
 import {Text} from '#/components/Typography'
 
-export function ChatListItem({convo}: {convo: ChatBskyConvoDefs.ConvoView}) {
+export let ChatListItem = ({
+  convo,
+}: {
+  convo: ChatBskyConvoDefs.ConvoView
+}): React.ReactNode => {
   const {currentAccount} = useSession()
+  const moderationOpts = useModerationOpts()
+
   const otherUser = convo.members.find(
     member => member.did !== currentAccount?.did,
   )
-  const moderationOpts = useModerationOpts()
 
   if (!otherUser || !moderationOpts) {
     return null
@@ -45,6 +50,8 @@ export function ChatListItem({convo}: {convo: ChatBskyConvoDefs.ConvoView}) {
   )
 }
 
+ChatListItem = React.memo(ChatListItem)
+
 function ChatListItemReady({
   convo,
   profile: profileUnshadowed,
diff --git a/src/screens/Messages/List/index.tsx b/src/screens/Messages/List/index.tsx
index c198d44c45..6de0ca0b02 100644
--- a/src/screens/Messages/List/index.tsx
+++ b/src/screens/Messages/List/index.tsx
@@ -73,7 +73,7 @@ export function MessagesScreen({navigation, route}: Props) {
     )
   }, [_, t])
 
-  const initialNumToRender = useInitialNumToRender()
+  const initialNumToRender = useInitialNumToRender(80)
   const [isPTRing, setIsPTRing] = useState(false)
 
   const {