@planningcenter/chat-react-native 3.35.0-rc.3 → 3.35.0-rc.5

package/src/hooks/use_jump_to_bottom_action.ts

@@ -0,0 +1,75 @@
+import { useQueryClient } from '@tanstack/react-query'
+import { RefObject, useCallback, useEffect, useRef, useState } from 'react'
+import type { FlatList } from 'react-native'
+import { useConversationContext } from '../contexts/conversation_context'
+import { ApiCollection, MessageResource } from '../types'
+import { Haptic } from '../utils/native_adapters'
+import { getMessagesQueryKey, getMessagesRequestArgs } from '../utils/request/get_messages'
+import { useApiClient } from './use_api_client'
+import { useJumpToUnreadGates } from './use_jump_to_unread_gates'
+
+const LATEST_PAGE_SIZE = 25
+
+export function useJumpToBottomAction({ listRef }: { listRef: RefObject<FlatList | null> }) {
+  const { jumpToUnreadEnabled } = useJumpToUnreadGates()
+  const { conversationId, currentPageReplyRootId, initialMessageId, setInitialMessageId } =
+    useConversationContext()
+  const queryClient = useQueryClient()
+  const apiClient = useApiClient()
+  const [isJumpingToBottom, setIsJumpingToBottom] = useState(false)
+
+  const mountedRef = useRef(true)
+  useEffect(
+    () => () => {
+      mountedRef.current = false
+    },
+    []
+  )
+
+  const handleJumpToBottom = useCallback(() => {
+    Haptic.impactLight()
+    listRef.current?.scrollToOffset({ offset: 0, animated: true })
+
+    if (!jumpToUnreadEnabled || !initialMessageId) return
+
+    const queryKey = getMessagesQueryKey({
+      conversation_id: conversationId,
+      reply_root_id: currentPageReplyRootId,
+    })
+    const args = getMessagesRequestArgs({
+      conversation_id: conversationId,
+      reply_root_id: currentPageReplyRootId,
+    })
+
+    setIsJumpingToBottom(true)
+
+    queryClient
+      .cancelQueries({ queryKey })
+      .then(() =>
+        apiClient.chat.get<ApiCollection<MessageResource>>({
+          url: args.url,
+          data: { ...args.data, perPage: LATEST_PAGE_SIZE },
+        })
+      )
+      .then(latest => {
+        if (!mountedRef.current) return
+        queryClient.setQueryData(queryKey, { pages: [latest], pageParams: [{}] })
+        setInitialMessageId(null)
+        listRef.current?.scrollToOffset({ offset: 0, animated: false })
+      })
+      .finally(() => {
+        if (mountedRef.current) setIsJumpingToBottom(false)
+      })
+  }, [
+    jumpToUnreadEnabled,
+    initialMessageId,
+    setInitialMessageId,
+    queryClient,
+    apiClient,
+    conversationId,
+    currentPageReplyRootId,
+    listRef,
+  ])
+
+  return { handleJumpToBottom, isJumpingToBottom }
+}

package/src/hooks/use_jump_to_unread_anchor.ts

