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

package/src/screens/message_report_screen.tsx

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

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, { useCallback, useEffect, 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 { HeaderTextButton } from '../components/display/platform_modal_header_buttons'
 import { useTheme } from '../hooks'
 import { isDefined } from '../types'
 import { chatTypeLabel } from '../utils'
@@ -51,25 +50,6 @@ 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 = [
     {