@planningcenter/chat-react-native 4.4.1-qa-staging.13 → 4.4.1-qa-staging.14

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

@@ -0,0 +1,289 @@
+import { DefaultTheme, ThemeProvider } from '@react-navigation/native'
+import { QueryClientProvider } from '@tanstack/react-query'
+import { fireEvent, render } from '@testing-library/react-native'
+import React from 'react'
+import { Alert } from 'react-native'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
+import { buildTestQueryClient } from '../../__utils__/query_client'
+import type { ConversationResource } from '../../types'
+import { ConversationDetailsScreen } from '../conversation_details_screen'
+
+const baseConversation = {
+  type: 'Conversation',
+  id: 7,
+  title: 'Youth Group',
+  muted: false,
+  repliesDisabled: false,
+  unreadCount: 0,
+  unreadReaction: false,
+  conversationPreview: null,
+  createdAt: '2026-01-01T00:00:00Z',
+  updatedAt: '2026-01-01T00:00:00Z',
+  badges: [],
+  groups: [],
+  disabled: false,
+  disabledReason: null,
+  disabledMessage: null,
+  memberAbility: {
+    type: 'MemberAbility',
+    canUpdate: true,
+    canDelete: true,
+    canDeleteNonAuthoredMessages: true,
+    leader: true,
+    canReply: true,
+    canMessageAvailableMembers: false,
+  },
+  conversationMembership: { notificationLevelDescription: 'All messages' },
+} as unknown as ConversationResource
+
+const archivedConversation = {
+  ...baseConversation,
+  disabled: true,
+  disabledReason: 'archived',
+  disabledMessage: 'This conversation is archived. Only you and other leaders can unarchive.',
+  memberAbility: { ...baseConversation.memberAbility, canUpdate: false },
+} as ConversationResource
+
+const mockNavigation = {
+  navigate: jest.fn(),
+  dispatch: jest.fn(),
+  goBack: jest.fn(),
+  setOptions: jest.fn(),
+}
+jest.mock('@react-navigation/native', () => ({
+  ...jest.requireActual('@react-navigation/native'),
+  useNavigation: () => mockNavigation,
+}))
+jest.mock('../../hooks/use_api_client', () => ({ useApiClient: () => ({}) }))
+
+let mockConversation: ConversationResource
+const mockArchive = jest.fn()
+const mockSaveTitle = jest.fn()
+jest.mock('../../hooks/use_conversation', () => ({
+  useConversation: () => ({ data: mockConversation }),
+  useConversationArchive: () => ({ setArchived: mockArchive, isPending: false }),
+  useConversationDelete: () => ({ mutate: jest.fn() }),
+  useConversationDisableReplies: () => ({ repliesDisabled: false, setRepliesDisabled: jest.fn() }),
+  useConversationMute: () => ({ muted: false, setMuted: jest.fn() }),
+  useConversationUpdate: () => ({ mutate: mockSaveTitle }),
+}))
+
+let mockEnabledFeatures: string[] = []
+jest.mock('../../hooks/use_features', () => ({
+  ...jest.requireActual('../../hooks/use_features'),
+  useFeatures: () => ({
+    features: [],
+    featureEnabled: (name: string) => mockEnabledFeatures.includes(name),
+  }),
+}))
+
+jest.mock('../../hooks/use_suspense_api', () => ({
+  ...jest.requireActual('../../hooks/use_suspense_api'),
+  useSuspensePaginator: () => ({ data: [], fetchNextPage: jest.fn(), isFetchingNextPage: false }),
+}))
+
+let mockPressDone = () => {}
+jest.mock('../../components/display/platform_modal_header_buttons', () => ({
+  ...jest.requireActual('../../components/display/platform_modal_header_buttons'),
+  useHeaderRight: ({ onPress }: { onPress: () => void }) => {
+    mockPressDone = onPress
+  },
+}))
+jest.mock('../../components/display/conversation_avatar', () => ({
+  ConversationAvatar: () => null,
+}))
+
+const buildConversation = (canArchive: boolean) =>
+  ({
+    type: 'Conversation',
+    id: 7,
+    title: 'Youth Group',
+    memberAbility: { type: 'MemberAbility', canArchive, canDelete: false },
+    groups: [],
+    badges: [],
+  }) as unknown as ConversationResource
+
+const safeAreaMetrics = {
+  frame: { x: 0, y: 0, width: 390, height: 844 },
+  insets: { top: 0, right: 0, bottom: 0, left: 0 },
+}
+
+const renderScreen = () =>
+  render(
+    <QueryClientProvider client={buildTestQueryClient()}>
+      <SafeAreaProvider initialMetrics={safeAreaMetrics}>
+        <ThemeProvider value={DefaultTheme}>
+          <ConversationDetailsScreen route={{ params: { conversation_id: 7 } }} />
+        </ThemeProvider>
+      </SafeAreaProvider>
+    </QueryClientProvider>
+  )
+
+const alertButton = (text: string) => {
+  const buttons = jest.mocked(Alert.alert).mock.calls[0][2] ?? []
+  return buttons.find(button => button.text === text)
+}
+
+describe('ConversationDetailsScreen', () => {
+  beforeEach(() => {
+    mockConversation = baseConversation
+    mockEnabledFeatures = []
+    jest.clearAllMocks()
+  })
+
+  describe('for an active conversation', () => {
+    it('offers mute and the leader settings', () => {
+      mockEnabledFeatures = ['ROLLOUT_custom_conversation_avatars']
+      const { getByText } = renderScreen()
+
+      expect(getByText('Mute')).toBeTruthy()
+      expect(getByText('Only leaders can message')).toBeTruthy()
+      expect(getByText('Update avatar')).toBeTruthy()
+    })
+
+    it('offers notification levels when granular notifications are on', () => {
+      mockEnabledFeatures = ['ROLLOUT_granular_notification_preferences_ui']
+      const { getByText } = renderScreen()
+
+      expect(getByText('Notifications')).toBeTruthy()
+    })
+
+    it('saves the title on done', () => {
+      renderScreen()
+      mockPressDone()
+
+      expect(mockSaveTitle).toHaveBeenCalledWith({ title: 'Youth Group' })
+    })
+  })
+
+  describe('for an archived conversation', () => {
+    beforeEach(() => {
+      mockConversation = archivedConversation
+    })
+
+    it('replaces mute and the leader settings with the archived notice', () => {
+      mockEnabledFeatures = ['ROLLOUT_custom_conversation_avatars']
+      const { getByText, queryByText } = renderScreen()
+
+      expect(
+        getByText('This conversation is archived. Only you and other leaders can unarchive.')
+      ).toBeTruthy()
+      expect(queryByText('Mute')).toBeNull()
+      expect(queryByText('Only leaders can message')).toBeNull()
+      expect(queryByText('Update avatar')).toBeNull()
+      expect(getByText('Delete conversation…')).toBeTruthy()
+    })
+
+    it('falls back to a default notice when the server sends no message', () => {
+      mockConversation = { ...archivedConversation, disabledMessage: null }
+      const { getByText } = renderScreen()
+
+      expect(getByText('This conversation is archived.')).toBeTruthy()
+    })
+
+    it('hides notification levels even when granular notifications are on', () => {
+      mockEnabledFeatures = ['ROLLOUT_granular_notification_preferences_ui']
+      const { queryByText } = renderScreen()
+
+      expect(queryByText('Notifications')).toBeNull()
+    })
+
+    it('locks the title', () => {
+      const { getByDisplayValue } = renderScreen()
+
+      expect(getByDisplayValue('Youth Group').props.editable).toBe(false)
+    })
+
+    it('does not save the title on done', () => {
+      renderScreen()
+      mockPressDone()
+
+      expect(mockSaveTitle).not.toHaveBeenCalled()
+    })
+
+    it('unarchives from the notice for someone who can unarchive', () => {
+      mockEnabledFeatures = ['ROLLOUT_MOBILE_manual_archiving']
+      mockConversation = {
+        ...archivedConversation,
+        memberAbility: { ...archivedConversation.memberAbility!, canUnarchive: true },
+      }
+      const { getByText } = renderScreen()
+
+      fireEvent.press(getByText('Unarchive'))
+
+      expect(mockArchive).toHaveBeenCalledWith(false)
+    })
+  })
+})
+
+describe('ConversationDetailsScreen archive', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+    jest.spyOn(Alert, 'alert').mockImplementation(() => {})
+    mockConversation = buildConversation(true)
+    mockEnabledFeatures = ['ROLLOUT_MOBILE_manual_archiving']
+  })
+
+  afterEach(() => {
+    jest.restoreAllMocks()
+  })
+
+  it('hides archiving when the member cannot archive', () => {
+    mockConversation = buildConversation(false)
+    const { queryByText } = renderScreen()
+
+    expect(queryByText('Archive conversation…')).toBeNull()
+  })
+
+  it.each(['QA_MOBILE_manual_archiving', 'ROLLOUT_MOBILE_manual_archiving'])(
+    'offers archiving with only %s on',
+    flag => {
+      mockEnabledFeatures = [flag]
+      const { getByText } = renderScreen()
+
+      expect(getByText('Archive conversation…')).toBeTruthy()
+    }
+  )
+
+  it('hides archiving when neither mobile flag is on', () => {
+    mockEnabledFeatures = ['ROLLOUT_WEB_manual_archiving']
+    const { queryByText } = renderScreen()
+
+    expect(queryByText('Archive conversation…')).toBeNull()
+  })
+
+  it('asks for confirmation before archiving', () => {
+    const { getByText } = renderScreen()
+
+    fireEvent.press(getByText('Archive conversation…'))
+
+    expect(Alert.alert).toHaveBeenCalledWith(
+      'Archive conversation',
+      'This conversation will be archived for everyone. Only leaders can access and unarchive conversations.',
+      expect.any(Array)
+    )
+    expect(mockArchive).not.toHaveBeenCalled()
+  })
+
+  it('archives once confirmed and stays on the details', () => {
+    const { getByText } = renderScreen()
+    fireEvent.press(getByText('Archive conversation…'))
+
+    alertButton('Archive')?.onPress?.()
+
+    expect(mockArchive).toHaveBeenCalledTimes(1)
+    expect(mockArchive).toHaveBeenCalledWith(true)
+    expect(mockNavigation.dispatch).not.toHaveBeenCalled()
+    expect(mockNavigation.goBack).not.toHaveBeenCalled()
+    expect(mockNavigation.navigate).not.toHaveBeenCalled()
+  })
+
+  it('does nothing when the confirmation is cancelled', () => {
+    const { getByText } = renderScreen()
+    fireEvent.press(getByText('Archive conversation…'))
+
+    alertButton('Cancel')?.onPress?.()
+
+    expect(mockArchive).not.toHaveBeenCalled()
+  })
+})

