@planningcenter/chat-react-native 4.2.0 → 4.2.1-qa-staging.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "4.2.0",
+  "version": "4.2.1-qa-staging.1",
   "description": "",
   "repository": {
     "type": "git",
@@ -33,7 +33,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^7.2.0",
     "@fortawesome/react-native-fontawesome": "^0.3.2",
-    "@planningcenter/emoji-keyboard": "4.0.0",
+    "@planningcenter/emoji-keyboard": "4.2.1-qa-staging.1",
     "lodash-inflection": "^1.5.0"
   },
   "peerDependencies": {
@@ -84,5 +84,5 @@
     "sf-symbols-typescript": "^2.2.0",
     "typescript": "~6.0.3"
   },
-  "gitHead": "2e954ae112b6ebef2c978d34c82bc92363d3de0c"
+  "gitHead": "09c36025b92c9616f97afc67a83b723e0662d3e8"
 }

package/src/__tests__/hooks/paginator_meta.test.ts

@@ -1,7 +1,13 @@
-import { getNextPageParamFromMeta } from '../../hooks/paginator_meta'
+import {
+  getNewerPageParam,
+  getNextPageParamFromMeta,
+  mergePageWhere,
+} from '../../hooks/paginator_meta'
+import { NextPageCursor } from '../../types/api_primitives'
+import { RequestData } from '../../utils/client'
 
 describe('getNextPageParamFromMeta', () => {
-  it.each([
+  it.each<[NextPageCursor | undefined, Partial<RequestData> | undefined]>([
     [undefined, undefined],
     [{}, undefined],
     [{ idLt: '01ABC' }, { where: { id_lt: '01ABC' } }],
@@ -9,7 +15,72 @@ describe('getNextPageParamFromMeta', () => {
     [{ idGt: '01ABC' }, { where: { id_gt: '01ABC' } }],
     [{ idGte: '01ABC' }, { where: { id_gte: '01ABC' } }],
     [{ offset: '40' }, { offset: 40 }],
+    [
+      { idLt: '01ABC', order: 'desc' },
+      { where: { id_lt: '01ABC' }, order: 'desc' },
+    ],
+    [
+      { idGt: '01ABC', order: 'asc' },
+      { where: { id_gt: '01ABC' }, order: 'asc' },
+    ],
   ])('maps %p to %p', (input, expected) => {
     expect(getNextPageParamFromMeta(input)).toEqual(expected)
   })
 })
+
+describe('getNewerPageParam', () => {
+  const page = (meta: { next?: NextPageCursor; prev?: NextPageCursor }) => ({
+    data: [],
+    links: {},
+    meta: { count: 0, totalCount: 0, ...meta },
+  })
+
+  it('follows meta.prev on the anchored page', () => {
+    const anchored = page({
+      next: { idLt: '01A', order: 'desc' },
+      prev: { idGt: '01E', order: 'asc' },
+    })
+
+    expect(getNewerPageParam(anchored, {})).toEqual({ where: { id_gt: '01E' }, order: 'asc' })
+  })
+
+  it('stops when the anchored page has no newer side', () => {
+    expect(getNewerPageParam(page({ next: { idLt: '01A', order: 'desc' } }), {})).toBeUndefined()
+  })
+
+  it('follows meta.next on an ascending page', () => {
+    const newer = page({ next: { idGt: '01H', order: 'asc' } })
+
+    expect(getNewerPageParam(newer, { order: 'asc' })).toEqual({
+      where: { id_gt: '01H' },
+      order: 'asc',
+    })
+  })
+
+  it('stops once an ascending page has no meta.next', () => {
+    expect(getNewerPageParam(page({}), { order: 'asc' })).toBeUndefined()
+  })
+})
+
+describe('mergePageWhere', () => {
+  it('lets a page cursor replace the request bound instead of stacking bounds', () => {
+    expect(mergePageWhere({ id_around: '01ANCHOR' }, { id_gt: '01NEWER' })).toEqual({
+      id_gt: '01NEWER',
+    })
+    expect(mergePageWhere({ id_around: '01ANCHOR' }, { id_lt: '01OLDER' })).toEqual({
+      id_lt: '01OLDER',
+    })
+  })
+
+  it('keeps non-cursor filters alongside the cursor', () => {
+    expect(mergePageWhere({ source_type: 'Group' }, { id_lt: '01OLDER' })).toEqual({
+      source_type: 'Group',
+      id_lt: '01OLDER',
+    })
+  })
+
+  it('leaves the request where alone when the page has no cursor', () => {
+    expect(mergePageWhere({ id_around: '01ANCHOR' }, {})).toEqual({ id_around: '01ANCHOR' })
+    expect(mergePageWhere(undefined, undefined)).toEqual({})
+  })
+})

package/src/__tests__/hooks/use_conversation_messages_jolt_events.test.ts

@@ -0,0 +1,36 @@
+import {
+  queryKeysForEvent,
+  resolveMessageCaches,
+} from '../../hooks/use_conversation_messages_jolt_events'
+
+const main = ['main']
+const threaded = ['threaded']
+
+describe('resolveMessageCaches', () => {
+  it('lets an override replace the default entry for the same key', () => {
+    const gate = { queryKey: ['main'], canUpdate: () => false }
+
+    expect(resolveMessageCaches([main, threaded], [gate])).toEqual([gate, { queryKey: threaded }])
+  })
+
+  it('appends caches that are not among the defaults', () => {
+    const extra = { queryKey: ['anchored'] }
+
+    expect(resolveMessageCaches([main], [extra])).toEqual([{ queryKey: main }, extra])
+  })
+})
+
+describe('queryKeysForEvent', () => {
+  const noInserts = { queryKey: ['anchored'], canUpdate: (e: string) => e !== 'message.created' }
+
+  it('returns every cache that accepts the event', () => {
+    expect(queryKeysForEvent('message.updated', [main], [noInserts])).toEqual([main, ['anchored']])
+  })
+
+  it('skips caches whose predicate rejects the event, including a gated default', () => {
+    const gatedMain = { queryKey: ['main'], canUpdate: (e: string) => e !== 'message.created' }
+
+    expect(queryKeysForEvent('message.created', [main], [noInserts])).toEqual([main])
+    expect(queryKeysForEvent('message.created', [main, threaded], [gatedMain])).toEqual([threaded])
+  })
+})

package/src/__tests__/hooks/use_direct_message_eligibility.test.tsx

@@ -0,0 +1,83 @@
+import { QueryClientProvider } from '@tanstack/react-query'
+import { renderHook, waitFor } from '@testing-library/react-native'
+import React from 'react'
+import { buildTestQueryClient } from '../../__utils__/query_client'
+import { useApiClient } from '../../hooks/use_api_client'
+import { useDirectMessageEligibility } from '../../hooks/use_direct_message_eligibility'
+
+jest.mock('../../hooks/use_api_client')
+
+const mockedUseApiClient = useApiClient as jest.MockedFunction<typeof useApiClient>
+const mockGet = jest.fn()
+
+beforeEach(() => {
+  mockGet.mockReset()
+  mockedUseApiClient.mockReturnValue({ chat: { get: mockGet } } as any)
+})
+
+const createWrapper = () => {
+  const queryClient = buildTestQueryClient()
+  return ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  )
+}
+
+const args = { groupId: 'Groups-Group-42', personId: 75179873 }
+
+test("reads the member's eligibility from the chat group", async () => {
+  mockGet.mockResolvedValue({
+    data: {
+      id: '75179873',
+      type: 'Member',
+      canDirectMessage: false,
+      directMessagesDisabled: true,
+    },
+  })
+
+  const { result } = renderHook(() => useDirectMessageEligibility(args), {
+    wrapper: createWrapper(),
+  })
+
+  await waitFor(() => expect(result.current.eligibility).toBeDefined())
+
+  expect(mockGet).toHaveBeenCalledWith({
+    url: '/me/groups/Groups-Group-42/members/75179873',
+    data: { fields: { Member: ['can_direct_message', 'direct_messages_disabled'] } },
+  })
+  expect(result.current.eligibility).toEqual({
+    canDirectMessage: false,
+    directMessagesDisabled: true,
+  })
+})
+
+test('has no answer until the member loads', () => {
+  mockGet.mockReturnValue(new Promise(() => {}))
+
+  const { result } = renderHook(() => useDirectMessageEligibility(args), {
+    wrapper: createWrapper(),
+  })
+
+  expect(result.current.eligibility).toBeUndefined()
+  expect(result.current.isLoading).toBe(true)
+})
+
+test('reports a failed lookup without an answer', async () => {
+  mockGet.mockRejectedValue(new Error('404'))
+
+  const { result } = renderHook(() => useDirectMessageEligibility(args), {
+    wrapper: createWrapper(),
+  })
+
+  await waitFor(() => expect(result.current.isError).toBe(true))
+
+  expect(result.current.eligibility).toBeUndefined()
+  expect(result.current.isLoading).toBe(false)
+})
+
+test('does not ask when disabled', () => {
+  renderHook(() => useDirectMessageEligibility({ ...args, enabled: false }), {
+    wrapper: createWrapper(),
+  })
+
+  expect(mockGet).not.toHaveBeenCalled()
+})

package/src/__tests__/screens/conversation_new/components/services_form.test.tsx

@@ -0,0 +1,91 @@
+import { DefaultTheme, ThemeProvider } from '@react-navigation/native'
+import { render } from '@testing-library/react-native'
+import React from 'react'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
+import { useFindOrCreateServicesConversation } from '../../../../hooks/services/use_find_or_create_services_conversation'
+import { useTeamMembersForNewConversation } from '../../../../hooks/services/use_team_members_for_new_conversation'
+import { ServicesForm } from '../../../../screens/conversation_new/components/services_form'
+
+jest.mock('react-native-reanimated', () => ({
+  ...jest.requireActual('react-native-reanimated/mock'),
+  LayoutAnimationConfig: ({ children }: { children: React.ReactNode }) => children,
+}))
+jest.mock('@react-navigation/native', () => ({
+  ...jest.requireActual('@react-navigation/native'),
+  useNavigation: () => ({ navigate: jest.fn(), dispatch: jest.fn(), getParent: () => undefined }),
+}))
+jest.mock('../../../../hooks/use_api_client', () => ({ useApiClient: () => ({}) }))
+jest.mock('../../../../hooks/use_upload_client', () => ({ useUploadClient: () => ({}) }))
+jest.mock('../../../../hooks/use_features', () => ({
+  ...jest.requireActual('../../../../hooks/use_features'),
+  useFeatures: () => ({ features: [], featureEnabled: () => false }),
+}))
+jest.mock('../../../../hooks/use_conversation_validate', () => ({
+  useConversationValidate: () => ({ warnings: [], validationPending: false }),
+}))
+jest.mock('../../../../hooks/services/use_services_chat_conversation_payload', () => ({
+  useServicesChatConversationPayload: () => ({ payload: undefined, isLoading: false }),
+}))
+jest.mock('../../../../hooks/services/use_services_team', () => ({
+  useServicesTeams: () => [],
+}))
+jest.mock('../../../../hooks/services/use_team_plans', () => ({
+  useTeamPlans: () => ({
+    planOptions: [],
+    isFetching: false,
+    isError: false,
+    findPlan: () => undefined,
+  }),
+}))
+jest.mock('../../../../hooks/services/use_team_members_for_new_conversation', () => ({
+  useTeamMembersForNewConversation: jest.fn(() => ({ members: [], isError: false })),
+}))
+jest.mock('../../../../hooks/services/use_find_or_create_services_conversation', () => ({
+  useFindOrCreateServicesConversation: jest.fn(() => ({
+    mutate: jest.fn(),
+    isPending: false,
+    selectionHasConversation: false,
+    isLoadingConversationCheck: false,
+  })),
+}))
+
+const mockedFindOrCreate = jest.mocked(useFindOrCreateServicesConversation)
+const mockedTeamMembers = jest.mocked(useTeamMembersForNewConversation)
+
+const latestArgs = <T extends jest.Mock>(mock: T) => mock.mock.calls.at(-1)?.[0]
+
+const safeAreaMetrics = {
+  frame: { x: 0, y: 0, width: 390, height: 844 },
+  insets: { top: 0, right: 0, bottom: 0, left: 0 },
+}
+
+const renderForm = (props: { initialPlanId?: number } = {}) =>
+  render(
+    <SafeAreaProvider initialMetrics={safeAreaMetrics}>
+      <ThemeProvider value={DefaultTheme}>
+        <ServicesForm initialTeamIds={[1, 2]} {...props} />
+      </ThemeProvider>
+    </SafeAreaProvider>
+  )
+
+describe('ServicesForm', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('filters by plan when opened from a plan', () => {
+    const { getByRole } = renderForm({ initialPlanId: 42 })
+
+    expect(getByRole('switch').props.value).toBe(true)
+    expect(latestArgs(mockedFindOrCreate)).toMatchObject({ teamIds: [1, 2], planId: 42 })
+    expect(latestArgs(mockedTeamMembers)).toMatchObject({ teamIds: [1, 2], planId: 42 })
+  })
+
+  it('does not filter by plan when opened without a plan', () => {
+    const { getByRole } = renderForm()
+
+    expect(getByRole('switch').props.value).toBe(false)
+    expect(latestArgs(mockedFindOrCreate)).toMatchObject({ teamIds: [1, 2], planId: undefined })
+    expect(latestArgs(mockedTeamMembers)).toMatchObject({ teamIds: [1, 2], planId: undefined })
+  })
+})

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

@@ -0,0 +1,26 @@
+import { gatedMessageCache } from '../../utils/gated_message_cache'
+
+describe('gatedMessageCache', () => {
+  const queryKey = ['messages']
+
+  it('keeps new messages out while they are not accepted and reports the skip', () => {
+    const onSkippedNewMessage = jest.fn()
+    const cache = gatedMessageCache({ queryKey, acceptNewMessages: false, onSkippedNewMessage })
+
+    expect(cache.queryKey).toBe(queryKey)
+    expect(cache.canUpdate?.('message.created')).toBe(false)
+    expect(onSkippedNewMessage).toHaveBeenCalledTimes(1)
+    expect(cache.canUpdate?.('message.updated')).toBe(true)
+    expect(cache.canUpdate?.('message.destroyed')).toBe(true)
+    expect(cache.canUpdate?.('reaction')).toBe(true)
+    expect(onSkippedNewMessage).toHaveBeenCalledTimes(1)
+  })
+
+  it('lets new messages in once they are accepted', () => {
+    const onSkippedNewMessage = jest.fn()
+    const cache = gatedMessageCache({ queryKey, acceptNewMessages: true, onSkippedNewMessage })
+
+    expect(cache.canUpdate?.('message.created')).toBe(true)
+    expect(onSkippedNewMessage).not.toHaveBeenCalled()
+  })
+})

package/src/__tests__/utils/request/get_messages.test.ts

@@ -0,0 +1,24 @@
+import { getMessagesQueryKey, getMessagesRequestArgs } from '../../../utils/request/get_messages'
+
+describe('getMessagesRequestArgs', () => {
+  it('requests the newest page by default', () => {
+    const { data } = getMessagesRequestArgs({ conversation_id: 1 })
+
+    expect(data).not.toHaveProperty('where')
+    expect(data).not.toHaveProperty('order')
+  })
+
+  it('opens around the anchor when one is given', () => {
+    const { data } = getMessagesRequestArgs({ conversation_id: 1, anchor: '01ANCHOR' })
+
+    expect(data).toMatchObject({ where: { id_around: '01ANCHOR' } })
+    expect(data).not.toHaveProperty('order')
+  })
+
+  it('keeps anchored and live queries in separate cache entries', () => {
+    const live = getMessagesQueryKey({ conversation_id: 1 })
+    const anchored = getMessagesQueryKey({ conversation_id: 1, anchor: '01ANCHOR' })
+
+    expect(anchored).not.toEqual(live)
+  })
+})

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

@@ -0,0 +1,15 @@
+import { generatePlaceholderUlid } from '../../utils/generate_placeholder_ulid'
+import { decodeUlidTime } from '../../utils/ulid'
+
+describe('decodeUlidTime', () => {
+  it('decodes the spec example', () => {
+    expect(decodeUlidTime('01ARYZ6S41TSV4RRFFQ69G5FAV')).toBe(1469918176385)
+  })
+
+  it('round-trips a placeholder ulid', () => {
+    const now = Date.now()
+    jest.spyOn(Date, 'now').mockReturnValue(now)
+
+    expect(decodeUlidTime(generatePlaceholderUlid())).toBe(now)
+  })
+})

package/src/components/conversation/__tests__/anchor_not_found_boundary.test.tsx

@@ -0,0 +1,51 @@
+import { render, screen } from '@testing-library/react-native'
+import React from 'react'
+import { Text } from 'react-native'
+import { FailedResponse } from '../../../types/api_primitives'
+import { ResponseError } from '../../../utils/response_error'
+import { AnchorNotFoundBoundary } from '../anchor_not_found_boundary'
+
+const responseError = (status: number) =>
+  new ResponseError({ status, statusText: 'nope' } as unknown as FailedResponse)
+
+function Thrower({ error }: { error: Error | null }) {
+  if (error) throw error
+  return <Text>content</Text>
+}
+
+describe('AnchorNotFoundBoundary', () => {
+  beforeEach(() => jest.spyOn(console, 'error').mockImplementation(() => {}))
+
+  it('reports a missing anchor and renders nothing while the parent drops it', () => {
+    const onAnchorNotFound = jest.fn()
+
+    render(
+      <AnchorNotFoundBoundary onAnchorNotFound={onAnchorNotFound}>
+        <Thrower error={responseError(404)} />
+      </AnchorNotFoundBoundary>
+    )
+
+    expect(onAnchorNotFound).toHaveBeenCalledTimes(1)
+    expect(screen.queryByText('content')).toBeNull()
+  })
+
+  it('lets every other error through untouched', () => {
+    const onAnchorNotFound = jest.fn()
+
+    expect(() =>
+      render(
+        <AnchorNotFoundBoundary onAnchorNotFound={onAnchorNotFound}>
+          <Thrower error={responseError(403)} />
+        </AnchorNotFoundBoundary>
+      )
+    ).toThrow()
+    expect(() =>
+      render(
+        <AnchorNotFoundBoundary onAnchorNotFound={onAnchorNotFound}>
+          <Thrower error={new Error('render blew up')} />
+        </AnchorNotFoundBoundary>
+      )
+    ).toThrow('render blew up')
+    expect(onAnchorNotFound).not.toHaveBeenCalled()
+  })
+})

package/src/components/conversation/__tests__/message_list.test.tsx

@@ -104,6 +104,7 @@ let queryClient: QueryClient
 
 // A top-level rerender would rebuild the wrapper context and redraw every row.
 let setHarnessConversation: (next: ConversationResource) => void = () => {}
+let harnessAnchorMessageId: string | null = null
 
 function Harness() {
   const [current, setCurrent] = React.useState(conversation)
@@ -117,6 +118,7 @@ function Harness() {
       conversation={current}
       conversationId={CONVERSATION_ID}
       messages={loaded}
+      anchorMessageId={harnessAnchorMessageId}
       hasNextPage
       onEndReached={() => {}}
     />
@@ -176,9 +178,49 @@ beforeEach(() => {
 afterEach(() => {
   queryClient.clear()
   jest.clearAllMocks()
+  harnessAnchorMessageId = null
 })
 
 describe('MessageList', () => {
+  it('pins the anchor row to the bottom edge as content lays out, until the user drags', () => {
+    const scrollToIndex = jest.spyOn(FlatList.prototype, 'scrollToIndex').mockImplementation()
+    harnessAnchorMessageId = messages[3].id
+    renderList()
+    const list = screen.UNSAFE_getByType(FlatList)
+    const anchorIndex = list.props.data.findIndex(
+      (item: { id: string }) => item.id === messages[3].id
+    )
+
+    act(() => list.props.onLayout({ nativeEvent: { layout: { height: 600 } } }))
+    act(() => list.props.onContentSizeChange(0, 400))
+    expect(scrollToIndex).not.toHaveBeenCalled()
+
+    act(() => list.props.onContentSizeChange(0, 1000))
+    act(() => list.props.onContentSizeChange(0, 2000))
+    expect(anchorIndex).toBeGreaterThan(0)
+    expect(scrollToIndex).toHaveBeenCalledTimes(2)
+    expect(scrollToIndex).toHaveBeenLastCalledWith({
+      index: anchorIndex,
+      viewPosition: 0,
+      animated: false,
+    })
+
+    act(() => list.props.onScrollBeginDrag({ nativeEvent: {} }))
+    act(() => list.props.onContentSizeChange(0, 3000))
+    expect(scrollToIndex).toHaveBeenCalledTimes(2)
+  })
+
+  it('leaves the offset alone when there is no anchor', () => {
+    const scrollToIndex = jest.spyOn(FlatList.prototype, 'scrollToIndex').mockImplementation()
+    renderList()
+    const list = screen.UNSAFE_getByType(FlatList)
+
+    act(() => list.props.onLayout({ nativeEvent: { layout: { height: 600 } } }))
+    act(() => list.props.onContentSizeChange(0, 1000))
+
+    expect(scrollToIndex).not.toHaveBeenCalled()
+  })
+
   it('redraws only the reacted row when a reaction arrives', () => {
     renderList()
     const target = messages[3]

package/src/components/conversation/anchor_not_found_boundary.tsx

@@ -0,0 +1,21 @@
+import React, { PropsWithChildren } from 'react'
+import { ResponseError } from '../../utils/response_error'
+
+type Props = PropsWithChildren<{ onAnchorNotFound: () => void }>
+
+export class AnchorNotFoundBoundary extends React.Component<Props, { recovering: boolean }> {
+  state = { recovering: false }
+
+  static getDerivedStateFromError(error: Error) {
+    if (error instanceof ResponseError && error.status === 404) return { recovering: true }
+    throw error
+  }
+
+  componentDidCatch() {
+    this.props.onAnchorNotFound()
+  }
+
+  render() {
+    return this.state.recovering ? null : this.props.children
+  }
+}

package/src/components/conversation/message_form.tsx

@@ -71,6 +71,7 @@ interface MessagesFormRootProps extends ViewProps {
   replyRootId?: string | null
   replyRootAuthorFirstName?: string | null
   onFlaggedInMessageForm?: (id: string) => void
+  onBeforeSubmit?: () => void
 }
 
 const MessageFormContext = React.createContext<{
@@ -113,6 +114,7 @@ function MessageFormRoot({
   replyRootId,
   replyRootAuthorFirstName,
   onFlaggedInMessageForm,
+  onBeforeSubmit,
 }: MessagesFormRootProps) {
   const { giphyApiKey } = useContext(ChatContext)
   const canGiphy = !!giphyApiKey && !currentlyEditingMessage
@@ -227,6 +229,8 @@ function MessageFormRoot({
   const handleSubmit = () => {
     if (!canSubmit) return
 
+    onBeforeSubmit?.()
+
     if (canGiphy && usingGiphy) {
       TextInput.State.blurTextInput(TextInput.State.currentlyFocusedInput())
       Haptic.impactLight()

package/src/components/conversation/message_list.tsx

@@ -1,5 +1,6 @@
 import { date as formatDate } from '@planningcenter/datetime-fmt'
-import React, { RefObject } from 'react'
+import { noop } from 'lodash'
+import React, { RefObject, useRef } from 'react'
 import { FlatList, FlatListProps, StyleSheet, View } from 'react-native'
 import { useTheme } from '../../hooks'
 import { ConversationResource } from '../../types/resources/conversation'
@@ -16,7 +17,15 @@ import { SystemMessage } from './system_message'
 
 type ScrollHandlers = Pick<
   FlatListProps<EnrichedMessage>,
-  'onScroll' | 'onLayout' | 'onContentSizeChange' | 'onScrollEndDrag' | 'onMomentumScrollEnd'
+  | 'onScroll'
+  | 'onLayout'
+  | 'onContentSizeChange'
+  | 'onScrollEndDrag'
+  | 'onMomentumScrollEnd'
+  | 'onScrollBeginDrag'
+  | 'onStartReached'
+  | 'onStartReachedThreshold'
+  | 'maintainVisibleContentPosition'
 >
 
 interface MessageListProps extends ScrollHandlers {
@@ -25,6 +34,7 @@ interface MessageListProps extends ScrollHandlers {
   conversationId: number
   messages: MessageResource[]
   replyRootId?: string | null
+  anchorMessageId?: string | null
   hasNextPage: boolean
   onEndReached: () => void
 }
@@ -38,6 +48,7 @@ export function MessageList({
   conversationId,
   messages,
   replyRootId,
+  anchorMessageId,
   hasNextPage,
   onEndReached,
   onScroll,
@@ -45,6 +56,10 @@ export function MessageList({
   onContentSizeChange,
   onScrollEndDrag,
   onMomentumScrollEnd,
+  onScrollBeginDrag,
+  onStartReached,
+  onStartReachedThreshold,
+  maintainVisibleContentPosition,
 }: MessageListProps) {
   const styles = useStyles()
   const inReplyScreen = !!replyRootId
@@ -52,6 +67,40 @@ export function MessageList({
     conversation.memberAbility?.canDeleteNonAuthoredMessages ?? false
   const latestRead = conversation.latestReadMessageSortKey
   const messagesWithSeparators = groupMessages({ ms: messages, inReplyScreen })
+  const anchorIndex = anchorMessageId
+    ? messagesWithSeparators.findIndex(item => item.id === anchorMessageId)
+    : -1
+  const layoutHeight = useRef(0)
+  const contentHeight = useRef(0)
+  const userHasScrolled = useRef(false)
+
+  const pinAnchorToBottomEdge = () => {
+    if (anchorIndex < 0 || userHasScrolled.current) return
+    const scrollable = layoutHeight.current > 0 && contentHeight.current > layoutHeight.current
+    if (!scrollable) return
+
+    listRef.current?.scrollToIndex({ index: anchorIndex, viewPosition: 0, animated: false })
+  }
+
+  const handleLayout: FlatListProps<EnrichedMessage>['onLayout'] = event => {
+    onLayout?.(event)
+    layoutHeight.current = event.nativeEvent.layout.height
+    pinAnchorToBottomEdge()
+  }
+
+  const handleContentSizeChange: FlatListProps<EnrichedMessage>['onContentSizeChange'] = (
+    width,
+    height
+  ) => {
+    onContentSizeChange?.(width, height)
+    contentHeight.current = height
+    pinAnchorToBottomEdge()
+  }
+
+  const handleScrollBeginDrag: FlatListProps<EnrichedMessage>['onScrollBeginDrag'] = event => {
+    userHasScrolled.current = true
+    onScrollBeginDrag?.(event)
+  }
 
   return (
     <FlatList
@@ -61,8 +110,9 @@ export function MessageList({
       data={messagesWithSeparators}
       keyExtractor={item => item.id}
       onScroll={onScroll}
-      onLayout={onLayout}
-      onContentSizeChange={onContentSizeChange}
+      onLayout={handleLayout}
+      onContentSizeChange={handleContentSizeChange}
+      onScrollToIndexFailed={noop}
       onScrollEndDrag={onScrollEndDrag}
       onMomentumScrollEnd={onMomentumScrollEnd}
       scrollEventThrottle={10}
@@ -102,6 +152,10 @@ export function MessageList({
         )
       }}
       onEndReached={onEndReached}
+      onScrollBeginDrag={handleScrollBeginDrag}
+      onStartReached={onStartReached}
+      onStartReachedThreshold={onStartReachedThreshold}
+      maintainVisibleContentPosition={maintainVisibleContentPosition}
       ListHeaderComponent={<View style={styles.listHeader} />}
     />
   )

package/src/hooks/index.ts

@@ -8,6 +8,7 @@ export * from './use_chat_permissions'
 export * from './use_create_android_ripple_color'
 export * from './use_current_person'
 export * from './use_deleting_ids'
+export * from './use_direct_message_eligibility'
 export * from './use_direct_messages_eligible'
 export * from './use_font_scale'
 export * from './use_has_direct_messages'