@planningcenter/chat-react-native 3.42.3-qa-856.0 → 3.42.3-qa-858.0

package/src/components/display/platform_modal_header_buttons.tsx

@@ -1,15 +1,15 @@
-import { HeaderBackButton, HeaderButton } from '@react-navigation/elements'
+import { HeaderBackButton, HeaderButton, PlatformPressable } from '@react-navigation/elements'
 import { useNavigation } from '@react-navigation/native'
 import type {
-  NativeStackHeaderLeftProps,
-  NativeStackHeaderRightProps,
+  NativeStackHeaderItemProps,
   NativeStackNavigationOptions,
 } from '@react-navigation/native-stack'
 import { useLayoutEffect } from 'react'
 import { ColorValue, Platform, StyleSheet } from 'react-native'
-import { useTheme } from '../../hooks'
-import { isLiquidGlassEnabled } from '../../utils/liquid_glass'
-import { Icon } from './icon'
+import type { SFSymbol } from 'sf-symbols-typescript'
+import { useFontScale, useTheme } from '../../hooks'
+import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'
+import { Icon, type IconString } from './icon'
 import { TextButton } from './text_button'
 
 interface HeaderTextButtonProps {
@@ -72,14 +72,10 @@ export const HeaderDismissButton = ({
 
 const createTextHeaderRight =
   ({ onPress, title, disabled }: HeaderTextButtonProps) =>
-  (props: NativeStackHeaderRightProps) => (
+  (props: NativeStackHeaderItemProps) => (
     <HeaderTextButton {...props} onPress={onPress} title={title} disabled={disabled} />
   )
 
-const createDismissHeaderLeft =
-  ({ onPress, title }: { onPress: () => void; title: string }) =>
-  () => <HeaderDismissButton title={title} onPress={onPress} />
-
 export type OptionsDecorator = (
   options: NativeStackNavigationOptions
 ) => NativeStackNavigationOptions
@@ -95,9 +91,6 @@ interface TextButtonDecoratorProps {
   disabled?: boolean
 }
 
-// Native bar items pick up liquid glass on iOS 26; hosts on an older
-// react-navigation ignore the unstable option and keep using the
-// headerRight/headerLeft fallbacks, as does Android.
 export const withRightText =
   ({ text, onPress, disabled }: TextButtonDecoratorProps): OptionsDecorator =>
   options => ({
@@ -106,95 +99,159 @@ export const withRightText =
     unstable_headerRightItems: () => [{ type: 'button' as const, label: text, onPress, disabled }],
   })
 
-export const withLeftText =
-  ({ text, onPress }: TextButtonDecoratorProps): OptionsDecorator =>
-  options => ({
-    ...options,
-    headerLeft: createDismissHeaderLeft({ title: text, onPress }),
-    unstable_headerLeftItems: () => [{ type: 'button' as const, label: text, onPress }],
-  })
+const HEADER_ICON_SIZE = 17
+const HEADER_GLASS_BUTTON_SIZE = 44
+const HEADER_BAR_INSET = 16
+const HEADER_SLOT_GAP = 12
 
-const renderCloseImage = ({ tintColor }: { tintColor: string }) => (
-  <Icon name="general.x" size={18} color={tintColor} />
-)
+export const useHeaderSlotReserve = (): number => {
+  const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER_LANDMARK })
 
-const createCloseHeaderRight =
-  ({ onPress }: { onPress: () => void }) =>
-  (props: NativeStackHeaderRightProps) => (
-    <HeaderBackButton backImage={renderCloseImage} onPress={onPress} {...props} />
+  return HEADER_BAR_INSET + HEADER_GLASS_BUTTON_SIZE * fontScale + HEADER_SLOT_GAP
+}
+
+const HEADER_FALLBACK_HIT_SLOP = 14
+
+const iconStyles = StyleSheet.create({
+  disabled: {
+    opacity: 0.4,
+  },
+  fallbackButton: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 8,
+  },
+  fallbackButtonLeft: {
+    marginRight: Platform.select({ android: 16, default: 0 }),
+  },
+})
+
+const SF_SYMBOL_NAMES: Partial<Record<IconString, SFSymbol>> = {
+  'general.x': 'xmark',
+  'general.check': 'checkmark',
+  'general.upArrow': 'arrow.up',
+  'general.leftChevron': 'chevron.left',
+}
+
+const sfSymbolFor = (icon: IconString): SFSymbol => {
+  const name = SF_SYMBOL_NAMES[icon]
+
+  if (!name) throw new Error(`No SF Symbol mapped for icon "${icon}" — add one to SF_SYMBOL_NAMES.`)
+
+  return name
+}
+
+export interface HeaderIconProps {
+  icon: IconString
+  accessibilityLabel: string
+  onPress: () => void
+  disabled?: boolean
+  prominent?: boolean
+  tintColor?: ColorValue
+}
+
+const createHeaderIconItem = ({
+  icon,
+  accessibilityLabel,
+  onPress,
+  disabled,
+  prominent,
+  tintColor,
+}: HeaderIconProps) => ({
+  type: 'button' as const,
+  label: '',
+  accessibilityLabel,
+  onPress,
+  disabled,
+  icon: { type: 'sfSymbol' as const, name: sfSymbolFor(icon) },
+  ...(prominent ? { variant: 'prominent' as const, tintColor } : {}),
+})
+
+const createHeaderIconElement =
+  (position: 'left' | 'right') =>
+  ({ icon, accessibilityLabel, onPress, disabled, tintColor }: HeaderIconProps) =>
+  () => (
+    <PlatformPressable
+      onPress={onPress}
+      disabled={disabled}
+      hitSlop={HEADER_FALLBACK_HIT_SLOP}
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      style={[
+        iconStyles.fallbackButton,
+        position === 'left' && iconStyles.fallbackButtonLeft,
+        disabled && iconStyles.disabled,
+      ]}
+    >
+      <Icon name={icon} size={HEADER_ICON_SIZE} color={tintColor} />
+    </PlatformPressable>
   )
 
-// The native slot takes only SF Symbols or bundled rasters — we have no way
-// to systematize rasterizing our SVG icon library, and xmark matches
-// general.x closely. The fallback keeps our icon.
-export const withRightClose =
-  ({ onPress }: { onPress: () => void }): OptionsDecorator =>
+export const withRightIcon =
+  (props: HeaderIconProps): OptionsDecorator =>
   options => ({
     ...options,
-    headerRight: createCloseHeaderRight({ onPress }),
-    unstable_headerRightItems: () => [
-      {
-        type: 'button' as const,
-        label: 'Close',
-        icon: { type: 'sfSymbol' as const, name: 'xmark' as const },
-        onPress,
-      },
-    ],
+    headerRight: createHeaderIconElement('right')(props),
+    unstable_headerRightItems: () => [createHeaderIconItem(props)],
   })
 
-// The default back icon reserves trailing space for a label that
-// displayMode="minimal" never shows; a custom image skips it so the glass
-// capsule hugs the glyph.
-const renderGlassBackImage = ({ tintColor }: { tintColor: string }) => (
-  <Icon name="general.leftChevron" size={18} color={tintColor} />
-)
+export const withLeftIcon =
+  (props: HeaderIconProps): OptionsDecorator =>
+  options => ({
+    ...options,
+    headerLeft: createHeaderIconElement('left')(props),
+    unstable_headerLeftItems: () => [createHeaderIconItem(props)],
+  })
+
+export const withRightClose = ({ onPress }: { onPress: () => void }) =>
+  withRightIcon({ icon: 'general.x', accessibilityLabel: 'Close', onPress })
+
+export const withLeftClose = ({ onPress }: { onPress: () => void }) =>
+  withLeftIcon({ icon: 'general.x', accessibilityLabel: 'Close', onPress })
 
-// The iOS 26 glass capsule manages its own insets — negative margins clip
-// the button against the capsule edge.
-export const createMinimalHeaderBackButton =
+export const withRightDone = ({ onPress }: { onPress: () => void }) =>
+  withRightIcon({ icon: 'general.check', accessibilityLabel: 'Done', onPress })
+
+const createMinimalHeaderBackElement =
   ({ onPress }: { onPress: () => void }) =>
-  (props: NativeStackHeaderLeftProps) => (
+  (props: NativeStackHeaderItemProps) => (
     <HeaderBackButton
-      style={
-        isLiquidGlassEnabled()
-          ? undefined
-          : {
-              marginLeft: Platform.select({ ios: -8, default: -3 }),
-              marginRight: Platform.select({ ios: 0, default: 30 }),
-            }
-      }
-      backImage={isLiquidGlassEnabled() ? renderGlassBackImage : undefined}
+      style={Platform.select({
+        ios: { marginLeft: -8 },
+        default: { marginLeft: -3, marginRight: 30 },
+      })}
       displayMode="minimal"
       onPress={onPress}
       {...props}
     />
   )
 
-// Under glass the native minimal back button suffices; pre-26 needs the
-// custom button and its layout nudges.
 export const withMinimalBack =
   ({ onPress }: { onPress: () => void }): OptionsDecorator =>
   options => ({
     ...options,
-    ...(isLiquidGlassEnabled() ? {} : { headerLeft: createMinimalHeaderBackButton({ onPress }) }),
+    headerLeft: createMinimalHeaderBackElement({ onPress }),
+    unstable_headerLeftItems: () => [
+      createHeaderIconItem({ icon: 'general.leftChevron', accessibilityLabel: 'Back', onPress }),
+    ],
   })
 
-interface UseHeaderRightOptions {
-  title: string
+type UseHeaderRightOptions = {
   onPress: () => void
   disabled?: boolean
   enabled?: boolean
-}
+} & (
+  | (Omit<HeaderIconProps, 'tintColor'> & { title?: never })
+  | { title: string; icon?: never; accessibilityLabel?: never; prominent?: never }
+)
 
-// For screens whose header button depends on live state (form validity,
-// mutation callbacks). Static buttons belong in the navigator options.
-export const useHeaderRight = ({
-  title,
-  onPress,
-  disabled,
-  enabled = true,
-}: UseHeaderRightOptions) => {
+export const useHeaderRight = (options: UseHeaderRightOptions) => {
   const navigation = useNavigation()
+  const { colors } = useTheme()
+  const { onPress, disabled, enabled = true } = options
+  const icon = options.icon
+  const label = options.icon !== undefined ? options.accessibilityLabel : options.title
+  const prominent = options.icon !== undefined ? options.prominent : undefined
 
   useLayoutEffect(() => {
     if (!enabled) {
@@ -202,8 +259,19 @@ export const useHeaderRight = ({
       return
     }
 
-    navigation.setOptions(withRightText({ text: title, onPress, disabled })({}))
-  }, [disabled, enabled, navigation, onPress, title])
+    const decorate = icon
+      ? withRightIcon({
+          icon,
+          accessibilityLabel: label,
+          onPress,
+          disabled,
+          prominent,
+          tintColor: prominent ? colors.interaction : undefined,
+        })
+      : withRightText({ text: label, onPress, disabled })
+
+    navigation.setOptions(decorate({}))
+  }, [colors.interaction, disabled, enabled, icon, label, navigation, onPress, prominent])
 }
 
 const useStyles = () => {

package/src/components/primitive/form_sheet.tsx

@@ -12,7 +12,7 @@ import {
 } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { useTheme } from '../../hooks'
-import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'
+import { isLiquidGlassEnabled, MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'
 import type { ButtonProps, TextButtonProps } from '../display'
 import { Button, Heading, Icon, IconString, Text, TextButton } from '../display'
 
@@ -35,7 +35,7 @@ export const getFormSheetScreenOptions = ({
   presentation: 'formSheet',
   headerShown: false,
   sheetAllowedDetents,
-  sheetCornerRadius: 16,
+  sheetCornerRadius: isLiquidGlassEnabled() ? undefined : 16,
   sheetGrabberVisible: true,
   headerTitle,
   ...rest,

package/src/navigation/index.tsx

@@ -2,15 +2,15 @@ import { StaticParamList } from '@react-navigation/native'
 import {
   createNativeStackNavigator,
   NativeStackHeaderRightProps,
+  NativeStackNavigationOptions,
 } from '@react-navigation/native-stack'
 import { CardStyleInterpolators } from '@react-navigation/stack'
 import React from 'react'
 import {
   composeOptions,
-  createMinimalHeaderBackButton,
   withMinimalBack,
   withRightClose,
-  withRightText,
+  withRightDone,
 } from '../components/display/platform_modal_header_buttons'
 import { useDirectMessagesEnabled, useQualifiedByAge } from '../hooks'
 import {
@@ -79,13 +79,17 @@ import {
   SystemMessagePeopleScreenOptions,
 } from '../screens/system_message_people_screen'
 import { TeamConversationScreen } from '../screens/team_conversation_screen'
+import { isLiquidGlassEnabled } from '../utils/liquid_glass'
 import { ScreenLayoutWithChatAccessGate } from './screenLayout'
 
+const globalScreenOptions: () => NativeStackNavigationOptions = () => ({
+  headerBackButtonDisplayMode: 'minimal',
+  ...(isLiquidGlassEnabled() ? { headerShadowVisible: false } : {}),
+})
+
 export const NewConversationStack = createNativeStackNavigator({
   initialRouteName: 'ConversationNewEntry',
-  screenOptions: {
-    headerBackButtonDisplayMode: 'minimal',
-  },
+  screenOptions: globalScreenOptions,
   screenLayout: ScreenLayoutWithChatAccessGate,
   screens: {
     ConversationNewEntry: {
@@ -96,7 +100,7 @@ export const NewConversationStack = createNativeStackNavigator({
             title: 'New conversation',
             headerBackVisible: false,
           },
-          withRightText({ text: 'Cancel', onPress: navigation.goBack })
+          withRightClose({ onPress: navigation.goBack })
         ),
     },
     ConversationSelectGroupRecipients: {
@@ -106,8 +110,7 @@ export const NewConversationStack = createNativeStackNavigator({
           {
             title: 'New conversation',
           },
-          withRightText({
-            text: 'Cancel',
+          withRightClose({
             onPress: () => navigation.popTo('Conversations', route.params),
           })
         ),
@@ -119,8 +122,7 @@ export const NewConversationStack = createNativeStackNavigator({
           {
             title: 'New conversation',
           },
-          withRightText({
-            text: 'Cancel',
+          withRightClose({
             onPress: () => navigation.popTo('Conversations', route.params),
           })
         ),
@@ -133,8 +135,7 @@ export const NewConversationStack = createNativeStackNavigator({
           {
             title: 'New conversation',
           },
-          withRightText({
-            text: 'Cancel',
+          withRightClose({
             onPress: () => navigation.popTo('Conversations', route.params),
           })
         ),
@@ -151,8 +152,7 @@ export const NewConversationStack = createNativeStackNavigator({
             title: 'New conversation',
             headerLeft: () => null,
           },
-          withRightText({
-            text: 'Cancel',
+          withRightClose({
             onPress: () => {
               const { chat_group_graph_id, group_source_app_name } =
                 route.params as ConversationSelectRecipientsParams
@@ -169,9 +169,7 @@ export const NewConversationStack = createNativeStackNavigator({
 })
 
 export const ChatStack = createNativeStackNavigator({
-  screenOptions: {
-    headerBackButtonDisplayMode: 'minimal',
-  },
+  screenOptions: globalScreenOptions,
   screenLayout: ScreenLayoutWithChatAccessGate,
   screens: {
     Conversations: {
@@ -210,19 +208,19 @@ export const ChatStack = createNativeStackNavigator({
                 </ConversationScreenTitle>
               )
             },
-            headerLeft: createMinimalHeaderBackButton({
-              onPress: () => {
-                const params = route.params as ConversationRouteProps
-                if ((params as ConversationFiltersParams)?.chat_group_graph_id) {
-                  // Ensure that conversations with a graph id pass them back to the conversation list
-                  const { chat_group_graph_id } = params
-                  navigation.popTo('Conversations', { chat_group_graph_id })
-                } else {
-                  navigation.goBack()
-                }
-              },
-            }),
           },
+          withMinimalBack({
+            onPress: () => {
+              const params = route.params as ConversationRouteProps
+              if ((params as ConversationFiltersParams)?.chat_group_graph_id) {
+                // Ensure that conversations with a graph id pass them back to the conversation list
+                const { chat_group_graph_id } = params
+                navigation.popTo('Conversations', { chat_group_graph_id })
+              } else {
+                navigation.goBack()
+              }
+            },
+          }),
           withRightClose({ onPress: () => navigation.getParent()?.goBack() })
         ),
     },
@@ -251,7 +249,7 @@ export const ChatStack = createNativeStackNavigator({
             presentation: 'modal',
             title: 'Conversation details',
           },
-          withRightText({ text: 'Done', onPress: navigation.goBack })
+          withRightDone({ onPress: navigation.goBack })
         ),
     },
     AvatarPicker: {
@@ -261,46 +259,41 @@ export const ChatStack = createNativeStackNavigator({
     ChatSettings: {
       screen: SettingsScreen,
       options: ({ navigation }) =>
-        composeOptions(
-          {
-            title: 'Chat settings',
-            headerBackVisible: false,
-          },
-          withRightText({ text: 'Done', onPress: navigation.goBack })
-        ),
+        composeOptions({ title: 'Chat settings' }, withMinimalBack({ onPress: navigation.goBack })),
     },
     NotificationSettings: {
       screen: NotificationSettingsScreen,
       options: ({ navigation }) =>
-        composeOptions(
-          {
-            title: 'Chat',
-            headerBackVisible: false,
-          },
-          withRightText({ text: 'Done', onPress: navigation.goBack })
-        ),
+        navigation.getState().index === 0
+          ? composeOptions(
+              { title: 'Chat notifications' },
+              withRightClose({ onPress: navigation.goBack })
+            )
+          : composeOptions(
+              { title: 'Chat notifications' },
+              withMinimalBack({ onPress: navigation.goBack })
+            ),
     },
     PreferredAppSelection: {
       screen: PreferredAppSelectionScreen,
-      options: {
-        title: 'Preferred app',
-      },
+      options: ({ navigation }) =>
+        composeOptions({ title: 'Preferred app' }, withMinimalBack({ onPress: navigation.goBack })),
     },
     GroupNotificationSettings: {
       screen: GroupNotificationSettingsScreen,
       options: ({ route, navigation }) => {
         const title = (route.params as { title?: string })?.title || 'Group Settings'
 
-        // Done only shows when this is the entry screen (e.g. deep links);
-        // deeper in the stack the back button covers dismissal.
+        // The dismiss button only shows when this is the entry screen (e.g.
+        // deep links); deeper in the stack the back button covers dismissal.
         return navigation.getState().index === 0
           ? composeOptions(
               {
                 title,
               },
-              withRightText({ text: 'Done', onPress: navigation.goBack })
+              withRightClose({ onPress: navigation.goBack })
             )
-          : { title }
+          : composeOptions({ title }, withMinimalBack({ onPress: navigation.goBack }))
       },
     },
     GroupNotificationLevelSelect: {
@@ -328,7 +321,7 @@ export const ChatStack = createNativeStackNavigator({
             title: 'New conversation',
             headerLeft: () => null,
           },
-          withRightText({ text: 'Cancel', onPress: () => navigation.getParent()?.goBack() })
+          withRightClose({ onPress: () => navigation.getParent()?.goBack() })
         ),
     },
     SendGiphy: {
@@ -377,7 +370,7 @@ export const ChatStack = createNativeStackNavigator({
             headerBackVisible: false,
             presentation: 'modal',
           },
-          withRightText({ text: 'Close', onPress: navigation.goBack })
+          withRightClose({ onPress: navigation.goBack })
         ),
     },
     NotFound: {

package/src/screens/bug_report_screen.tsx

@@ -28,7 +28,7 @@ import {
   composeOptions,
   HeaderDismissButton,
   useHeaderRight,
-  withLeftText,
+  withLeftClose,
 } from '../components/display/platform_modal_header_buttons'
 import { VideoAttachmentPreview } from '../components/display/video_attachment_preview'
 import { DefaultLoading } from '../components/page/loading'
@@ -60,7 +60,7 @@ export const BugReportScreenOptions = ({
 }: NativeStackScreenProps<any>): NativeStackNavigationOptions =>
   composeOptions(
     { presentation: 'modal', title: 'Report a bug' },
-    withLeftText({ text: 'Cancel', onPress: () => navigation.goBack() })
+    withLeftClose({ onPress: () => navigation.goBack() })
   )
 
 interface Attachment {
@@ -158,7 +158,13 @@ export function BugReportScreen() {
     return ImagePicker.openImageLibraryAsync().then(result => uploadImagePickerResult(result))
   }
 
-  useHeaderRight({ title: 'Submit', onPress: handleSubmit, disabled: !formValid })
+  useHeaderRight({
+    icon: 'general.upArrow',
+    accessibilityLabel: 'Submit',
+    prominent: true,
+    onPress: handleSubmit,
+    disabled: !formValid,
+  })
 
   if (status === 'pending') {
     return (

package/src/screens/conversation_details_screen.tsx

@@ -223,7 +223,8 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
   )
 
   useHeaderRight({
-    title: 'Done',
+    icon: 'general.check',
+    accessibilityLabel: 'Done',
     onPress: () => {
       saveTitle({ title: trimmedTitle || conversation.title })
       navigation.goBack()

package/src/screens/conversation_screen.tsx

@@ -9,7 +9,7 @@ import {
   useRoute,
 } from '@react-navigation/native'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import { FlatList, Platform, StyleSheet, View } from 'react-native'
+import { FlatList, Platform, StyleSheet, useWindowDimensions, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Badge, Icon, Text } from '../components'
 import { ConversationStartBanner } from '../components/conversation/conversation_start_banner'
@@ -25,6 +25,7 @@ import { ReplyShadowMessage } from '../components/conversation/reply_shadow_mess
 import { SystemMessage } from '../components/conversation/system_message'
 import { TypingIndicator } from '../components/conversation/typing_indicator'
 import { KeyboardView } from '../components/display/keyboard_view'
+import { useHeaderSlotReserve } from '../components/display/platform_modal_header_buttons'
 import BlankState from '../components/primitive/blank_state_primitive'
 import { ConversationContextProvider } from '../contexts/conversation_context'
 import { useTheme } from '../hooks'
@@ -374,11 +375,15 @@ export const ConversationScreenTitle = ({
 }
 
 const usePressableHeaderStyle = () => {
+  const { width } = useWindowDimensions()
+  const slotReserve = useHeaderSlotReserve()
+  const headerContainerStyle = { maxWidth: width - slotReserve * 2 }
+
   return StyleSheet.create({
     container: {
       alignItems: Platform.select({ android: 'flex-start', default: 'center' }),
-      marginRight: Platform.select({ ios: 20, default: 16 }),
       flex: 1,
+      ...headerContainerStyle,
     },
     titleWrapper: {
       alignItems: 'center',

package/src/screens/message_report_screen.tsx

@@ -10,7 +10,7 @@ import { Spinner, Text, KeyboardView } from '../components'
 import {
   composeOptions,
   useHeaderRight,
-  withLeftText,
+  withLeftClose,
 } from '../components/display/platform_modal_header_buttons'
 import BlankState from '../components/primitive/blank_state_primitive'
 import { useTheme } from '../hooks'
@@ -37,7 +37,7 @@ export const MessageReportScreenOptions = ({
 
   return composeOptions(
     { presentation: 'modal', title: 'Report message' },
-    withLeftText({ text: 'Cancel', onPress: handleClose })
+    withLeftClose({ onPress: handleClose })
   )
 }
 
@@ -106,7 +106,9 @@ function MessageReportScreenContent({
   const formVisible = status !== 'pending' && status !== 'success'
 
   useHeaderRight({
-    title: 'Submit',
+    icon: 'general.upArrow',
+    accessibilityLabel: 'Submit',
+    prominent: true,
     onPress: handleSubmit,
     disabled: !isFormValid,
     enabled: formVisible,

package/src/screens/notification_settings_screen.tsx

@@ -1,10 +1,9 @@
 import { PlatformPressable } from '@react-navigation/elements'
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
-import React, { type ReactNode } from 'react'
+import { type ReactNode } from 'react'
 import { FlatList, Platform, StyleSheet, View, type ViewProps, type ViewStyle } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Badge, Heading, Icon, Text } from '../components'
-import { useHeaderRight } from '../components/display/platform_modal_header_buttons'
 import { useTheme } from '../hooks'
 import { isDefined } from '../types'
 import { chatTypeLabel } from '../utils'
@@ -51,8 +50,6 @@ export function NotificationSettingsScreen({}: NotificationSettingsScreenProps)
   const { data: chatTypes } = useChatTypes()
   const { data: groups } = useGroups()
 
-  useHeaderRight({ title: 'Done', onPress: navigation.goBack })
-
   // Build section data
   const listData = [
     {