package/src/screens/attachment_actions/__tests__/attachment_actions_screen.test.tsx

@@ -0,0 +1,72 @@
+import { HeaderHeightContext } from '@react-navigation/elements'
+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 type { ConversationResource } from '../../../types'
+import { AttachmentActionsScreen, AttachmentActionsScreenProps } from '../attachment_actions_screen'
+
+let mockConversation = { id: 1, disabled: false } as ConversationResource
+
+jest.mock('@react-navigation/native', () => ({
+  ...jest.requireActual('@react-navigation/native'),
+  useNavigation: () => ({ goBack: jest.fn() }),
+}))
+jest.mock('../../../hooks/use_conversation', () => ({
+  useConversation: () => ({ data: mockConversation }),
+}))
+jest.mock('../hooks/useDeleteAttachment', () => ({
+  useDeleteAttachment: () => ({ handleDeleteAttachment: jest.fn() }),
+}))
+
+const safeAreaMetrics = {
+  frame: { x: 0, y: 0, width: 390, height: 844 },
+  insets: { top: 0, right: 0, bottom: 0, left: 0 },
+}
+
+const renderScreen = (params: Partial<AttachmentActionsScreenProps['route']['params']> = {}) => {
+  const route = {
+    key: 'AttachmentActions',
+    name: 'AttachmentActions',
+    params: {
+      attachmentId: 'a1',
+      attachmentContentType: 'image/png',
+      attachmentUrl: 'https://example.com/a1.png',
+      conversation_id: 1,
+      canDeleteNonAuthoredMessages: false,
+      myMessage: true,
+      ...params,
+    },
+  } as AttachmentActionsScreenProps['route']
+
+  return render(
+    <SafeAreaProvider initialMetrics={safeAreaMetrics}>
+      <ThemeProvider value={DefaultTheme}>
+        <HeaderHeightContext.Provider value={0}>
+          <AttachmentActionsScreen route={route} />
+        </HeaderHeightContext.Provider>
+      </ThemeProvider>
+    </SafeAreaProvider>
+  )
+}
+
+describe('AttachmentActionsScreen', () => {
+  beforeEach(() => {
+    mockConversation = { id: 1, disabled: false } as ConversationResource
+  })
+
+  it('offers Delete on my own attachment', () => {
+    const { getByText } = renderScreen()
+
+    expect(getByText('Delete image')).toBeTruthy()
+  })
+
+  it('hides Delete when the conversation is disabled', () => {
+    mockConversation = { id: 1, disabled: true, disabledReason: 'locked' } as ConversationResource
+
+    const { queryByText, getByText } = renderScreen({ canDeleteNonAuthoredMessages: true })
+
+    expect(queryByText('Delete image')).toBeNull()
+    expect(getByText('Open in browser')).toBeTruthy()
+  })
+})

