@planningcenter/chat-react-native 4.4.1-qa-staging.17 → 4.4.1-qa-staging.18

package/src/__tests__/screens/conversation_filters_screen.test.tsx

@@ -0,0 +1,76 @@
+import { DefaultTheme, ThemeProvider } from '@react-navigation/native'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react-native'
+import React from 'react'
+import { Platform } from 'react-native'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
+import { FilterContext } from '../../screens/conversation_filters/context/conversation_filter_context'
+import { ConversationFiltersHeader } from '../../screens/conversation_filters_screen'
+
+const mockGoBack = jest.fn()
+
+jest.mock('@react-navigation/elements', () => ({
+  ...jest.requireActual('@react-navigation/elements'),
+  useHeaderHeight: () => 0,
+}))
+jest.mock('@react-navigation/native', () => ({
+  ...jest.requireActual('@react-navigation/native'),
+  useNavigation: () => ({ goBack: mockGoBack }),
+  useRoute: () => ({ params: {} }),
+}))
+jest.mock('../../hooks/use_filter_dropdown_enabled', () => ({
+  useFilterDropdownEnabled: () => true,
+}))
+
+const safeAreaMetrics = {
+  frame: { x: 0, y: 0, width: 390, height: 844 },
+  insets: { top: 0, right: 0, bottom: 0, left: 0 },
+}
+
+const renderHeader = () =>
+  render(
+    <SafeAreaProvider initialMetrics={safeAreaMetrics}>
+      <ThemeProvider value={DefaultTheme}>
+        <FilterContext.Provider
+          value={{
+            params: {},
+            scrollOffset: 0,
+            setScrollOffset: jest.fn(),
+            setFormSheetHeaderHeight: jest.fn(),
+            resetFilter: jest.fn(),
+            setGroupFilter: jest.fn(),
+            setAppFilter: jest.fn(),
+            applyFilters: jest.fn(),
+            platformListPaddingBottom: 0,
+          }}
+        >
+          <ConversationFiltersHeader />
+        </FilterContext.Provider>
+      </ThemeProvider>
+    </SafeAreaProvider>
+  )
+
+describe('ConversationFiltersHeader', () => {
+  afterEach(() => {
+    jest.restoreAllMocks()
+    mockGoBack.mockClear()
+  })
+
+  it('shows a back button that dismisses the sheet on Android', async () => {
+    jest.replaceProperty(Platform, 'OS', 'android')
+
+    renderHeader()
+
+    fireEvent.press(screen.getByLabelText('Back'))
+
+    await waitFor(() => expect(mockGoBack).toHaveBeenCalledTimes(1))
+  })
+
+  it('does not show a back button on iOS', () => {
+    jest.replaceProperty(Platform, 'OS', 'ios')
+
+    renderHeader()
+
+    expect(screen.getByText('More filters')).toBeTruthy()
+    expect(screen.queryByLabelText('Back')).toBeNull()
+  })
+})

package/src/components/conversations/__tests__/conversation_actions.test.tsx

@@ -0,0 +1,67 @@
+import { render } from '@testing-library/react-native'
+import React from 'react'
+import { Text } from 'react-native'
+import type { ConversationResource } from '../../../types'
+import { ConversationActions } from '../conversation_actions'
+
+jest.mock('react-native-gesture-handler/ReanimatedSwipeable', () => {
+  const { View: MockView } = jest.requireActual('react-native')
+  return {
+    __esModule: true,
+    default: ({
+      children,
+      renderLeftActions,
+    }: {
+      children: React.ReactNode
+      renderLeftActions: () => React.ReactNode
+    }) => (
+      <MockView>
+        {renderLeftActions()}
+        {children}
+      </MockView>
+    ),
+  }
+})
+jest.mock('../../../hooks/use_conversations_actions', () => ({
+  useConversationsMute: () => ({ muted: false, setMuted: jest.fn(), isPending: false }),
+  useConversationsMarkRead: () => ({ read: false, markRead: jest.fn(), isPending: false }),
+}))
+
+const createdAt = '2026-10-01T12:00:00Z'
+
+const conversation = (overrides: Partial<ConversationResource>): ConversationResource => ({
+  type: 'Conversation',
+  id: 7,
+  title: 'Youth Group',
+  conversationPreview: null,
+  createdAt,
+  lastMessageCreatedAt: createdAt,
+  muted: false,
+  repliesDisabled: false,
+  unreadCount: 1,
+  unreadReaction: false,
+  updatedAt: createdAt,
+  ...overrides,
+})
+
+const renderActions = (overrides: Partial<ConversationResource>) =>
+  render(
+    <ConversationActions conversation={conversation(overrides)} onPress={jest.fn()}>
+      <Text>Youth Group</Text>
+    </ConversationActions>
+  )
+
+describe('ConversationActions', () => {
+  it('offers mark read but not mute on an archived conversation', () => {
+    const view = renderActions({ disabled: true, disabledReason: 'archived' })
+
+    expect(view.getByText('Mark read')).toBeTruthy()
+    expect(view.queryByText('Silence')).toBeNull()
+  })
+
+  it('offers mute on a conversation disabled for another reason', () => {
+    const view = renderActions({ disabled: true, disabledReason: 'safety_check' })
+
+    expect(view.getByText('Silence')).toBeTruthy()
+  })
+})

