@planningcenter/chat-react-native 3.43.1-qa-858.1 → 3.44.0-rc.0

package/src/screens/message_report_screen.tsx

@@ -8,9 +8,8 @@ import { View, StyleSheet, TextInput, ScrollView } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Spinner, Text, KeyboardView } from '../components'
 import {
-  composeOptions,
-  useHeaderRight,
-  withLeftClose,
+  HeaderDismissButton,
+  HeaderTextButton,
 } from '../components/display/platform_modal_header_buttons'
 import BlankState from '../components/primitive/blank_state_primitive'
 import { useTheme } from '../hooks'
@@ -35,10 +34,11 @@ export const MessageReportScreenOptions = ({
       })
     )
 
-  return composeOptions(
-    { presentation: 'modal', title: 'Report message' },
-    withLeftClose({ onPress: handleClose })
-  )
+  return {
+    presentation: 'modal',
+    title: 'Report message',
+    headerLeft: () => <HeaderDismissButton title="Cancel" onPress={handleClose} />,
+  }
 }
 
 export type MessageReportScreenProps = StaticScreenProps<{
@@ -103,22 +103,23 @@ function MessageReportScreenContent({
     navigation.dispatch(StackActions.popTo('Conversation', { conversation_id }))
   }, [navigation, conversation_id])
 
-  const formVisible = status !== 'pending' && status !== 'success'
-
-  useHeaderRight({
-    icon: 'general.upArrow',
-    accessibilityLabel: 'Submit',
-    prominent: true,
-    onPress: handleSubmit,
-    disabled: !isFormValid,
-    enabled: formVisible,
-  })
+  const HeaderRight = useCallback(
+    () => <HeaderTextButton title="Submit" onPress={handleSubmit} disabled={!isFormValid} />,
+    [handleSubmit, isFormValid]
+  )
 
   useLayoutEffect(() => {
-    if (formVisible) {
-      navigation.setOptions({ headerTitle: 'Report message' })
+    if (status === 'pending' || status === 'success') {
+      navigation.setOptions({
+        headerRight: () => null,
+      })
+    } else {
+      navigation.setOptions({
+        headerTitle: 'Report message',
+        headerRight: HeaderRight,
+      })
     }
-  }, [formVisible, navigation])
+  }, [HeaderRight, navigation, status])
 
   if (status === 'pending') {
     return (

package/src/screens/notification_settings_screen.tsx

@@ -1,9 +1,10 @@
 import { PlatformPressable } from '@react-navigation/elements'
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
-import { type ReactNode } from 'react'
+import React, { useCallback, useEffect, 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 { HeaderTextButton } from '../components/display/platform_modal_header_buttons'
 import { useTheme } from '../hooks'
 import { isDefined } from '../types'
 import { chatTypeLabel } from '../utils'
@@ -50,6 +51,25 @@ export function NotificationSettingsScreen({}: NotificationSettingsScreenProps)
   const { data: chatTypes } = useChatTypes()
   const { data: groups } = useGroups()
 
+  // Header configuration
+  const HeaderRight = useCallback(() => {
+    return (
+      <HeaderTextButton
+        onPress={() => {
+          // Save settings logic would go here
+          navigation.goBack()
+        }}
+        title="Done"
+      />
+    )
+  }, [navigation])
+
+  useEffect(() => {
+    navigation.setOptions({
+      headerRight: HeaderRight,
+    })
+  }, [HeaderRight, navigation])
+
   // Build section data
   const listData = [
     {