@@ -0,0 +1,68 @@
+import { RefObject, useCallback, useEffect, useRef } from 'react'
+import type { FlatList } from 'react-native'
+import { useConversationContext } from '../contexts/conversation_context'
+import { useJumpToUnreadGates } from './use_jump_to_unread_gates'
+
+interface UseJumpToUnreadAnchorArgs<T> {
+  listRef: RefObject<FlatList<T> | null>
+  items: T[]
+}
+
+interface ScrollToIndexFailInfo {
+  index: number
+  highestMeasuredFrameIndex: number
+  averageItemLength: number
+}
+
+export function useJumpToUnreadAnchor<T extends { id?: string | number }>({
+  listRef,
+  items,
+}: UseJumpToUnreadAnchorArgs<T>) {
+  const { jumpToUnreadActive } = useJumpToUnreadGates()
+  const { initialMessageId } = useConversationContext()
+  const hasAnchoredRef = useRef(false)
+  const userTouchedRef = useRef(false)
+  const retryTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(() => {
+    return () => {
+      if (retryTimerRef.current) clearTimeout(retryTimerRef.current)
+      retryTimerRef.current = null
+    }
+  }, [])
+
+  const onScrollBeginDrag = useCallback(() => {
+    userTouchedRef.current = true
+    if (retryTimerRef.current) {
+      clearTimeout(retryTimerRef.current)
+      retryTimerRef.current = null
+    }
+  }, [])
+
+  const onContentSizeChange = useCallback(() => {
+    if (hasAnchoredRef.current) return
+    if (!jumpToUnreadActive || !initialMessageId) return
+    if (userTouchedRef.current) return
+    const index = items.findIndex(item => String(item.id ?? '') === initialMessageId)
+    if (index < 0) return
+    hasAnchoredRef.current = true
+    listRef.current?.scrollToIndex({ index, viewPosition: 0.25, animated: false })
+  }, [jumpToUnreadActive, initialMessageId, items, listRef])
+
+  const onScrollToIndexFailed = useCallback(
+    (info: ScrollToIndexFailInfo) => {
+      if (userTouchedRef.current) return
+      const offset = info.averageItemLength * info.index
+      listRef.current?.scrollToOffset({ offset, animated: false })
+      if (retryTimerRef.current) clearTimeout(retryTimerRef.current)
+      retryTimerRef.current = setTimeout(() => {
+        retryTimerRef.current = null
+        if (userTouchedRef.current) return
+        listRef.current?.scrollToIndex({ index: info.index, viewPosition: 0.25, animated: false })
+      }, 50)
+    },
+    [listRef]
+  )
+
+  return { onScrollBeginDrag, onContentSizeChange, onScrollToIndexFailed }
+}

package/src/hooks/use_jump_to_unread_gates.ts

@@ -0,0 +1,10 @@
+import { useConversationContext } from '../contexts/conversation_context'
+import { useFeatures } from './use_features'
+
+export function useJumpToUnreadGates() {
+  const { featureEnabled } = useFeatures()
+  const { initialMessageIdIsAnchor } = useConversationContext()
+  const jumpToUnreadEnabled = featureEnabled('jump_to_unread')
+  const jumpToUnreadActive = jumpToUnreadEnabled && initialMessageIdIsAnchor
+  return { jumpToUnreadEnabled, jumpToUnreadActive }
+}

package/src/hooks/use_mark_latest_message_read.ts

@@ -1,15 +1,19 @@
 import { debounce } from 'lodash'
 import { useEffect, useMemo, useRef } from 'react'
+import { useConversationContext } from '../contexts/conversation_context'
 import { ConversationResource, MessageResource } from '../types'
 import { useAppState } from './use_app_state'
 import { useConversationsMarkRead } from './use_conversations_actions'
+import { useJumpToUnreadGates } from './use_jump_to_unread_gates'
 
 interface Props {
   conversation: ConversationResource
-  messages: MessageResource[]
+  messages?: MessageResource[]
 }
 
 export function useMarkLatestMessageRead({ conversation }: Props) {
+  const { jumpToUnreadActive } = useJumpToUnreadGates()
+  const { currentPageReplyRootId, atEndOfMessageHistory } = useConversationContext()
   const firedOnce = useRef<boolean>(false)
   const { markRead } = useConversationsMarkRead({ conversation })
   const debouncedMarkRead = useMemo(
@@ -25,10 +29,20 @@ export function useMarkLatestMessageRead({ conversation }: Props) {
 
   useEffect(() => {
     if (!isActive || !shouldMarkRead) return
+    if (currentPageReplyRootId) return
+    if (jumpToUnreadActive && !atEndOfMessageHistory) return
 
     firedOnce.current = true
 
     debouncedMarkRead(true)
     // keeping unreadReactionCount in the dependency array to watch for changes
-  }, [debouncedMarkRead, isActive, shouldMarkRead, unreadReactionCount])
+  }, [
+    debouncedMarkRead,
+    isActive,
+    shouldMarkRead,
+    unreadReactionCount,
+    currentPageReplyRootId,
+    jumpToUnreadActive,
+    atEndOfMessageHistory,
+  ])
 }

