@planningcenter/chat-react-native 4.3.0 → 4.3.1-qa-989.0

package/src/components/conversation/message_list.tsx

@@ -1,6 +1,6 @@
 import { date as formatDate } from '@planningcenter/datetime-fmt'
 import { noop } from 'lodash'
-import React, { RefObject, useRef } from 'react'
+import React, { RefObject, useCallback, useEffect, useRef, useState } from 'react'
 import { FlatList, FlatListProps, StyleSheet, View } from 'react-native'
 import { useTheme } from '../../hooks'
 import { ConversationResource } from '../../types/resources/conversation'
@@ -45,6 +45,7 @@ interface MessageListProps extends ScrollHandlers {
 }
 
 const ANCHOR_CLEARS_JUMP_BUTTON = 56
+const ANCHOR_VIEWABILITY = { itemVisiblePercentThreshold: 50 }
 
 /** MessageList
  * The inverted list of messages, reply previews, and date separators for a conversation
@@ -80,6 +81,13 @@ export function MessageList({
   const contentHeight = useRef(0)
   const userHasScrolled = useRef(false)
   const draggedSinceStartReached = useRef(false)
+  const latestAnchorMessageId = useRef(anchorMessageId)
+  const flashedAnchorId = useRef<string | null>(null)
+  const [highlightedMessageId, setHighlightedMessageId] = useState<string | null>(null)
+
+  useEffect(() => {
+    latestAnchorMessageId.current = anchorMessageId
+  }, [anchorMessageId])
 
   // Row heights keep settling after the first layout (images, attachments), so we
   // re-pin on every layout pass until the reader takes over with a drag.
@@ -119,6 +127,19 @@ export function MessageList({
     onScrollBeginDrag?.(event)
   }
 
+  const flashAnchorOnceViewable: FlatListProps<EnrichedMessage>['onViewableItemsChanged'] = ({
+    viewableItems,
+  }) => {
+    const anchorId = latestAnchorMessageId.current
+    if (!anchorId || anchorId === flashedAnchorId.current) return
+    if (!viewableItems.some(token => token.item.id === anchorId)) return
+
+    flashedAnchorId.current = anchorId
+    setHighlightedMessageId(anchorId)
+  }
+
+  const clearHighlight = useCallback(() => setHighlightedMessageId(null), [])
+
   // VirtualizedList re-checks its edges on every content size change using a JS offset
   // the native hold never updates, so without this each merged page re-fires it.
   const handleStartReached = () => {
@@ -143,6 +164,8 @@ export function MessageList({
       onScrollToIndexFailed={noop}
       onScrollEndDrag={onScrollEndDrag}
       onMomentumScrollEnd={onMomentumScrollEnd}
+      onViewableItemsChanged={flashAnchorOnceViewable}
+      viewabilityConfig={ANCHOR_VIEWABILITY}
       scrollEventThrottle={10}
       maintainVisibleContentPosition={behind ? HOLD_ONLY : HOLD_AND_FOLLOW}
       ListFooterComponent={
@@ -181,6 +204,8 @@ export function MessageList({
             conversation_id={conversationId}
             readByOthers={readByOthers}
             inReplyScreen={inReplyScreen}
+            highlighted={item.id === highlightedMessageId}
+            onHighlightShown={clearHighlight}
           />
         )
       }}

package/src/components/conversation/system_message.tsx

@@ -21,7 +21,7 @@ export function SystemMessage({ message, conversationId }: SystemMessageProps) {
   const navigation = useNavigation()
   const { colors } = useTheme()
   const text = systemMessageText(names, overflowCount, action)
-  const hasPeople = personIdsForSystemEvent.length > 0
+  const isTruncated = overflowCount > 0
   const hasReactions = reactionCounts.length > 0
   const { animatedBackgroundColor, handleMessagePressIn, handleMessagePressOut } =
     useAnimatedMessageBackgroundColor()
@@ -53,14 +53,14 @@ export function SystemMessage({ message, conversationId }: SystemMessageProps) {
 
   return (
     <Pressable
-      onPress={hasPeople ? handlePress : undefined}
+      onPress={isTruncated ? handlePress : undefined}
       onLongPress={handleLongPress}
       onPressIn={handleMessagePressIn}
       onPressOut={handleMessagePressOut}
       android_ripple={{ color: colors.androidRippleNeutral, borderless: false, foreground: true }}
       accessibilityRole="button"
       accessibilityHint={
-        hasPeople
+        isTruncated
           ? 'Tap to see people. Long press for message actions.'
           : 'Long press for message actions.'
       }

package/src/components/conversations/conversations.tsx

@@ -6,7 +6,6 @@ import { useTheme } from '../../hooks'
 import { useCanCreateConversations } from '../../hooks/use_chat_permissions'
 import { useConversationsJoltEvents } from '../../hooks/use_conversations_jolt_events'
 import { ConversationResource } from '../../types'
-import { throwResponseError } from '../../utils/response_error'
 import { ConversationPreview, ConversationPreviewSkeleton } from './conversation_preview'
 import { ConversationsBlankState } from './conversations_blank_state'
 
@@ -27,8 +26,6 @@ export const Conversations = ({ ListHeaderComponent }: ConversationsProps) => {
     refetch,
     isRefetching,
     isFetched,
-    isError,
-    error,
     args: { chat_group_graph_id, group_source_app_name },
   } = useConversationsContext()
   const navigation = useNavigation()
@@ -48,10 +45,6 @@ export const Conversations = ({ ListHeaderComponent }: ConversationsProps) => {
     }))
   }, [conversations, isLoading])
 
-  if (isError) {
-    throwResponseError(error)
-  }
-
   useConversationsJoltEvents()
 
   return (

package/src/contexts/__tests__/api_provider.test.tsx

@@ -0,0 +1,106 @@
+import { render, screen, waitFor } from '@testing-library/react-native'
+import React, { useContext, useMemo } from 'react'
+import { Text } from 'react-native'
+import { useApiGet } from '../../hooks/use_api'
+import { ApiClient, useApiClient } from '../../hooks/use_api_client'
+import { Session } from '../../utils'
+import { ApiProvider, chatQueryClient } from '../api_provider'
+import { ChatContext, ChatContextValue } from '../chat_context'
+
+jest.mock('../../hooks/use_api_client')
+
+const mockedUseApiClient = useApiClient as jest.MockedFunction<typeof useApiClient>
+
+type Deferred = { promise: Promise<unknown>; reject: (_reason: unknown) => void }
+
+const defer = (): Deferred => {
+  let reject: Deferred['reject'] = () => {}
+  const promise = new Promise((_, rej) => {
+    reject = rej
+  })
+  promise.catch(() => {})
+  return { promise, reject }
+}
+
+let get: jest.Mock
+let staleRequest: Deferred
+
+const meRequests = () =>
+  get.mock.calls.filter(([url]) => url === '/me').map(([, token]) => token as string)
+
+const Probe = () => {
+  const { status, fetchStatus, data } = useApiGet<{ type: 'Person'; id: number }>({
+    url: '/me',
+    data: { fields: { Person: ['id'] } },
+  })
+
+  return <Text>{`${status}:${fetchStatus}:${data?.id ?? ''}`}</Text>
+}
+
+const Tree = ({ accessToken }: { accessToken: string }) => {
+  const value = useMemo(() => {
+    const session = new Session({ token: { access_token: accessToken } })
+    return {
+      session,
+      token: session.token,
+      env: 'production',
+      onUnauthorizedResponse: () => {},
+    } as unknown as ChatContextValue
+  }, [accessToken])
+
+  return (
+    <ChatContext.Provider value={value}>
+      <ApiProvider>
+        <Probe />
+      </ApiProvider>
+    </ChatContext.Provider>
+  )
+}
+
+beforeAll(() => {
+  chatQueryClient.setDefaultOptions({
+    queries: { ...chatQueryClient.getDefaultOptions().queries, gcTime: 0 },
+  })
+})
+
+beforeEach(() => {
+  staleRequest = defer()
+  get = jest.fn((url: string, accessToken: string) => {
+    if (url !== '/me') return Promise.resolve({ data: [] })
+    if (accessToken === 'stale') return staleRequest.promise
+
+    return Promise.resolve({ data: { type: 'Person', id: 42 } })
+  })
+
+  mockedUseApiClient.mockImplementation(() => {
+    const { session } = useContext(ChatContext)
+    const accessToken = session.token?.access_token
+    const client = { get: ({ url }: { url: string }) => get(url, accessToken) }
+
+    return {
+      chat: client,
+      groups: client,
+      services: client,
+      people: client,
+    } as unknown as ApiClient
+  })
+})
+
+afterEach(() => {
+  chatQueryClient.clear()
+  jest.clearAllMocks()
+})
+
+describe('ApiProvider on access token change', () => {
+  it('restarts in-flight requests with the new token and ignores the stale result', async () => {
+    const { rerender } = render(<Tree accessToken="stale" />)
+    await waitFor(() => expect(meRequests()).toEqual(['stale']))
+
+    rerender(<Tree accessToken="fresh" />)
+    await waitFor(() => expect(meRequests()).toEqual(['stale', 'fresh']))
+
+    staleRequest.reject(new Response(null, { status: 401, statusText: 'Unauthorized' }))
+
+    expect(await screen.findByText('success:idle:42')).toBeTruthy()
+  })
+})

package/src/contexts/api_provider.tsx

@@ -9,9 +9,9 @@ import React, { useContext, useEffect, useRef } from 'react'
 import { ViewProps } from 'react-native'
 import { ApiClient, useApiClient } from '../hooks/use_api_client'
 import { useAppState } from '../hooks/use_app_state'
-import { appGrantsRequestArgs } from '../hooks/use_chat_permissions'
+import { appGrantsQueryOptions } from '../hooks/use_chat_permissions'
 import { featuresQueryOptions } from '../hooks/use_features'
-import { getRequestQueryKey, RequestQueryKey } from '../hooks/use_suspense_api'
+import { RequestQueryKey } from '../hooks/use_suspense_api'
 import { emitAuthRefresh } from '../utils/auth_events'
 import { ResponseError } from '../utils/response_error'
 import { ChatContext, ChatContextValue } from './chat_context'
@@ -48,7 +48,7 @@ export const chatQueryClient = new QueryClient({
 })
 
 export function ApiProvider({ children }: ViewProps) {
-  const { token, env } = useContext(ChatContext)
+  const { token, env, session } = useContext(ChatContext)
   const sessionChanged = useSessionChanged({ token, env })
 
   const client = useApiClient()
@@ -59,7 +59,7 @@ export function ApiProvider({ children }: ViewProps) {
     emitAuthRefresh()
 
     if (chatQueryClient.isFetching()) {
-      chatQueryClient.invalidateQueries()
+      chatQueryClient.cancelQueries().then(() => chatQueryClient.invalidateQueries())
       return
     }
 
@@ -72,7 +72,7 @@ export function ApiProvider({ children }: ViewProps) {
 
   return (
     <QueryClientProvider client={chatQueryClient}>
-      <PrefetchQueries />
+      {session.isAuthenticated && <PrefetchQueries />}
       {children}
     </QueryClientProvider>
   )
@@ -84,10 +84,7 @@ export function ApiProvider({ children }: ViewProps) {
 const PrefetchQueries = () => {
   const client = useApiClient()
 
-  usePrefetchQuery({
-    queryKey: getRequestQueryKey(appGrantsRequestArgs),
-    queryFn: defaultQueryFn,
-  })
+  usePrefetchQuery(appGrantsQueryOptions(client))
   usePrefetchQuery(featuresQueryOptions(client))
 
   return null

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

@@ -0,0 +1,70 @@
+import { QueryClientProvider } from '@tanstack/react-query'
+import { render, waitFor } from '@testing-library/react-native'
+import React, { PropsWithChildren, Suspense } from 'react'
+import { buildTestQueryClient } from '../../__utils__/query_client'
+import { ChatContext, ChatContextValue } from '../../contexts/chat_context'
+import { Session } from '../../utils'
+import { Client } from '../../utils/client'
+import { ResponseError } from '../../utils/response_error'
+import { useJoltClient } from '../use_jolt'
+
+let caught: unknown
+
+class Catch extends React.Component<PropsWithChildren, { failed: boolean }> {
+  state = { failed: false }
+
+  static getDerivedStateFromError(error: unknown) {
+    caught = error
+    return { failed: true }
+  }
+
+  render() {
+    return this.state.failed ? null : this.props.children
+  }
+}
+
+const Probe = () => {
+  useJoltClient()
+  return null
+}
+
+const renderJoltClient = () => {
+  const session = new Session({ token: { access_token: 'a-real-token' } })
+
+  return render(
+    <QueryClientProvider client={buildTestQueryClient()}>
+      <ChatContext.Provider value={{ session } as unknown as ChatContextValue}>
+        <Catch>
+          <Suspense fallback={null}>
+            <Probe />
+          </Suspense>
+        </Catch>
+      </ChatContext.Provider>
+    </QueryClientProvider>
+  )
+}
+
+describe('useJoltClient', () => {
+  let post: jest.SpyInstance
+  let consoleError: jest.SpyInstance
+
+  beforeEach(() => {
+    caught = undefined
+    post = jest.spyOn(Client.prototype, 'post')
+    consoleError = jest.spyOn(console, 'error').mockImplementation(() => {})
+  })
+
+  afterEach(() => {
+    post.mockRestore()
+    consoleError.mockRestore()
+  })
+
+  it('surfaces a failed jolt_authorize as a ResponseError', async () => {
+    post.mockRejectedValue(new Response(null, { status: 401, statusText: 'Unauthorized' }))
+
+    renderJoltClient()
+
+    await waitFor(() => expect(caught).toBeInstanceOf(ResponseError))
+    expect((caught as ResponseError).status).toBe(401)
+  })
+})

package/src/hooks/use_animated_message_background_color.ts

@@ -1,43 +1,68 @@
+import { useCallback } from 'react'
 import { Platform } from 'react-native'
 import {
   useSharedValue,
   useAnimatedStyle,
+  withDelay,
+  withSequence,
   withTiming,
   interpolateColor,
   Easing,
+  ReduceMotion,
 } from 'react-native-reanimated'
 import { useTheme } from './use_theme'
 
+const FLASH_IN_MS = 150
+const FLASH_HOLD_MS = 500
+const FLASH_OUT_MS = 1500
+
 export function useAnimatedMessageBackgroundColor() {
   const { colors } = useTheme()
-  const bgFadeProgress = useSharedValue(0)
+  const pressProgress = useSharedValue(0)
+  const flashProgress = useSharedValue(0)
 
-  const pressedColor = Platform.select({
-    ios: colors.fillColorNeutral050Base,
-    default: 'transparent',
-  })
+  const tintColor = colors.fillColorNeutral050Base
+  const tintsOnPress = Platform.OS === 'ios'
 
   const animatedBackgroundColor = useAnimatedStyle(() => {
-    const backgroundColor = interpolateColor(
-      bgFadeProgress.value,
-      [0, 1],
-      ['transparent', pressedColor]
-    )
+    const pressTint = tintsOnPress ? pressProgress.value : 0
+    const progress = Math.max(pressTint, flashProgress.value)
+    const backgroundColor = interpolateColor(progress, [0, 1], ['transparent', tintColor])
     return {
       backgroundColor,
     }
   })
 
   const handleMessagePressIn = () => {
-    bgFadeProgress.value = withTiming(1, { duration: 300, easing: Easing.inOut(Easing.ease) })
+    pressProgress.value = withTiming(1, { duration: 300, easing: Easing.inOut(Easing.ease) })
   }
 
   const handleMessagePressOut = () => {
-    bgFadeProgress.value = withTiming(0, { duration: 300, easing: Easing.inOut(Easing.ease) })
+    pressProgress.value = withTiming(0, { duration: 300, easing: Easing.inOut(Easing.ease) })
   }
 
+  const flash = useCallback(() => {
+    flashProgress.value = withSequence(
+      withTiming(1, {
+        duration: FLASH_IN_MS,
+        easing: Easing.out(Easing.ease),
+        reduceMotion: ReduceMotion.Never,
+      }),
+      withDelay(
+        FLASH_HOLD_MS,
+        withTiming(0, {
+          duration: FLASH_OUT_MS,
+          easing: Easing.out(Easing.ease),
+          reduceMotion: ReduceMotion.System,
+        }),
+        ReduceMotion.Never
+      )
+    )
+  }, [flashProgress])
+
   return {
     animatedBackgroundColor,
+    flash,
     handleMessagePressIn,
     handleMessagePressOut,
   }

package/src/hooks/use_chat_permissions.ts

@@ -1,7 +1,10 @@
-import { AppGrantsResource } from '../types'
+import { queryOptions } from '@tanstack/react-query'
+import { ApiCollection, AppGrantsResource } from '../types'
+import { throwResponseError } from '../utils/response_error'
 import { FIVE_MINUTES } from '../utils/time'
 import { useApiGet } from './use_api'
-import { App } from './use_api_client'
+import { ApiClient, App } from './use_api_client'
+import { getRequestQueryKey } from './use_suspense_api'
 
 export const appGrantsRequestArgs = {
   url: '/me/app_grants',
@@ -13,6 +16,16 @@ export const appGrantsRequestArgs = {
   app: 'chat' as App,
 }
 
+export const appGrantsQueryOptions = (apiClient: ApiClient) =>
+  queryOptions({
+    queryKey: getRequestQueryKey(appGrantsRequestArgs),
+    queryFn: (): Promise<ApiCollection<AppGrantsResource>> =>
+      apiClient[appGrantsRequestArgs.app]
+        .get<ApiCollection<AppGrantsResource>>(appGrantsRequestArgs)
+        .catch(throwResponseError),
+    staleTime: FIVE_MINUTES,
+  })
+
 export function useAppGrants() {
   return useApiGet<AppGrantsResource[]>(appGrantsRequestArgs, {
     staleTime: FIVE_MINUTES,

package/src/hooks/use_features.ts

@@ -57,6 +57,8 @@ export const availableFeatures = {
   dm_search_clear_fix: 'ROLLOUT_MOBILE_dm_search_clear_fix',
   search: 'QA_MOBILE_search',
   search_rollout: 'ROLLOUT_MOBILE_search',
+  manual_archiving: 'QA_MOBILE_manual_archiving',
+  manual_archiving_rollout: 'ROLLOUT_MOBILE_manual_archiving',
 } as const satisfies Record<string, `${'QA' | 'ROLLOUT'}_${string}`>
 
 const stableEmptyFeatures: ApiCollection<FeatureResource> = {

package/src/hooks/use_jolt.ts

@@ -13,6 +13,7 @@ import { useChatContext } from '../contexts/chat_context'
 import { ApiResource } from '../types'
 import type { JoltSubscriptionPattern } from '../types/jolt_events'
 import { Client, Uri } from '../utils'
+import { throwResponseError } from '../utils/response_error'
 import { FIVE_SECONDS } from '../utils/time'
 
 interface JoltResponse {
@@ -40,15 +41,17 @@ export const useJoltClient = (): JoltClient | undefined => {
     return queryClient.fetchQuery({
       queryKey: ['jolt-token'],
       queryFn: () => {
-        return apiClient.post<ApiResource<JoltResponse>>({
-          url: '/me/jolt_authorize',
-          data: {
+        return apiClient
+          .post<ApiResource<JoltResponse>>({
+            url: '/me/jolt_authorize',
             data: {
-              type: 'JoltToken',
-              attributes: {},
+              data: {
+                type: 'JoltToken',
+                attributes: {},
+              },
             },
-          },
-        })
+          })
+          .catch(throwResponseError)
       },
       staleTime: FIVE_SECONDS,
     })

package/src/hooks/use_product_analytics.ts

@@ -12,6 +12,8 @@ export interface EventMetadata {
 export const analyticsEvents = {
   conversation_index_opened: 'chat.mobile.conversations.index.opened',
   conversation_show_opened: 'chat.mobile.conversations.show.opened',
+  search_performed: 'chat.mobile.search.performed',
+  search_result_opened: 'chat.mobile.search.result.opened',
 } as const satisfies Record<string, `chat.mobile.${string}`>
 
 type AnalyticsEventName = (typeof analyticsEvents)[keyof typeof analyticsEvents]
@@ -53,7 +55,7 @@ function sendEvents(events: AnalyticsEvent[], config: ProductAnalyticsConfig): P
   })
 }
 
-const useProductAnalytics = () => {
+export const useProductAnalytics = () => {
   const { productAnalyticsConfig } = useChatContext()
 
   const snakeCasedBaseMeta = useMemo(

package/src/hooks/use_search_enabled.ts

@@ -0,0 +1,9 @@
+import { availableFeatures, useFeatures } from './use_features'
+
+export function useSearchEnabled() {
+  const { featureEnabled } = useFeatures()
+
+  return (
+    featureEnabled(availableFeatures.search) || featureEnabled(availableFeatures.search_rollout)
+  )
+}

package/src/screens/age_check/age_check_underage_screen.tsx

@@ -1,9 +1,10 @@
 import { useRoute, RouteProp } from '@react-navigation/native'
 import React from 'react'
-import { Linking, StyleSheet, View, ScrollView } from 'react-native'
+import { StyleSheet, View, ScrollView } from 'react-native'
 import { Heading } from '../../components'
 import { Icon, Text, TextInlineButton } from '../../components/display'
 import { useTheme } from '../../hooks'
+import { Linking } from '../../utils'
 import type { AgeCheckParams } from './screen_props'
 
 export interface AgeCheckUnderageScreenProps {

package/src/screens/attachment_actions/attachment_actions_screen.tsx

@@ -1,7 +1,8 @@
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
 import React, { useCallback } from 'react'
-import { Alert, Linking, StyleSheet } from 'react-native'
+import { Alert, StyleSheet } from 'react-native'
 import FormSheet, { getFormSheetScreenOptions } from '../../components/primitive/form_sheet'
+import { Linking } from '../../utils'
 import { useDeleteAttachment } from './hooks/useDeleteAttachment'
 
 export const AttachmentActionsScreenOptions = getFormSheetScreenOptions({
@@ -57,7 +58,7 @@ export function AttachmentActionsScreen({ route }: AttachmentActionsScreenProps)
   }, [attachmentName, handleDeleteAttachment, navigation])
 
   const handleOpenInBrowser = () => {
-    Linking.openURL(attachmentUrl)
+    Linking.openURL(attachmentUrl, { forceOpenInBrowser: true })
     navigation.goBack()
   }
 

package/src/screens/bug_report_screen.tsx

@@ -5,15 +5,7 @@ import type {
 } from '@react-navigation/native-stack'
 import { startsWith } from 'lodash'
 import React, { useCallback, useState } from 'react'
-import {
-  View,
-  StyleSheet,
-  TextInput,
-  Linking,
-  ScrollView,
-  TouchableOpacity,
-  Platform,
-} from 'react-native'
+import { View, StyleSheet, TextInput, ScrollView, TouchableOpacity, Platform } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import {
   Button,
@@ -38,7 +30,7 @@ import { useTheme } from '../hooks'
 import { useAppName } from '../hooks/use_app_name'
 import { useReportBugAction } from '../hooks/use_report_bug_action'
 import { useUploadClient } from '../hooks/use_upload_client'
-import { ImagePicker, ImagePickerResult, platformFontWeightBold } from '../utils'
+import { ImagePicker, ImagePickerResult, Linking, platformFontWeightBold } from '../utils'
 
 const MAX_DESCRIPTION_LENGTH = 2000
 

package/src/screens/conversations/__tests__/conversations_screen.test.tsx

@@ -0,0 +1,71 @@
+import { QueryClientProvider } from '@tanstack/react-query'
+import { render } from '@testing-library/react-native'
+import React, { Suspense } from 'react'
+import { buildTestQueryClient } from '../../../__utils__/query_client'
+import { ConversationsScreen } from '../conversations_screen'
+
+const mockGet = jest.fn()
+jest.mock('../../../hooks/use_api_client', () => ({
+  useApiClient: () => ({ chat: { get: mockGet } }),
+}))
+jest.mock('../../../hooks/use_product_analytics', () => ({
+  ...jest.requireActual('../../../hooks/use_product_analytics'),
+  usePublishProductAnalyticsEvent: () => {},
+}))
+jest.mock('../../../contexts/conversations_context', () => ({
+  ConversationsContextProvider: ({ children }: { children: React.ReactNode }) => children,
+}))
+jest.mock('../../../components', () => ({
+  Conversations: ({ ListHeaderComponent }: { ListHeaderComponent: React.ComponentType }) => (
+    <ListHeaderComponent />
+  ),
+}))
+jest.mock('../components/list_header_component', () => {
+  const { Text } = require('react-native')
+  return { ListHeaderComponent: () => <Text>Default header</Text> }
+})
+jest.mock('../components/search_list_header_component', () => {
+  const { Text } = require('react-native')
+  return { SearchListHeaderComponent: () => <Text>Search header</Text> }
+})
+
+const renderWithFeatures = (enabledFeatures: string[]) => {
+  mockGet.mockResolvedValue({
+    data: enabledFeatures.map((name, index) => ({
+      type: 'Feature',
+      id: String(index + 1),
+      name,
+      enabled: true,
+    })),
+    links: {},
+    meta: { count: enabledFeatures.length, totalCount: enabledFeatures.length },
+  })
+
+  return render(
+    <QueryClientProvider client={buildTestQueryClient()}>
+      <Suspense fallback={null}>
+        <ConversationsScreen route={{ params: {} }} />
+      </Suspense>
+    </QueryClientProvider>
+  )
+}
+
+describe('ConversationsScreen header gating', () => {
+  it('shows the search header with only the QA flag on', async () => {
+    const view = renderWithFeatures(['QA_MOBILE_search'])
+
+    expect(await view.findByText('Search header')).toBeTruthy()
+  })
+
+  it('shows the search header with only the rollout flag on', async () => {
+    const view = renderWithFeatures(['ROLLOUT_MOBILE_search'])
+
+    expect(await view.findByText('Search header')).toBeTruthy()
+  })
+
+  it('shows the default header with neither flag on', async () => {
+    const view = renderWithFeatures(['ROLLOUT_WEB_search'])
+
+    expect(await view.findByText('Default header')).toBeTruthy()
+  })
+})

package/src/screens/conversations/components/search_list_header_component.tsx

@@ -264,7 +264,7 @@ const useStyles = ({
   return StyleSheet.create({
     listHeader: {
       borderBottomWidth: 1,
-      borderBottomColor: theme.colors.statusErrorBorder,
+      borderBottomColor: theme.colors.fillColorNeutral050Base,
       paddingBottom: 16,
       gap: 16,
     },