[🐴] Minor nits (#4102)

* set a better size for `initialNumToRender`

* memo list items

* scroll to end on both platforms

* rev

3 files changed, 18 insertions, 6 deletions

diff --git a/src/screens/Messages/Conversation/MessagesList.tsx b/src/screens/Messages/Conversation/MessagesList.tsx
index f099e267a..b0723c020 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 791dc82c0..9a9a78ba7 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 c198d44c4..6de0ca0b0 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 {