package/src/hooks/use_scroll_tracking.ts

@@ -0,0 +1,64 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native'
+import { useConversationContext } from '../contexts/conversation_context'
+
+const JUMP_TO_BOTTOM_OFFSET_THRESHOLD = 200
+const AT_BOTTOM_OFFSET_TOLERANCE = 5
+const FETCH_NEWER_OFFSET_THRESHOLD = 600
+
+interface UseScrollTrackingArgs {
+  hasMoreNewerMessages: boolean
+  isFetchingNewerMessages: boolean
+  fetchNewerMessages: () => void
+  cancelFetchNewerMessages: () => void
+}
+
+export function useScrollTracking({
+  hasMoreNewerMessages,
+  isFetchingNewerMessages,
+  fetchNewerMessages,
+  cancelFetchNewerMessages,
+}: UseScrollTrackingArgs) {
+  const { atEndOfMessageHistory, setAtEndOfMessageHistory } = useConversationContext()
+  const [showJumpToBottomButton, setShowJumpToBottomButton] = useState(false)
+  const withinBoundaryRef = useRef(false)
+
+  useEffect(() => {
+    return () => {
+      cancelFetchNewerMessages()
+    }
+  }, [cancelFetchNewerMessages])
+
+  useEffect(() => {
+    if (!isFetchingNewerMessages) withinBoundaryRef.current = false
+  }, [isFetchingNewerMessages])
+
+  const onScroll = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      const offsetY = event.nativeEvent.contentOffset.y
+      setShowJumpToBottomButton(offsetY > JUMP_TO_BOTTOM_OFFSET_THRESHOLD)
+
+      const atBottom = offsetY < AT_BOTTOM_OFFSET_TOLERANCE
+      const atEnd = atBottom && !hasMoreNewerMessages
+      if (atEnd !== atEndOfMessageHistory) setAtEndOfMessageHistory(atEnd)
+
+      if (offsetY >= FETCH_NEWER_OFFSET_THRESHOLD) {
+        withinBoundaryRef.current = false
+        return
+      }
+      if (withinBoundaryRef.current) return
+      if (!hasMoreNewerMessages || isFetchingNewerMessages) return
+      withinBoundaryRef.current = true
+      fetchNewerMessages()
+    },
+    [
+      hasMoreNewerMessages,
+      isFetchingNewerMessages,
+      fetchNewerMessages,
+      atEndOfMessageHistory,
+      setAtEndOfMessageHistory,
+    ]
+  )
+
+  return { onScroll, showJumpToBottomButton }
+}

package/src/hooks/use_track_highest_seen_message.ts

@@ -0,0 +1,43 @@
+import { useCallback, useEffect, useMemo } from 'react'
+import { AppState } from 'react-native'
+import { useConversationContext } from '../contexts/conversation_context'
+import { makeHighestSeenTracker } from '../utils/highest_seen_tracker'
+import { useConversationsMarkReadUpTo } from './use_conversations_actions'
+import { useJumpToUnreadGates } from './use_jump_to_unread_gates'
+
+export function useTrackHighestSeenMessage() {
+  const { conversationId, currentPageReplyRootId } = useConversationContext()
+  const { jumpToUnreadActive } = useJumpToUnreadGates()
+  const enabled = jumpToUnreadActive && !currentPageReplyRootId
+  const { mutate: markReadUpTo } = useConversationsMarkReadUpTo({ conversationId })
+
+  const tracker = useMemo(
+    () => makeHighestSeenTracker(conversationId, ({ sortKey }) => markReadUpTo({ sortKey })),
+    [conversationId, markReadUpTo]
+  )
+
+  const onMessageSeen = useCallback(
+    (sortKey: string) => {
+      if (!enabled) return
+      tracker.onSeen(sortKey)
+    },
+    [enabled, tracker]
+  )
+
+  useEffect(() => {
+    if (!enabled) return
+    const sub = AppState.addEventListener('change', state => {
+      if (state !== 'active') tracker.flushNow()
+    })
+    return () => sub.remove()
+  }, [enabled, tracker])
+
+  useEffect(() => {
+    return () => {
+      tracker.flushNow()
+      tracker.cancel()
+    }
+  }, [tracker])
+
+  return { onMessageSeen }
+}

