@planningcenter/chat-react-native 3.43.1-qa-858.0 → 3.43.1-qa-staging.1

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'
@@ -30,15 +29,14 @@ export const MessageReportScreenOptions = ({
 }: NativeStackScreenProps<any>): NativeStackNavigationOptions => {
   const handleClose = () =>
     navigation.dispatch(
-      StackActions.popTo('Conversation', {
-        conversation_id: route.params?.conversation_id,
-      })
+      StackActions.popTo('Conversation', { conversation_id: route.params?.conversation_id }, true)
     )
 
-  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<{
@@ -100,25 +98,26 @@ function MessageReportScreenContent({
   }, [isFormValid, selectedReason, reasonDetail, submitReport])
 
   const handleClose = useCallback(() => {
-    navigation.dispatch(StackActions.popTo('Conversation', { conversation_id }))
+    navigation.dispatch(StackActions.popTo('Conversation', { conversation_id }, true))
   }, [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'
@@ -49,7 +50,25 @@ export function NotificationSettingsScreen({}: NotificationSettingsScreenProps)
   const styles = useStyles()
   const { data: chatTypes } = useChatTypes()
   const { data: groups } = useGroups()
-  const debugInsets = useSafeAreaInsets()
+
+  // 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 = [
@@ -123,20 +142,6 @@ export function NotificationSettingsScreen({}: NotificationSettingsScreenProps)
 
   return (
     <View style={styles.listContainer}>
-      <View
-        style={{
-          position: 'absolute',
-          top: 0,
-          right: 0,
-          zIndex: 999,
-          backgroundColor: 'magenta',
-          padding: 8,
-        }}
-      >
-        <Text style={{ color: 'white' }}>
-          bottom={debugInsets.bottom} top={debugInsets.top}
-        </Text>
-      </View>
       <FlatList
         data={listData as SectionListData}
         contentContainerStyle={styles.contentContainer}