package/src/screens/attachment_actions/attachment_actions_screen.tsx

@@ -2,6 +2,7 @@ import { StaticScreenProps, useNavigation } from '@react-navigation/native'
 import React, { useCallback } from 'react'
 import { Alert, Linking, StyleSheet } from 'react-native'
 import FormSheet, { getFormSheetScreenOptions } from '../../components/primitive/form_sheet'
+import { useConversation } from '../../hooks/use_conversation'
 import { useDeleteAttachment } from './hooks/useDeleteAttachment'
 
 export const AttachmentActionsScreenOptions = getFormSheetScreenOptions({
@@ -28,8 +29,9 @@ export function AttachmentActionsScreen({ route }: AttachmentActionsScreenProps)
     myMessage,
   } = route.params
 
+  const { data: conversation } = useConversation({ conversation_id }, { refetchOnMount: false })
   const attachmentName = getAttachmentLabelName(attachmentContentType)
-  const canDelete = myMessage || canDeleteNonAuthoredMessages
+  const canDelete = !conversation.disabled && (myMessage || canDeleteNonAuthoredMessages)
   const styles = useStyles()
 
   const { handleDeleteAttachment } = useDeleteAttachment({

package/src/screens/conversation_details_screen.tsx

@@ -43,6 +43,7 @@ import { ButtonAppearanceUnion } from '../components/display/utils/button_colors
 import { useSuspensePaginator, useTheme } from '../hooks'
 import {
   useConversation,
+  useConversationArchive,
   useConversationDelete,
   useConversationDisableReplies,
   useConversationMute,
@@ -50,9 +51,11 @@ import {
 } from '../hooks/use_conversation'
 import { availableFeatures, useFeatures } from '../hooks/use_features'
 import { usePreviewAvatarDiameter } from '../hooks/use_preview_avatar_diameter'
+import { useUnarchiveConversationAction } from '../hooks/use_unarchive_conversation_action'
 import { type ConversationResource, MemberResource, isDefined } from '../types'
 import { GroupResource } from '../types/resources/group_resource'
 import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../utils'
+import { archivedConversationMessage, isArchivedConversation } from '../utils/archived_conversation'
 import { genderDisplayLabel } from '../utils/gender_display_label'
 import { tokens } from '../vendor/tapestry/tokens'
 // =========================================
@@ -105,9 +108,14 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
   const { repliesDisabled, setRepliesDisabled } = useConversationDisableReplies(route.params)
   const { mutate: saveTitle } = useConversationUpdate(route.params)
   const { mutate: deleteConversation } = useConversationDelete(route.params)
+  const { setArchived, isPending: isArchiving } = useConversationArchive(route.params)
+  const unarchiveAction = useUnarchiveConversationAction(conversation)
   const { featureEnabled } = useFeatures()
   const granularNotificationsEnabled = featureEnabled(availableFeatures.granular_notifications_ui)
   const customAvatarsEnabled = featureEnabled(availableFeatures.custom_conversation_avatars)
+  const manualArchivingEnabled =
+    featureEnabled(availableFeatures.manual_archiving) ||
+    featureEnabled(availableFeatures.manual_archiving_rollout)
   const showGenderFilter =
     featureEnabled(availableFeatures.gender_specific_conversations) && !!conversation.genderOption
   const genderLabel = conversation.genderOption ? genderDisplayLabel(conversation.genderOption) : ''
@@ -118,8 +126,10 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
 
   const notificationLevelDescription =
     conversation?.conversationMembership?.notificationLevelDescription
+  const archived = isArchivedConversation(conversation)
   const canUpdate = conversation.memberAbility?.canUpdate || false
   const canDelete = conversation.memberAbility?.canDelete || false
+  const canArchive = manualArchivingEnabled && (conversation.memberAbility?.canArchive || false)
   const isLeader = conversation.memberAbility?.leader || false
   const isDisabled = conversation.disabled ?? false
   const showAdultRequirementNotice = isDisabled && conversation.disabledReason === 'safety_check'
@@ -203,6 +213,23 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
     )
   }, [deleteConversation, navigation, title])
 
+  const handleArchive = useCallback(() => {
+    Alert.alert(
+      'Archive conversation',
+      'This conversation will be archived for everyone. Only leaders can access and unarchive conversations.',
+      [
+        {
+          text: 'Cancel',
+          style: 'cancel',
+        },
+        {
+          text: 'Archive',
+          onPress: () => setArchived(true),
+        },
+      ]
+    )
+  }, [setArchived])
+
   const HeaderTitle = useCallback(
     (props: HeaderTitleProps) => {
       return (
@@ -226,7 +253,7 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
     icon: 'general.check',
     accessibilityLabel: 'Done',
     onPress: () => {
-      saveTitle({ title: trimmedTitle || conversation.title })
+      if (canUpdate) saveTitle({ title: trimmedTitle || conversation.title })
       navigation.goBack()
     },
   })
@@ -275,25 +302,47 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
       showBottomBorder: true,
       sectionInnerStyle: styles.sectionInnerHeaderWithBottomBorder,
     },
-    granularNotificationsEnabled
+    archived
       ? {
-          type: SectionTypes.navigableSetting,
+          type: SectionTypes.view,
           data: {
-            title: 'Notifications',
-            subtitle: notificationLevelDescription,
-            onPress: () =>
-              navigation.navigate('ConversationNotificationLevelSelect', { conversation_id }),
+            children: (
+              <>
+                <Text variant="tertiary">{archivedConversationMessage(conversation)}</Text>
+                {unarchiveAction && (
+                  <Button
+                    variant="fill"
+                    size="lg"
+                    title={unarchiveAction.label}
+                    onPress={unarchiveAction.onPress}
+                    loading={unarchiveAction.loading}
+                    style={styles.unarchiveButton}
+                  />
+                )}
+              </>
+            ),
           },
           showBottomBorder: true,
         }
-      : {
-          type: SectionTypes.setting,
-          data: {
-            title: 'Mute',
-            rightItem: <Switch value={muted} onValueChange={value => setMuted(value)} />,
+      : granularNotificationsEnabled
+        ? {
+            type: SectionTypes.navigableSetting,
+            data: {
+              title: 'Notifications',
+              subtitle: notificationLevelDescription,
+              onPress: () =>
+                navigation.navigate('ConversationNotificationLevelSelect', { conversation_id }),
+            },
+            showBottomBorder: true,
+          }
+        : {
+            type: SectionTypes.setting,
+            data: {
+              title: 'Mute',
+              rightItem: <Switch value={muted} onValueChange={value => setMuted(value)} />,
+            },
+            showBottomBorder: true,
           },
-          showBottomBorder: true,
-        },
     {
       type: canUpdate ? SectionTypes.setting : SectionTypes.hidden,
       data: {
@@ -304,6 +353,15 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
       },
       showBottomBorder: true,
     },
+    {
+      type: canArchive ? SectionTypes.setting : SectionTypes.hidden,
+      data: {
+        title: 'Archive conversation…',
+        disabled: isArchiving,
+        onPress: handleArchive,
+      },
+      showBottomBorder: canDelete,
+    },
     {
       type: canDelete ? SectionTypes.setting : SectionTypes.hidden,
       data: {
@@ -557,6 +615,7 @@ interface SettingRowProps {
   subtitle?: string
   rightItemStyle?: ViewStyle
   appearance?: ButtonAppearanceUnion
+  disabled?: boolean
   onPress?: () => void
 }
 
@@ -569,6 +628,7 @@ function SettingRow({
   rightItem,
   rightItemStyle = {},
   appearance,
+  disabled,
   onPress,
 }: SettingRowProps) {
   const styles = useStyles()
@@ -579,6 +639,7 @@ function SettingRow({
         style={[styles.settingRow, style]}
         textStyle={buttonTextStyle}
         appearance={appearance}
+        disabled={disabled}
         onPress={onPress}
       >
         {title}
@@ -778,6 +839,9 @@ const useStyles = ({ isStart, isEnd }: { isStart?: boolean; isEnd?: boolean } =
     deleteButtonText: {
       fontWeight: 'normal',
     },
+    unarchiveButton: {
+      marginTop: 12,
+    },
     settingRowText: {
       lineHeight: 20,
     },

package/src/screens/conversation_screen.tsx

@@ -40,6 +40,7 @@ import {
   usePublishProductAnalyticsEvent,
 } from '../hooks/use_product_analytics'
 import { useRestAwayFromDismissEdge } from '../hooks/use_rest_away_from_dismiss_edge'
+import { useUnarchiveConversationAction } from '../hooks/use_unarchive_conversation_action'
 import { useVideoModerationJoltEvents } from '../hooks/use_video_moderation_jolt_events'
 import { ConversationResource } from '../types/resources/conversation'
 import { ConversationBadgeResource } from '../types/resources/conversation_badge'
@@ -265,12 +266,13 @@ function ConversationBottomBar({
   onBeforeSubmit,
 }: ConversationBottomBarProps) {
   const messageLink = useMessageAvailableMembersAction(conversation)
+  const unarchiveAction = useUnarchiveConversationAction(conversation)
 
   if (conversation.disabled)
     return (
       <ConversationDisabledBanner
         message={conversation.disabledMessage ?? null}
-        messageLink={messageLink}
+        action={unarchiveAction ?? messageLink}
       />
     )
   if (!canReply) return <MemberMessagesDisabledBanner />

package/src/screens/design_system_screen.tsx

@@ -12,6 +12,7 @@ import {
   Button,
   ConversationAvatar,
   EmojiAvatar,
+  FilterDropdown,
   IconAvatar,
   ToggleButton,
   Heading,
@@ -82,6 +83,14 @@ const personChild = {
 
 const buttonPress = () => Alert.alert('Button clicked')
 
+const filterDropdownOptions = [
+  { id: 'all', label: 'All conversations' },
+  { id: 'groups', label: 'Groups' },
+  { id: 'teams', label: 'Teams' },
+  { id: 'dms', label: 'DMs' },
+  { id: 'unread', label: 'Unread' },
+]
+
 // =================================
 // ====== Component ================
 // =================================
@@ -213,6 +222,7 @@ function HeadingTextSection({ isLast }: SectionProps) {
 function PressablesSection({ isLast }: SectionProps) {
   const styles = useStyles()
   const [filterSelected, setFilterSelected] = useState('Groups')
+  const [dropdownSelected, setDropdownSelected] = useState('all')
 
   return (
     <CollapsableSection title="Pressables" isLast={isLast}>
@@ -388,6 +398,22 @@ function PressablesSection({ isLast }: SectionProps) {
           />
         </Row>
       </Group>
+      <Group
+        title="FilterDropdown"
+        description="Trigger that opens the host's native menu of filter options plus a More filters action. Needs a menu adapter."
+      >
+        <Row style={styles.alignRowLeft}>
+          <FilterDropdown
+            options={filterDropdownOptions}
+            selectedId={dropdownSelected}
+            onSelect={setDropdownSelected}
+            onMoreFilters={() => Alert.alert('More filters')}
+            triggerLabel={
+              filterDropdownOptions.find(option => option.id === dropdownSelected)?.label ?? ''
+            }
+          />
+        </Row>
+      </Group>
       <Group
         title="IconButton"
         description="Supports different appearances, sizes, along with loading & disabled states. Use `iconStyle` for custom colors and font sizes. Requires `accessibilityLabel` as icon's don't provide context to screen readers."