package/src/screens/conversation_screen.tsx

@@ -8,8 +8,9 @@ import {
   useTheme as useNavigationTheme,
   useRoute,
 } from '@react-navigation/native'
-import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { FlatList, Platform, StyleSheet, View } from 'react-native'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { ActivityIndicator, FlatList, Platform, StyleSheet, View } from 'react-native'
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Badge, Icon, Text } from '../components'
 import { EmptyConversationBlankState } from '../components/conversation/empty_conversation_blank_state'
@@ -23,23 +24,43 @@ import {
 import { ReplyShadowMessage } from '../components/conversation/reply_shadow_message'
 import { SystemMessage } from '../components/conversation/system_message'
 import { TypingIndicator } from '../components/conversation/typing_indicator'
+import { UnreadDivider } from '../components/conversation/unread_divider'
 import { KeyboardView } from '../components/display/keyboard_view'
 import BlankState from '../components/primitive/blank_state_primitive'
-import { ConversationContextProvider } from '../contexts/conversation_context'
+import {
+  ConversationContextProvider,
+  useConversationContext,
+} from '../contexts/conversation_context'
 import { useTheme } from '../hooks'
 import { useConversation } from '../hooks/use_conversation'
 import { useConversationJoltEvents } from '../hooks/use_conversation_jolt_events'
 import { useConversationMessages } from '../hooks/use_conversation_messages'
 import { useConversationMessagesJoltEvents } from '../hooks/use_conversation_messages_jolt_events'
 import { useFeatures } from '../hooks/use_features'
+import { useFlatListViewability } from '../hooks/use_flat_list_viewability'
+import { useJumpToBottomAction } from '../hooks/use_jump_to_bottom_action'
+import { useJumpToUnreadAnchor } from '../hooks/use_jump_to_unread_anchor'
+import { useJumpToUnreadGates } from '../hooks/use_jump_to_unread_gates'
 import { useMarkLatestMessageRead } from '../hooks/use_mark_latest_message_read'
 import {
   normalizeAnalyticsMetadata,
   usePublishProductAnalyticsEvent,
 } from '../hooks/use_product_analytics'
+import { useScrollTracking } from '../hooks/use_scroll_tracking'
+import { useTrackHighestSeenMessage } from '../hooks/use_track_highest_seen_message'
 import { ConversationBadgeResource } from '../types/resources/conversation_badge'
 import { getRelativeDateStatus } from '../utils/date'
-import { groupMessages, type DateSeparator } from '../utils/group_messages'
+import {
+  groupMessages,
+  UNREAD_DIVIDER_KEY,
+  type DateSeparator,
+  type EnrichedMessage,
+} from '../utils/group_messages'
+import {
+  detectDividerExitTowardNewer,
+  reportViewableMessages,
+  type ViewabilityObserver,
+} from '../utils/message_viewability'
 import { CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL } from '../utils/styles'
 import { isSystemMessage } from '../utils/system_messages'
 
@@ -60,6 +81,9 @@ export type ConversationRouteProps = {
 
 export type ConversationScreenProps = StaticScreenProps<ConversationRouteProps>
 
+const extractItemKey = (item: EnrichedMessage) => String(item.id)
+const maintainVisibleContentPosition = { minIndexForVisible: 0 }
+
 export function ConversationScreen({ route }: ConversationScreenProps) {
   const { conversation_id, message_id, reply_root_id } = route.params
 
@@ -72,7 +96,8 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
   })
 
   const lastReadMessageSortKey = conversation.conversationMembership?.lastReadMessageSortKey ?? null
-  const jumpToUnreadAnchor = featureEnabled('jump_to_unread') ? lastReadMessageSortKey : null
+  const jumpToUnreadAnchor =
+    featureEnabled('jump_to_unread') && !reply_root_id ? lastReadMessageSortKey : null
   const initialMessageId = message_id ?? jumpToUnreadAnchor
   const initialMessageIdIsAnchor = !!initialMessageId && !message_id
 
@@ -91,29 +116,49 @@ export function ConversationScreen({ route }: ConversationScreenProps) {
 function ConversationScreenContent({ route }: ConversationScreenProps) {
   const styles = useStyles()
   const navigation = useNavigation()
-  const { conversation_id, editing_message_id, reply_root_id, reply_root_author_name } =
-    route.params
+  const {
+    conversation_id: conversationId,
+    editing_message_id: editingMessageId,
+    reply_root_id: replyRootId,
+    reply_root_author_name: replyRootAuthorName,
+  } = route.params
   const { data: conversation } = useConversation(route.params)
-  const { messages, refetch, isRefetching, fetchOlderMessages } = useConversationMessages({
-    conversation_id,
-    reply_root_id,
-  })
-  useConversationJoltEvents({ conversationId: conversation_id })
-  useConversationMessagesJoltEvents({ conversationId: conversation_id })
+  const {
+    messages,
+    fetchOlderMessages,
+    fetchNewerMessages,
+    hasMoreNewerMessages,
+    isFetchingNewerMessages,
+    cancelFetchNewerMessages,
+  } = useConversationMessages({ conversation_id: conversationId, reply_root_id: replyRootId })
+
+  const { jumpToUnreadActive } = useJumpToUnreadGates()
+  const { initialMessageId } = useConversationContext()
+
+  useConversationJoltEvents({ conversationId })
+  useConversationMessagesJoltEvents({ conversationId })
   useEnsureConversationsRouteExists()
   useMarkLatestMessageRead({ conversation, messages })
-  const messagesWithSeparators = groupMessages({
-    ms: messages,
-    inReplyScreen: !!reply_root_id,
-  })
-  const noMessages = messagesWithSeparators.length === 0
+  const { onMessageSeen } = useTrackHighestSeenMessage()
+
+  const items = useMemo(
+    () =>
+      groupMessages({
+        ms: messages,
+        inReplyScreen: !!replyRootId,
+        jumpToUnreadActive,
+        initialMessageId,
+      }),
+    [messages, replyRootId, jumpToUnreadActive, initialMessageId]
+  )
+  const noMessages = items.length === 0
 
   const { repliesDisabled, memberAbility, badges, title } = conversation
   const canReply = memberAbility?.canReply
   const showLeaderDisabledReplyBanner = canReply && repliesDisabled
   const canDeleteNonAuthoredMessages = memberAbility?.canDeleteNonAuthoredMessages ?? false
-  const currentlyEditingMessage = messages.find(m => String(m.id) === String(editing_message_id))
-  const replyRootAuthorFirstName = reply_root_author_name?.split(' ')[0]
+  const currentlyEditingMessage = messages.find(m => String(m.id) === String(editingMessageId))
+  const replyRootAuthorFirstName = replyRootAuthorName?.split(' ')[0]
   const replyHeaderTitle = replyRootAuthorFirstName
     ? `Reply to ${replyRootAuthorFirstName}`
     : 'Reply'
@@ -121,21 +166,96 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
   const muted = conversation.conversationMembership?.muted ?? conversation.muted
 
   const listRef = useRef<FlatList>(null)
-  const [showJumpToBottomButton, setShowJumpToBottomButton] = useState(false)
+  const [dividerScrolledPast, setDividerScrolledPast] = useState(false)
+
+  const observers = useMemo<ViewabilityObserver<EnrichedMessage>[]>(
+    () => [
+      reportViewableMessages(onMessageSeen),
+      detectDividerExitTowardNewer({
+        dividerKey: UNREAD_DIVIDER_KEY,
+        initialMessageId,
+        onExited: () => setDividerScrolledPast(true),
+      }),
+    ],
+    [onMessageSeen, initialMessageId]
+  )
 
-  const trackScroll = (event: any) => {
-    const offsetY = event.nativeEvent.contentOffset.y
-    setShowJumpToBottomButton(offsetY > 200)
-  }
+  const { viewabilityConfigCallbackPairs, onScrollBeginDrag: viewabilityOnScrollBeginDrag } =
+    useFlatListViewability({ observers })
+  const {
+    onContentSizeChange,
+    onScrollToIndexFailed,
+    onScrollBeginDrag: anchorOnScrollBeginDrag,
+  } = useJumpToUnreadAnchor({ listRef, items })
+  const onScrollBeginDrag = useCallback(() => {
+    viewabilityOnScrollBeginDrag()
+    anchorOnScrollBeginDrag()
+  }, [viewabilityOnScrollBeginDrag, anchorOnScrollBeginDrag])
+  const { onScroll, showJumpToBottomButton } = useScrollTracking({
+    hasMoreNewerMessages,
+    isFetchingNewerMessages,
+    fetchNewerMessages,
+    cancelFetchNewerMessages,
+  })
+  const { handleJumpToBottom, isJumpingToBottom } = useJumpToBottomAction({ listRef })
+
+  const listHeader = useMemo(
+    () => (
+      <View>
+        {isFetchingNewerMessages && (
+          <Animated.View
+            entering={FadeIn.duration(750)}
+            exiting={FadeOut.duration(750)}
+            style={styles.loadingFooter}
+            accessibilityRole="progressbar"
+            accessibilityLabel="Loading more messages"
+          >
+            <ActivityIndicator />
+          </Animated.View>
+        )}
+        <View style={styles.listHeader} />
+      </View>
+    ),
+    [isFetchingNewerMessages, styles.loadingFooter, styles.listHeader]
+  )
 
-  const handleReturnToBottom = useCallback(() => {
-    listRef.current?.scrollToOffset({
-      offset: 0,
-    })
-  }, [])
+  const renderItem = useCallback(
+    ({ item }: { item: EnrichedMessage }) => {
+      if (item.type === 'DateSeparator') return <InlineDateSeparator {...item} />
+      if (item.type === 'UnreadDivider') return <UnreadDivider scrolledPast={dividerScrolledPast} />
+      if (item.type === 'ReplyShadowMessage') {
+        return (
+          <ReplyShadowMessage
+            {...item}
+            conversation_id={conversationId}
+            inReplyScreen={!!replyRootId}
+          />
+        )
+      }
+      if (isSystemMessage(item)) {
+        return <SystemMessage message={item} conversationId={conversationId} />
+      }
+      return (
+        <Message
+          {...item}
+          canDeleteNonAuthoredMessages={canDeleteNonAuthoredMessages}
+          conversation_id={conversationId}
+          latestReadMessageSortKey={conversation?.latestReadMessageSortKey}
+          inReplyScreen={!!replyRootId}
+        />
+      )
+    },
+    [
+      dividerScrolledPast,
+      conversationId,
+      replyRootId,
+      canDeleteNonAuthoredMessages,
+      conversation?.latestReadMessageSortKey,
+    ]
+  )
 
   useEffect(() => {
-    if (reply_root_id) {
+    if (replyRootId) {
       navigation.setParams({
         title: replyHeaderTitle,
       })
@@ -147,7 +267,7 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
         muted,
       })
     }
-  }, [navigation, title, badges, conversation?.deleted, reply_root_id, replyHeaderTitle, muted])
+  }, [navigation, title, badges, conversation?.deleted, replyRootId, replyHeaderTitle, muted])
 
   if (!conversation || conversation.deleted) {
     return (
@@ -178,53 +298,32 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
             inverted
             ref={listRef}
             contentContainerStyle={styles.listContainer}
-            refreshing={isRefetching}
-            onRefresh={refetch}
-            data={messagesWithSeparators}
-            keyExtractor={item => item.id}
-            onScroll={trackScroll}
-            scrollEventThrottle={10}
-            renderItem={({ item }) => {
-              if (item.type === 'DateSeparator') {
-                return <InlineDateSeparator {...item} />
-              }
-
-              if (item.type === 'ReplyShadowMessage') {
-                return (
-                  <ReplyShadowMessage
-                    {...item}
-                    conversation_id={conversation_id}
-                    inReplyScreen={!!reply_root_id}
-                  />
-                )
-              }
-
-              if (isSystemMessage(item)) {
-                return <SystemMessage message={item} conversationId={conversation_id} />
-              }
-
-              return (
-                <Message
-                  {...item}
-                  canDeleteNonAuthoredMessages={canDeleteNonAuthoredMessages}
-                  conversation_id={conversation_id}
-                  latestReadMessageSortKey={conversation?.latestReadMessageSortKey}
-                  inReplyScreen={!!reply_root_id}
-                />
-              )
-            }}
+            maintainVisibleContentPosition={maintainVisibleContentPosition}
+            data={items}
+            keyExtractor={extractItemKey}
+            onScroll={onScroll}
+            onScrollBeginDrag={onScrollBeginDrag}
+            scrollEventThrottle={64}
+            viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs}
+            onContentSizeChange={onContentSizeChange}
+            onScrollToIndexFailed={onScrollToIndexFailed}
+            renderItem={renderItem}
             onEndReached={() => fetchOlderMessages()}
-            ListHeaderComponent={<View style={styles.listHeader} />}
+            ListHeaderComponent={listHeader}
           />
         )}