package/src/components/conversations/__tests__/conversation_preview.test.tsx

@@ -19,7 +19,10 @@ jest.mock('../conversation_actions', () => ({
 
 const createdAt = '2026-03-04T15:30:00Z'
 
-const conversation = (conversationPreview: ConversationPreviewData): ConversationResource => ({
+const conversation = (
+  conversationPreview: ConversationPreviewData,
+  overrides: Partial<ConversationResource> = {}
+): ConversationResource => ({
   type: 'Conversation',
   id: 7,
   title: 'Worship Team',
@@ -31,10 +34,24 @@ const conversation = (conversationPreview: ConversationPreviewData): Conversatio
   unreadCount: 0,
   unreadReaction: false,
   updatedAt: createdAt,
+  ...overrides,
 })
 
-const renderPreview = (preview: ConversationPreviewData) =>
-  render(<ConversationPreview conversation={conversation(preview)} onPress={jest.fn()} />)
+const messagePreview: ConversationPreviewData = {
+  kind: 'message',
+  authorName: 'Ada Lovelace',
+  value: null,
+  text: 'See you Sunday',
+  createdAt,
+}
+
+const renderPreview = (
+  preview: ConversationPreviewData,
+  overrides: Partial<ConversationResource> = {}
+) =>
+  render(
+    <ConversationPreview conversation={conversation(preview, overrides)} onPress={jest.fn()} />
+  )
 
 describe('ConversationPreview', () => {
   it('prefixes message previews with the author', () => {
@@ -67,4 +84,22 @@ describe('ConversationPreview', () => {
       )
     ).toBeTruthy()
   })
+
+  it('marks an archived conversation with an archive icon instead of the disabled label', () => {
+    const view = renderPreview(messagePreview, { disabled: true, disabledReason: 'archived' })
+
+    expect(
+      view.getByTestId('conversation-archived-icon', { includeHiddenElements: true })
+    ).toBeTruthy()
+    expect(view.getByLabelText(/^Select Worship Team, Archived,/)).toBeTruthy()
+  })
+
+  it('keeps the disabled label for a conversation disabled for another reason', () => {
+    const view = renderPreview(messagePreview, { disabled: true, disabledReason: 'safety_check' })
+
+    expect(
+      view.queryByTestId('conversation-archived-icon', { includeHiddenElements: true })
+    ).toBeNull()
+    expect(view.getByLabelText(/^Select Worship Team, Disabled,/)).toBeTruthy()
+  })
 })

package/src/components/conversations/__tests__/conversations.test.tsx

@@ -0,0 +1,82 @@
+import { fireEvent, render } from '@testing-library/react-native'
+import React from 'react'
+import { ConversationFiltersParams } from '../../../screens/conversation_filters/screen_props'
+import { Conversations } from '../conversations'
+
+const mockSetParams = jest.fn()
+let mockArgs: ConversationFiltersParams = {}
+let mockFilterDropdownEnabled = false
+
+jest.mock('@react-navigation/native', () => ({
+  ...jest.requireActual('@react-navigation/native'),
+  useNavigation: () => ({ setParams: mockSetParams, navigate: jest.fn() }),
+}))
+jest.mock('../../../contexts/conversations_context', () => ({
+  useConversationsContext: () => ({
+    conversations: [{ id: 1, title: 'Youth Group' }],
+    isLoading: false,
+    isFetched: true,
+    isRefetching: false,
+    isError: false,
+    error: null,
+    fetchNextPage: jest.fn(),
+    refetch: jest.fn(),
+    args: mockArgs,
+  }),
+}))
+jest.mock('../../../hooks/use_chat_permissions', () => ({
+  useCanCreateConversations: () => false,
+}))
+jest.mock('../../../hooks/use_filter_dropdown_enabled', () => ({
+  useFilterDropdownEnabled: () => mockFilterDropdownEnabled,
+}))
+jest.mock('../../../hooks/use_conversations_jolt_events', () => ({
+  useConversationsJoltEvents: () => {},
+}))
+jest.mock('../conversation_preview', () => ({
+  ConversationPreview: () => null,
+  ConversationPreviewSkeleton: () => null,
+}))
+jest.mock('../conversations_blank_state', () => ({
+  ConversationsBlankState: () => null,
+}))
+
+describe('Conversations archived footer', () => {
+  beforeEach(() => {
+    mockSetParams.mockClear()
+    mockFilterDropdownEnabled = false
+  })
+
+  it('ends the archived list with a way back to active conversations', () => {
+    mockArgs = { show_archived: true }
+    const view = render(<Conversations />)
+
+    expect(view.getByText('You’re viewing archived results.')).toBeTruthy()
+
+    fireEvent.press(view.getByLabelText('View active conversations'))
+
+    expect(mockSetParams).toHaveBeenCalledWith({
+      title: undefined,
+      chat_group_graph_id: undefined,
+      group_source_app_name: undefined,
+      show_direct_messages: undefined,
+      show_archived: undefined,
+    })
+  })
+
+  it('shows the archived footer instead of the filtered one when the dropdown is on', () => {
+    mockArgs = { show_archived: true }
+    mockFilterDropdownEnabled = true
+    const view = render(<Conversations />)
+
+    expect(view.getByLabelText('View active conversations')).toBeTruthy()
+    expect(view.queryByText('You’re viewing filtered results')).toBeNull()
+  })
+
+  it('leaves the active list without the archived footer', () => {
+    mockArgs = {}
+    const view = render(<Conversations />)
+
+    expect(view.queryByLabelText('View active conversations')).toBeNull()
+  })
+})

package/src/components/conversations/__tests__/conversations_blank_state.test.tsx

@@ -40,6 +40,7 @@ describe('ConversationsBlankState', () => {
         chat_group_graph_id: undefined,
         group_source_app_name: undefined,
         show_direct_messages: undefined,
+        show_archived: undefined,
       })
     })
 

package/src/components/conversations/archived_results_footer.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import { StyleSheet, View } from 'react-native'
+import { Text, TextInlineButton } from '../display'
+
+interface ArchivedResultsFooterProps {
+  onViewActiveConversations: () => void
+}
+
+export function ArchivedResultsFooter({ onViewActiveConversations }: ArchivedResultsFooterProps) {
+  return (
+    <View style={styles.container}>
+      <Text variant="tertiary" style={styles.text}>
+        You&rsquo;re viewing archived results.
+      </Text>
+      <TextInlineButton
+        variant="tertiary"
+        onPress={onViewActiveConversations}
+        accessibilityLabel="View active conversations"
+      >
+        View active conversations
+      </TextInlineButton>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    gap: 4,
+    paddingVertical: 24,
+    paddingHorizontal: 16,
+  },
+  text: {
+    textAlign: 'center',
+  },
+})

package/src/components/conversations/conversation_actions.tsx

@@ -18,7 +18,7 @@ import {
   useConversationsMute,
 } from '../../hooks/use_conversations_actions'
 import { ConversationResource } from '../../types'
-import { platformPressedOpacityStyle } from '../../utils'
+import { isArchivedConversation, platformPressedOpacityStyle } from '../../utils'
 import { tokens } from '../../vendor/tapestry/tokens'
 import { SwipeableToggleButton } from './swipeable_toggle_button'
 
@@ -53,6 +53,7 @@ export function ConversationActions({
   })
 
   const isConversationEmpty = conversation.lastMessageCreatedAt === null
+  const canMute = !isArchivedConversation(conversation)
 
   const handleSwipeableClose = useCallback(() => {
     setDisabled(false)
@@ -88,13 +89,16 @@ export function ConversationActions({
       ]
     : []
 
-  const accessibilityActions = [
-    {
-      name: muted ? 'unmute' : 'mute',
-      label: muted ? 'Enable' : 'Silence',
-    },
-    ...readAccessibilityAction,
-  ]
+  const muteAccessibilityAction = canMute
+    ? [
+        {
+          name: muted ? 'unmute' : 'mute',
+          label: muted ? 'Enable' : 'Silence',
+        },
+      ]
+    : []
+
+  const accessibilityActions = [...muteAccessibilityAction, ...readAccessibilityAction]
 
   const handleAccessibilityAction = useCallback(
     (event: AccessibilityActionEvent) => {
@@ -136,6 +140,7 @@ export function ConversationActions({
       renderLeftActions={() => (
         <LeftActions
           isConversationEmpty={isConversationEmpty}
+          canMute={canMute}
           handleMute={handleMute}
           handleLatestMessageUnread={handleLatestMessageUnread}
           muted={muted}
@@ -163,6 +168,7 @@ export function ConversationActions({
 
 interface LeftActionsProps {
   isConversationEmpty: boolean
+  canMute: boolean
   handleMute: () => void
   handleLatestMessageUnread: () => void
   muted: boolean
@@ -173,6 +179,7 @@ interface LeftActionsProps {
 
 function LeftActions({
   isConversationEmpty,
+  canMute,
   handleMute,
   handleLatestMessageUnread,
   muted,
@@ -180,7 +187,7 @@ function LeftActions({
   isMutedPending,
   isMarkReadPending,
 }: LeftActionsProps) {
-  const styles = useStyles()
+  const styles = useStyles({ actionButtonCount: canMute ? 2 : 1 })
 
   const muteToggleContent = {
     true: { iconName: 'general.bell', label: 'Enable' },
@@ -202,21 +209,22 @@ function LeftActions({
         toggleContent={latestMessageUnreadToggleContent}
         backgroundColor={tokens.fillColorInteractionSwipeDefault}
       />
-      <SwipeableToggleButton
-        loading={isMutedPending}
-        toggled={muted}
-        onPress={handleMute}
-        toggleContent={muteToggleContent}
-        backgroundColor={tokens.fillColorInteractionSwipeSecondary}
-      />
+      {canMute && (
+        <SwipeableToggleButton
+          loading={isMutedPending}
+          toggled={muted}
+          onPress={handleMute}
+          toggleContent={muteToggleContent}
+          backgroundColor={tokens.fillColorInteractionSwipeSecondary}
+        />
+      )}
     </View>
   )
 }
 
 const ACTION_BUTTON_WIDTH = 120
-const ACTION_BUTTON_COUNT = 2
 
-const useStyles = () => {
+const useStyles = ({ actionButtonCount = 2 }: { actionButtonCount?: number } = {}) => {
   const { colors } = useTheme()
   return StyleSheet.create({
     swipeableChildContainer: {
@@ -225,7 +233,7 @@ const useStyles = () => {
     actionButtonContainer: {
       flexDirection: 'row',
       alignItems: 'center',
-      width: ACTION_BUTTON_WIDTH * ACTION_BUTTON_COUNT,
+      width: ACTION_BUTTON_WIDTH * actionButtonCount,
       alignContent: 'stretch',
     },
     swipeableContainer: {

package/src/components/conversations/conversation_preview.tsx

@@ -7,10 +7,19 @@ import {
   useScalableNumberOfLines,
 } from '../../hooks'
 import { ConversationPreviewData, ConversationResource } from '../../types'
-import { REACTION_EMOJIS, platformFontWeightBold } from '../../utils'
+import { REACTION_EMOJIS, isArchivedConversation, platformFontWeightBold } from '../../utils'
 import { formatDatePreview } from '../../utils/date'
+import { faBoxArchive } from '../../vendor/font_awesome_pro_solid_icons'
 import { tokens } from '../../vendor/tapestry/tokens'
-import { AvatarGroup, ConversationAvatar, Heading, Text, Badge, type BadgeProps } from '../display'
+import {
+  AvatarGroup,
+  ConversationAvatar,
+  Heading,
+  IconTile,
+  Text,
+  Badge,
+  type BadgeProps,
+} from '../display'
 import { ConversationActions } from './conversation_actions'
 import { MuteIndicator } from './mute_indicator'
 import { UnreadCountBadge } from './unread_count_badge'
@@ -42,6 +51,7 @@ export const ConversationPreview = ({
     unreadReaction,
   } = conversation
 
+  const archived = isArchivedConversation(conversation)
   const emptyConversation = !lastMessageCreatedAt
   const fallbackIconName = emptyConversation ? 'people.noTextMessage' : 'general.person'
   const hasMetaContent = lastMessageCreatedAt || unreadCount > 0 || muted
@@ -57,25 +67,30 @@ export const ConversationPreview = ({
   const conversationAccessibilityLabel = getConversationAccessibilityLabel({
     conversation,
     showBadges,
+    archived,
   })
 
   return (
     <ConversationActions
       conversation={conversation}
-      style={[styles.previewRow, disabled && styles.disabled, style]}
+      style={[styles.previewRow, disabled && !archived && styles.disabled, style]}
       onPress={onPress}
       accessibilityLabel={conversationAccessibilityLabel}
     >
-      <ConversationAvatar
-        conversation={conversation}
-        size="lg"
-        fallbackIconName={fallbackIconName}
-      />
+      {archived ? (
+        <IconTile icon={faBoxArchive} size="lg" testID="conversation-archived-icon" />
+      ) : (
+        <ConversationAvatar
+          conversation={conversation}
+          size="lg"
+          fallbackIconName={fallbackIconName}
+        />
+      )}
       <View style={styles.conversationBody}>
         <Heading
           numberOfLines={numberOfLinesScaledTitle}
           variant="h3"
-          style={[styles.title, isUnread && styles.unreadTitle]}
+          style={[styles.title, archived && styles.archivedTitle, isUnread && styles.unreadTitle]}
         >
           {title}
         </Heading>
@@ -193,10 +208,12 @@ function formatConversationPreviewAccessibilityLabel(preview: ConversationPrevie
 interface GetConversationAccessibilityLabelProps {
   conversation: ConversationResource
   showBadges: boolean
+  archived: boolean
 }
 const getConversationAccessibilityLabel = ({
   conversation,
   showBadges,
+  archived,
 }: GetConversationAccessibilityLabelProps) => {
   const { badges, title, conversationPreview, muted, disabled, unreadCount, unreadReaction } =
     conversation
@@ -207,7 +224,7 @@ const getConversationAccessibilityLabel = ({
   const label = {
     title,
     badge: hasBadges ? `for ${badges[0]?.pcoResourceType} ${badges[0]?.text || ''}` : '',
-    disabled: disabled ? 'Disabled' : '',
+    disabled: archived ? 'Archived' : disabled ? 'Disabled' : '',
     muted: muted ? 'Muted' : '',
     readStatus: hasUnreadMessages
       ? `${unreadCount} unread messages`
@@ -255,6 +272,9 @@ const useStyles = () => {
       fontSize: 16,
       color: colors.textColorDefaultPrimary,
     },
+    archivedTitle: {
+      color: colors.textColorDefaultSecondary,
+    },
     unreadTitle: {
       fontWeight: tokens.fontWeightBold,
     },

package/src/components/conversations/conversations.tsx

@@ -4,9 +4,11 @@ import { FlatList, StyleSheet, View } from 'react-native'
 import { useConversationsContext } from '../../contexts/conversations_context'
 import { useTheme } from '../../hooks'
 import { useCanCreateConversations } from '../../hooks/use_chat_permissions'
+import { useClearConversationFilters } from '../../hooks/use_clear_conversation_filters'
 import { useConversationsJoltEvents } from '../../hooks/use_conversations_jolt_events'
 import { useFilterDropdownEnabled } from '../../hooks/use_filter_dropdown_enabled'
 import { ConversationResource } from '../../types'
+import { ArchivedResultsFooter } from './archived_results_footer'
 import { ConversationPreview, ConversationPreviewSkeleton } from './conversation_preview'
 import { ConversationsBlankState } from './conversations_blank_state'
 import { FilteredResultsFooter } from './filtered_results_footer'
@@ -29,15 +31,19 @@ export const Conversations = ({ ListHeaderComponent }: ConversationsProps) => {
     isRefetching,
     isFetched,
     hasNextPage,
-    args: { chat_group_graph_id, group_source_app_name, show_direct_messages },
+    args: { chat_group_graph_id, group_source_app_name, show_direct_messages, show_archived },
   } = useConversationsContext()
   const navigation = useNavigation()
   const canCreateConversations = useCanCreateConversations()
+  const clearFilters = useClearConversationFilters()
   const filterDropdownEnabled = useFilterDropdownEnabled()
-  const isFilterApplied = !!chat_group_graph_id || !!group_source_app_name || !!show_direct_messages
+  const isFilterApplied =
+    !!chat_group_graph_id || !!group_source_app_name || !!show_direct_messages || !!show_archived
+  const showArchivedResultsFooter = !!show_archived && !isLoading
   const showFilteredResultsFooter =
     filterDropdownEnabled &&
     isFilterApplied &&
+    !show_archived &&
     !hasNextPage &&
     !isLoading &&
     conversations.length > 0
@@ -72,7 +78,13 @@ export const Conversations = ({ ListHeaderComponent }: ConversationsProps) => {
             canCreateConversations={canCreateConversations}
           />
         }
-        ListFooterComponent={showFilteredResultsFooter ? <FilteredResultsFooter /> : null}
+        ListFooterComponent={
+          showArchivedResultsFooter ? (
+            <ArchivedResultsFooter onViewActiveConversations={clearFilters} />
+          ) : showFilteredResultsFooter ? (
+            <FilteredResultsFooter />
+          ) : null
+        }
         renderItem={({ item }) => {
           if (item.type === 'loading') {
             return <ConversationPreviewSkeleton />

package/src/components/display/__tests__/filter_dropdown.test.tsx

@@ -58,7 +58,7 @@ const options = [
   { id: 'teams', label: 'Teams' },
 ]
 
-const renderFilterDropdown = () => {
+const renderFilterDropdown = ({ showMoreFilters }: { showMoreFilters?: boolean } = {}) => {
   const onSelect = jest.fn()
   const onMoreFilters = jest.fn()
 
@@ -69,6 +69,7 @@ const renderFilterDropdown = () => {
       onSelect={onSelect}
       onMoreFilters={onMoreFilters}
       triggerLabel="Groups"
+      showMoreFilters={showMoreFilters}
     />
   )
 
@@ -95,6 +96,13 @@ describe('FilterDropdown', () => {
     expect(onMoreFilters).not.toHaveBeenCalled()
   })
 
+  it('leaves More filters out when showMoreFilters is false', () => {
+    renderFilterDropdown({ showMoreFilters: false })
+
+    expect(screen.queryByRole('menuitem', { name: 'More filters' })).toBeNull()
+    expect(screen.getAllByRole('menuitem')).toHaveLength(options.length)
+  })
+
   it('calls onMoreFilters for the More filters action', () => {
     const { onSelect, onMoreFilters } = renderFilterDropdown()
 

package/src/components/display/filter_dropdown.tsx

@@ -34,6 +34,7 @@ export interface FilterDropdownProps {
   onSelect: (id: string) => void
   onMoreFilters: () => void
   triggerLabel: string
+  showMoreFilters?: boolean
 }
 
 export function FilterDropdown({
@@ -42,22 +43,22 @@ export function FilterDropdown({
   onSelect,
   onMoreFilters,
   triggerLabel,
+  showMoreFilters = true,
 }: FilterDropdownProps) {
   const styles = useStyles()
 
-  const actions: MenuAction[] = [
-    ...options.map(option => ({
-      id: option.id,
-      title: option.label,
-      state: option.id === selectedId ? ('on' as const) : ('off' as const),
-    })),
-    {
-      id: MORE_FILTERS_ID,
-      title: '',
-      displayInline: true,
-      subactions: [{ id: MORE_FILTERS_ID, title: MORE_FILTERS_LABEL }],
-    },
-  ]
+  const optionActions: MenuAction[] = options.map(option => ({
+    id: option.id,
+    title: option.label,
+    state: option.id === selectedId ? ('on' as const) : ('off' as const),
+  }))
+  const moreFiltersAction: MenuAction = {
+    id: MORE_FILTERS_ID,
+    title: '',
+    displayInline: true,
+    subactions: [{ id: MORE_FILTERS_ID, title: MORE_FILTERS_LABEL }],
+  }
+  const actions = showMoreFilters ? [...optionActions, moreFiltersAction] : optionActions
 
   const handlePressAction = ({ nativeEvent }: MenuActionEvent) => {
     if (nativeEvent.event === MORE_FILTERS_ID) {