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

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/utils/__tests__/group_messages.test.ts

@@ -124,6 +124,77 @@ describe('groupMessages — nextRendersAuthor mirrors the newer enriched neighbo
   })
 })
 
+describe('groupMessages — unread divider', () => {
+  it('inserts the divider between the read and unread boundary when jumpToUnreadActive', () => {
+    const messages = [
+      message('04', { createdAt: '2026-01-01T00:04:00Z' }),
+      message('03', { createdAt: '2026-01-01T00:03:00Z' }),
+      message('02', { createdAt: '2026-01-01T00:02:00Z' }),
+      message('01', { createdAt: '2026-01-01T00:01:00Z' }),
+    ]
+
+    const enriched = groupMessages({
+      ms: messages,
+      jumpToUnreadActive: true,
+      initialMessageId: '02',
+    })
+
+    const dividerIdx = enriched.findIndex(item => 'type' in item && item.type === 'UnreadDivider')
+    const msg03Idx = enriched.findIndex(
+      item => 'id' in item && item.id === '03' && !('type' in item && item.type !== 'Message')
+    )
+    const msg02Idx = enriched.findIndex(
+      item => 'id' in item && item.id === '02' && !('type' in item && item.type !== 'Message')
+    )
+
+    expect(dividerIdx).toBeGreaterThan(msg03Idx)
+    expect(dividerIdx).toBeLessThan(msg02Idx)
+  })
+
+  it('does not insert the divider when jumpToUnreadActive is false', () => {
+    const enriched = groupMessages({
+      ms: [message('02'), message('01')],
+      jumpToUnreadActive: false,
+      initialMessageId: '01',
+    })
+
+    expect(enriched.some(item => 'type' in item && item.type === 'UnreadDivider')).toBe(false)
+  })
+
+  it('does not insert the divider when no message crosses the boundary', () => {
+    const enriched = groupMessages({
+      ms: [message('05'), message('04'), message('03')],
+      jumpToUnreadActive: true,
+      initialMessageId: '02',
+    })
+
+    expect(enriched.some(item => 'type' in item && item.type === 'UnreadDivider')).toBe(false)
+  })
+
+  it('orders ULID-style ids consistently with backend sort_key comparisons', () => {
+    const enriched = groupMessages({
+      ms: [
+        message('01KQSTAY189PHCJBT8T13R9VMP'),
+        message('01KQST9HZAB10K3CXR7TYN2QWE'),
+        message('01KQST73KZRPXNRDA7TYN19KXQ'),
+        message('01KQST5JKZRPXNRDA7TYN19ABC'),
+      ],
+      jumpToUnreadActive: true,
+      initialMessageId: '01KQST73KZRPXNRDA7TYN19KXQ',
+    })
+
+    const dividerIdx = enriched.findIndex(item => 'type' in item && item.type === 'UnreadDivider')
+    const newerIdx = enriched.findIndex(
+      item =>
+        'id' in item &&
+        item.id === '01KQST9HZAB10K3CXR7TYN2QWE' &&
+        !('type' in item && item.type !== 'Message')
+    )
+
+    expect(dividerIdx).toBeGreaterThan(newerIdx)
+  })
+})
+
 describe('groupMessages — system messages', () => {
   it('flags lastInGroup true and renderAuthor false on system messages', () => {
     const messages = [

package/src/utils/__tests__/highest_seen_tracker.test.ts

@@ -0,0 +1,82 @@
+import { makeHighestSeenTracker } from '../highest_seen_tracker'
+
+describe('makeHighestSeenTracker', () => {
+  beforeEach(() => {
+    jest.useFakeTimers()
+  })
+
+  afterEach(() => {
+    jest.useRealTimers()
+  })
+
+  it('debounces and sends the highest sort key seen so far', () => {
+    const send = jest.fn()
+    const tracker = makeHighestSeenTracker(42, send, 2000)
+
+    tracker.onSeen('10')
+    tracker.onSeen('15')
+    tracker.onSeen('12')
+
+    expect(send).not.toHaveBeenCalled()
+    jest.advanceTimersByTime(2000)
+
+    expect(send).toHaveBeenCalledWith({ conversationId: 42, sortKey: '15' })
+    expect(send).toHaveBeenCalledTimes(1)
+  })
+
+  it('ignores sort keys that are not strictly greater than the current highest', () => {
+    const send = jest.fn()
+    const tracker = makeHighestSeenTracker(1, send, 1000)
+
+    tracker.onSeen('20')
+    tracker.onSeen('20')
+    tracker.onSeen('19')
+    jest.advanceTimersByTime(1000)
+
+    expect(send).toHaveBeenCalledTimes(1)
+    expect(send).toHaveBeenCalledWith({ conversationId: 1, sortKey: '20' })
+  })
+
+  it('does not re-send the same sort key on subsequent flushes', () => {
+    const send = jest.fn()
+    const tracker = makeHighestSeenTracker(1, send, 1000)
+
+    tracker.onSeen('5')
+    jest.advanceTimersByTime(1000)
+    tracker.flushNow()
+
+    expect(send).toHaveBeenCalledTimes(1)
+  })
+
+  it('flushNow fires immediately without waiting for the debounce', () => {
+    const send = jest.fn()
+    const tracker = makeHighestSeenTracker(1, send, 5000)
+
+    tracker.onSeen('3')
+    tracker.flushNow()
+
+    expect(send).toHaveBeenCalledWith({ conversationId: 1, sortKey: '3' })
+  })
+
+  it('cancel prevents a pending fire', () => {
+    const send = jest.fn()
+    const tracker = makeHighestSeenTracker(1, send, 1000)
+
+    tracker.onSeen('7')
+    tracker.cancel()
+    jest.advanceTimersByTime(1000)
+
+    expect(send).not.toHaveBeenCalled()
+  })
+
+  it('orders fixed-width sort keys via lexicographic comparison', () => {
+    const send = jest.fn()
+    const tracker = makeHighestSeenTracker(1, send, 100)
+
+    tracker.onSeen('09')
+    tracker.onSeen('10')
+    jest.advanceTimersByTime(100)
+
+    expect(send).toHaveBeenCalledWith({ conversationId: 1, sortKey: '10' })
+  })
+})

package/src/utils/__tests__/message_viewability.test.ts

@@ -0,0 +1,168 @@
+import {
+  detectDividerExitTowardNewer,
+  reportViewableMessages,
+  type ViewabilityEvent,
+} from '../message_viewability'
+
+type Msg = { id: string; type: 'Message' }
+
+const event = (overrides: Partial<ViewabilityEvent<Msg>> = {}): ViewabilityEvent<Msg> => ({
+  viewableItems: [],
+  changed: [],
+  userHasScrolled: true,
+  ...overrides,
+})
+
+describe('reportViewableMessages', () => {
+  it('fires onMessageSeen for every viewable Message item by id', () => {
+    const onSeen = jest.fn()
+    const observer = reportViewableMessages<Msg>(onSeen)
+
+    observer(
+      event({
+        viewableItems: [
+          { key: '10', isViewable: true, item: { id: '10', type: 'Message' } },
+          { key: '11', isViewable: true, item: { id: '11', type: 'Message' } },
+        ],
+      })
+    )
+
+    expect(onSeen).toHaveBeenCalledTimes(2)
+    expect(onSeen).toHaveBeenNthCalledWith(1, '10')
+    expect(onSeen).toHaveBeenNthCalledWith(2, '11')
+  })
+
+  it('skips non-Message items (dividers, separators, shadows)', () => {
+    const onSeen = jest.fn()
+    const observer = reportViewableMessages<{ id?: string; type?: string }>(onSeen)
+
+    observer(
+      event({
+        viewableItems: [
+          { key: 'divider', isViewable: true, item: { id: 'divider', type: 'UnreadDivider' } },
+          {
+            key: 'day-divider-05',
+            isViewable: true,
+            item: { id: 'day-divider-05', type: 'DateSeparator' },
+          },
+          { key: '5', isViewable: true, item: { id: '5', type: 'Message' } },
+        ],
+      })
+    )
+
+    expect(onSeen).toHaveBeenCalledTimes(1)
+    expect(onSeen).toHaveBeenCalledWith('5')
+  })
+
+  it('does not fire before the user has scrolled', () => {
+    const onSeen = jest.fn()
+    const observer = reportViewableMessages<Msg>(onSeen)
+
+    observer(
+      event({
+        userHasScrolled: false,
+        viewableItems: [{ key: '10', isViewable: true, item: { id: '10', type: 'Message' } }],
+      })
+    )
+
+    expect(onSeen).not.toHaveBeenCalled()
+  })
+})
+
+describe('detectDividerExitTowardNewer', () => {
+  const baseArgs = { dividerKey: 'unread-divider', initialMessageId: '050' }
+
+  it('fires onExited when the divider leaves and only newer messages remain visible', () => {
+    const onExited = jest.fn()
+    const observer = detectDividerExitTowardNewer<{ id: string; type?: string }>({
+      ...baseArgs,
+      onExited,
+    })
+
+    observer(
+      event({
+        changed: [
+          {
+            key: 'unread-divider',
+            isViewable: false,
+            item: { id: 'unread-divider', type: 'UnreadDivider' },
+          },
+        ],
+        viewableItems: [
+          { key: '055', isViewable: true, item: { id: '055', type: 'Message' } },
+          { key: '056', isViewable: true, item: { id: '056', type: 'Message' } },
+        ],
+      })
+    )
+
+    expect(onExited).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not fire when divider leaves toward older messages', () => {
+    const onExited = jest.fn()
+    const observer = detectDividerExitTowardNewer<{ id: string; type?: string }>({
+      ...baseArgs,
+      onExited,
+    })
+
+    observer(
+      event({
+        changed: [
+          {
+            key: 'unread-divider',
+            isViewable: false,
+            item: { id: 'unread-divider', type: 'UnreadDivider' },
+          },
+        ],
+        viewableItems: [
+          { key: '045', isViewable: true, item: { id: '045', type: 'Message' } },
+          { key: '048', isViewable: true, item: { id: '048', type: 'Message' } },
+        ],
+      })
+    )
+
+    expect(onExited).not.toHaveBeenCalled()
+  })
+
+  it('does not fire before the user has scrolled', () => {
+    const onExited = jest.fn()
+    const observer = detectDividerExitTowardNewer<{ id: string; type?: string }>({
+      ...baseArgs,
+      onExited,
+    })
+
+    observer(
+      event({
+        userHasScrolled: false,
+        changed: [
+          {
+            key: 'unread-divider',
+            isViewable: false,
+            item: { id: 'unread-divider', type: 'UnreadDivider' },
+          },
+        ],
+        viewableItems: [{ key: '055', isViewable: true, item: { id: '055', type: 'Message' } }],
+      })
+    )
+
+    expect(onExited).not.toHaveBeenCalled()
+  })
+
+  it('no-ops when initialMessageId is null (observer is always installed)', () => {
+    const onExited = jest.fn()
+    const observer = detectDividerExitTowardNewer<{ id: string; type?: string }>({
+      dividerKey: 'unread-divider',
+      initialMessageId: null,
+      onExited,
+    })
+
+    observer(
+      event({
+        changed: [{ key: 'unread-divider', isViewable: false, item: { id: 'unread-divider' } }],
+        viewableItems: [{ key: '055', isViewable: true, item: { id: '055' } }],
+      })
+    )
+
+    expect(onExited).not.toHaveBeenCalled()
+  })
+})