-        <JumpToBottomButton onPress={handleReturnToBottom} visible={showJumpToBottomButton} />
+        <JumpToBottomButton
+          onPress={handleJumpToBottom}
+          visible={showJumpToBottomButton}
+          loading={isJumpingToBottom}
+        />
         {!noMessages && <TypingIndicator />}
         {showLeaderDisabledReplyBanner && <LeaderMessagesDisabledBanner />}
         {canReply ? (
           <MessageForm.Root
             replyRootAuthorFirstName={replyRootAuthorFirstName}
             conversation={conversation}
-            replyRootId={reply_root_id}
+            replyRootId={replyRootId}
             currentlyEditingMessage={currentlyEditingMessage}
             // We use a separate key so that it remounts component when switching between new
             // and edit message. This simplifies internal state handling.
@@ -379,6 +478,10 @@ const useStyles = () => {
       // Just whitespace to provide space where the typing indicator can be
       height: 16,
     },
+    loadingFooter: {
+      paddingVertical: 12,
+      alignItems: 'center',
+    },
   })
 }
 

package/src/screens/group_notification_settings_screen.tsx

@@ -41,12 +41,14 @@ export function GroupNotificationSettingsScreen({ route }: GroupNotificationSett
     <View style={styles.container}>
       <View style={styles.sectionOuter}>
         <View style={styles.sectionInner}>
-          <Heading variant="h3" style={styles.sectionHeading}>
+          <Heading variant="h2" style={styles.sectionHeading}>
             Group notification settings
           </Heading>
           <Text variant="tertiary" style={styles.sectionSubtitle}>
             The settings are applied to all conversations in{' '}
-            <Text style={styles.groupNameBold}>{group.name || title}</Text>
+            <Text variant="tertiary" style={styles.groupNameBold}>
+              {group.name || title}
+            </Text>
           </Text>
         </View>
       </View>
@@ -98,10 +100,11 @@ const useStyles = () => {
       borderBottomColor: colors.borderColorDefaultBase,
     },
     sectionHeading: {
-      paddingBottom: 4,
+      paddingBottom: 12,
     },
     sectionSubtitle: {
       color: colors.textColorDefaultSecondary,
+      paddingBottom: 2,
     },
     groupNameBold: {
       fontWeight: platformFontWeightBold,