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

package/src/navigation/index.tsx

@@ -1,16 +1,18 @@
+import { HeaderBackButton } from '@react-navigation/elements'
 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 { Platform } from 'react-native'
+import { Icon } from '../components'
 import {
-  composeOptions,
-  withMinimalBack,
-  withRightClose,
-  withRightDone,
+  composeHeaderOptions,
+  createMinimalHeaderBackButton,
+  HeaderDoneButton,
+  HeaderTextButton,
 } from '../components/display/platform_modal_header_buttons'
 import { useDirectMessagesEligible, useQualifiedByAge } from '../hooks'
 import {
@@ -79,66 +81,64 @@ 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: globalScreenOptions,
+  screenOptions: {
+    headerBackButtonDisplayMode: 'minimal',
+  },
   screenLayout: ScreenLayoutWithChatAccessGate,
   screens: {
     ConversationNewEntry: {
       screen: ConversationNewEntryScreen,
-      options: ({ navigation }) =>
-        composeOptions(
-          {
-            title: 'New conversation',
-            headerBackVisible: false,
-          },
-          withRightClose({ onPress: navigation.goBack })
+      options: ({ navigation }) => ({
+        title: 'New conversation',
+        headerRight: (props: NativeStackHeaderRightProps) => (
+          <HeaderTextButton {...props} onPress={navigation.goBack} title="Cancel" />
         ),
+        headerBackVisible: false,
+      }),
     },
     ConversationSelectGroupRecipients: {
       screen: ConversationSelectGroupRecipientsScreen,
-      options: ({ navigation, route }) =>
-        composeOptions(
-          {
-            title: 'New conversation',
-          },
-          withRightClose({
-            onPress: () => navigation.popTo('Conversations', route.params),
-          })
+      options: ({ navigation, route }) => ({
+        title: 'New conversation',
+        headerRight: (props: NativeStackHeaderRightProps) => (
+          <HeaderTextButton
+            {...props}
+            onPress={() => navigation.popTo('Conversations', route.params)}
+            title="Cancel"
+          />
         ),
+      }),
     },
     ConversationSelectTeamsILeadRecipients: {
       screen: ConversationSelectTeamsILeadRecipientsScreen,
-      options: ({ navigation, route }) =>
-        composeOptions(
-          {
-            title: 'New conversation',
-          },
-          withRightClose({
-            onPress: () => navigation.popTo('Conversations', route.params),
-          })
+      options: ({ navigation, route }) => ({
+        title: 'New conversation',
+        headerRight: (props: NativeStackHeaderRightProps) => (
+          <HeaderTextButton
+            {...props}
+            onPress={() => navigation.popTo('Conversations', route.params)}
+            title="Cancel"
+          />
         ),
+      }),
     },
     ConversationSelectDirectMessageRecipients: {
       screen: ConversationSelectDirectMessageRecipientsScreen,
       if: useDirectMessagesEligible,
-      options: ({ navigation, route }) =>
-        composeOptions(
-          {
-            title: 'New conversation',
-          },
-          withRightClose({
-            onPress: () => navigation.popTo('Conversations', route.params),
-          })
+      options: ({ navigation, route }) => ({
+        title: 'New conversation',
+        headerRight: (props: NativeStackHeaderRightProps) => (
+          <HeaderTextButton
+            {...props}
+            onPress={() => navigation.popTo('Conversations', route.params)}
+            title="Cancel"
+          />
         ),
+      }),
     },
     ConversationFilterRecipients: {
       screen: ConversationFilterRecipientsScreen,
@@ -146,20 +146,21 @@ export const NewConversationStack = createNativeStackNavigator({
     },
     ConversationNew: {
       screen: ConversationNewScreen,
-      options: ({ navigation, route }) =>
-        composeOptions(
-          {
-            title: 'New conversation',
-            headerLeft: () => null,
-          },
-          withRightClose({
-            onPress: () => {
+      options: ({ navigation, route }) => ({
+        title: 'New conversation',
+        headerLeft: () => null,
+        headerRight: (props: NativeStackHeaderRightProps) => (
+          <HeaderTextButton
+            {...props}
+            onPress={() => {
               const { chat_group_graph_id, group_source_app_name } =
                 route.params as ConversationSelectRecipientsParams
               navigation.popTo('Conversations', { chat_group_graph_id, group_source_app_name })
-            },
-          })
+            }}
+            title="Cancel"
+          />
         ),
+      }),
     },
     AvatarPicker: {
       screen: AvatarPickerScreen,
@@ -169,19 +170,24 @@ export const NewConversationStack = createNativeStackNavigator({
 })
 
 export const ChatStack = createNativeStackNavigator({
-  screenOptions: globalScreenOptions,
+  screenOptions: {
+    headerBackButtonDisplayMode: 'minimal',
+  },
   screenLayout: ScreenLayoutWithChatAccessGate,
   screens: {
     Conversations: {
       screen: ConversationsScreen,
-      options: ({ route, navigation }) =>
-        composeOptions(
-          {
-            headerTitle: (route.params as { title?: string })?.title ?? 'Chat',
-            headerBackVisible: false,
-          },
-          withRightClose({ onPress: navigation.goBack })
+      options: ({ route, navigation }) => ({
+        headerTitle: (route.params as { title?: string })?.title ?? 'Chat',
+        headerBackVisible: false,
+        headerRight: (props: NativeStackHeaderRightProps) => (
+          <HeaderBackButton
+            backImage={() => <Icon name="general.x" size={18} color={props.tintColor} />}
+            onPress={navigation.goBack}
+            {...props}
+          />
         ),
+      }),
     },
     ConversationFilters: {
       screen: ConversationFiltersScreen,
@@ -189,48 +195,50 @@ export const ChatStack = createNativeStackNavigator({
     },
     Conversation: {
       screen: ConversationScreen,
-      options: ({ route, navigation }) =>
-        composeOptions(
-          {
-            headerTitle: (props: NativeStackHeaderRightProps) => {
-              const { conversation_id, title, badge, deleted, muted } =
-                route.params as ConversationRouteProps
+      options: ({ route, navigation }) => ({
+        headerTitle: (props: NativeStackHeaderRightProps) => {
+          const { conversation_id, title, badge, deleted, muted } =
+            route.params as ConversationRouteProps
 
-              return (
-                <ConversationScreenTitle
-                  conversation_id={conversation_id}
-                  badge={badge}
-                  deleted={deleted}
-                  muted={muted}
-                  {...props}
-                >
-                  {title ?? 'Conversation'}
-                </ConversationScreenTitle>
-              )
-            },
-          },
-          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() })
+          return (
+            <ConversationScreenTitle
+              conversation_id={conversation_id}
+              badge={badge}
+              deleted={deleted}
+              muted={muted}
+              {...props}
+            >
+              {title ?? 'Conversation'}
+            </ConversationScreenTitle>
+          )
+        },
+        headerRight: (props: NativeStackHeaderRightProps) => (
+          <HeaderBackButton
+            backImage={() => <Icon name="general.x" size={18} color={props.tintColor} />}
+            onPress={() => navigation.getParent()?.goBack()}
+          />
         ),
+        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()
+            }
+          },
+        }),
+      }),
     },
     ConversationReply: {
       screen: ConversationScreen,
       options: ({ route, navigation }) =>
-        composeOptions(
-          { title: (route.params as ConversationRouteProps)?.title ?? 'Reply' },
-          withMinimalBack({ onPress: navigation.goBack })
-        ),
+        composeHeaderOptions({
+          title: (route.params as ConversationRouteProps)?.title ?? 'Reply',
+          onPress: navigation.goBack,
+        }),
     },
     TeamConversation: {
       screen: TeamConversationScreen,
@@ -243,14 +251,13 @@ export const ChatStack = createNativeStackNavigator({
     },
     ConversationDetails: {
       screen: ConversationDetailsScreen,
-      options: ({ navigation }) =>
-        composeOptions(
-          {
-            presentation: 'modal',
-            title: 'Conversation details',
-          },
-          withRightDone({ onPress: navigation.goBack })
+      options: ({ navigation }) => ({
+        presentation: 'modal',
+        title: 'Conversation details',
+        headerRight: (props: NativeStackHeaderRightProps) => (
+          <HeaderTextButton {...props} onPress={navigation.goBack} title="Done" />
         ),
+      }),
     },
     AvatarPicker: {
       screen: AvatarPickerScreen,
@@ -258,43 +265,38 @@ export const ChatStack = createNativeStackNavigator({
     },
     ChatSettings: {
       screen: SettingsScreen,
-      options: ({ navigation }) =>
-        composeOptions({ title: 'Chat settings' }, withMinimalBack({ onPress: navigation.goBack })),
+      options: ({ navigation }) => ({
+        title: 'Chat settings',
+        headerBackVisible: false,
+        headerRight: (props: NativeStackHeaderRightProps) => (
+          <HeaderTextButton {...props} onPress={navigation.goBack} title="Done" />
+        ),
+      }),
     },
     NotificationSettings: {
       screen: NotificationSettingsScreen,
-      options: ({ navigation }) =>
-        navigation.getState().index === 0
-          ? composeOptions(
-              { title: 'Chat notifications' },
-              withRightClose({ onPress: navigation.goBack })
-            )
-          : composeOptions(
-              { title: 'Chat notifications' },
-              withMinimalBack({ onPress: navigation.goBack })
-            ),
+      options: ({ navigation }) => ({
+        title: 'Chat',
+        headerBackVisible: false,
+        headerRight: (props: NativeStackHeaderRightProps) => (
+          <HeaderTextButton {...props} onPress={navigation.goBack} title="Done" />
+        ),
+      }),
     },
     PreferredAppSelection: {
       screen: PreferredAppSelectionScreen,
-      options: ({ navigation }) =>
-        composeOptions({ title: 'Preferred app' }, withMinimalBack({ onPress: navigation.goBack })),
+      options: {
+        title: 'Preferred app',
+      },
     },
     GroupNotificationSettings: {
       screen: GroupNotificationSettingsScreen,
-      options: ({ route, navigation }) => {
-        const title = (route.params as { title?: string })?.title || 'Group Settings'
-
-        // 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,
-              },
-              withRightClose({ onPress: navigation.goBack })
-            )
-          : composeOptions({ title }, withMinimalBack({ onPress: navigation.goBack }))
-      },
+      options: ({ route, navigation }) => ({
+        title: (route.params as { title?: string })?.title || 'Group Settings',
+        headerRight: (props: NativeStackHeaderRightProps) => (
+          <HeaderDoneButton {...props} navigation={navigation} />
+        ),
+      }),
     },
     GroupNotificationLevelSelect: {
       screen: GroupNotificationLevelSelectScreen,
@@ -315,14 +317,17 @@ export const ChatStack = createNativeStackNavigator({
     GroupConversationNew: {
       screen: ConversationNewScreen,
       if: useQualifiedByAge,
-      options: ({ navigation }) =>
-        composeOptions(
-          {
-            title: 'New conversation',
-            headerLeft: () => null,
-          },
-          withRightClose({ onPress: () => navigation.getParent()?.goBack() })
+      options: ({ navigation }) => ({
+        title: 'New conversation',
+        headerLeft: () => null,
+        headerRight: props => (
+          <HeaderTextButton
+            {...props}
+            onPress={() => navigation.getParent()?.goBack()}
+            title="Cancel"
+          />
         ),
+      }),
     },
     SendGiphy: {
       screen: SendGiphyScreen,
@@ -363,15 +368,14 @@ export const ChatStack = createNativeStackNavigator({
     },
     GetHelp: {
       screen: GetHelpScreen,
-      options: ({ navigation }) =>
-        composeOptions(
-          {
-            headerTitle: 'Get help',
-            headerBackVisible: false,
-            presentation: 'modal',
-          },
-          withRightClose({ onPress: navigation.goBack })
+      options: ({ navigation }) => ({
+        headerTitle: 'Get help',
+        headerBackVisible: false,
+        presentation: 'modal',
+        headerRight: props => (
+          <HeaderTextButton {...props} onPress={navigation.goBack} title="Close" />
         ),
+      }),
     },
     NotFound: {
       screen: NotFound,

package/src/screens/bug_report_screen.tsx

@@ -4,7 +4,7 @@ import type {
   NativeStackScreenProps,
 } from '@react-navigation/native-stack'
 import { startsWith } from 'lodash'
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useLayoutEffect, useState } from 'react'
 import {
   View,
   StyleSheet,
@@ -25,10 +25,8 @@ import {
   KeyboardView,
 } from '../components'
 import {
-  composeOptions,
   HeaderDismissButton,
-  useHeaderRight,
-  withLeftClose,
+  HeaderTextButton,
 } from '../components/display/platform_modal_header_buttons'
 import { VideoAttachmentPreview } from '../components/display/video_attachment_preview'
 import { DefaultLoading } from '../components/page/loading'
@@ -57,11 +55,11 @@ enum BUG_TYPE_OPTIONS {
 
 export const BugReportScreenOptions = ({
   navigation,
-}: NativeStackScreenProps<any>): NativeStackNavigationOptions =>
-  composeOptions(
-    { presentation: 'modal', title: 'Report a bug' },
-    withLeftClose({ onPress: () => navigation.goBack() })
-  )
+}: NativeStackScreenProps<any>): NativeStackNavigationOptions => ({
+  presentation: 'modal',
+  title: 'Report a bug',
+  headerLeft: () => <HeaderDismissButton title="Cancel" onPress={() => navigation.goBack()} />,
+})
 
 interface Attachment {
   id: string
@@ -158,13 +156,14 @@ export function BugReportScreen() {
     return ImagePicker.openImageLibraryAsync().then(result => uploadImagePickerResult(result))
   }
 
-  useHeaderRight({
-    icon: 'general.upArrow',
-    accessibilityLabel: 'Submit',
-    prominent: true,
-    onPress: handleSubmit,
-    disabled: !formValid,
-  })
+  useLayoutEffect(() => {
+    navigation.setOptions({
+      // eslint-disable-next-line react/no-unstable-nested-components
+      headerRight: () => (
+        <HeaderTextButton title="Submit" onPress={handleSubmit} disabled={!formValid} />
+      ),
+    })
+  }, [formValid, handleSubmit, navigation])
 
   if (status === 'pending') {
     return (

package/src/screens/conversation_details_screen.tsx

@@ -38,7 +38,7 @@ import {
   type TextStyle,
 } from '../components'
 import { ConversationAvatar } from '../components/display/conversation_avatar'
-import { useHeaderRight } from '../components/display/platform_modal_header_buttons'
+import { HeaderTextButton } from '../components/display/platform_modal_header_buttons'
 import { ButtonAppearanceUnion } from '../components/display/utils/button_colors'
 import { useSuspensePaginator, useTheme } from '../hooks'
 import {
@@ -222,18 +222,24 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
     [name, productName, resourceType, styles.headerTitleBadge, styles.headerTitleContainer]
   )
 
-  useHeaderRight({
-    icon: 'general.check',
-    accessibilityLabel: 'Done',
-    onPress: () => {
-      saveTitle({ title: trimmedTitle || conversation.title })
-      navigation.goBack()
-    },
-  })
+  const HeaderRight = useCallback(() => {
+    return (
+      <HeaderTextButton
+        onPress={() => {
+          saveTitle({ title: trimmedTitle || conversation.title })
+          navigation.goBack()
+        }}
+        title="Done"
+      />
+    )
+  }, [conversation.title, navigation, saveTitle, trimmedTitle])
 
   useEffect(() => {
-    navigation.setOptions({ headerTitle: HeaderTitle })
-  }, [HeaderTitle, navigation])
+    navigation.setOptions({
+      headerRight: HeaderRight,
+      headerTitle: HeaderTitle,
+    })
+  }, [HeaderRight, HeaderTitle, navigation])
 
   const listData = [
     {

package/src/screens/conversation_filters_screen.tsx

@@ -1,6 +1,5 @@
 import { useHeaderHeight } from '@react-navigation/elements'
-import * as ReactNavigationNative from '@react-navigation/native'
-import { RouteProp, useRoute } from '@react-navigation/native'
+import { createComponentForStaticNavigation, RouteProp, useRoute } from '@react-navigation/native'
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import React, { useCallback } from 'react'
 import { LayoutChangeEvent, Platform, StyleSheet, useWindowDimensions, View } from 'react-native'
@@ -59,26 +58,7 @@ const FilterNavigator = createNativeStackNavigator<ConversationFilterStackParamL
   },
 })
 
-// tree.getComponent() doesn't exist on every host's installed
-// react-navigation/core — hosts on an older version would throw here.
-// Where it does exist, it's the real implementation (the "deprecated"
-// createComponentForStaticNavigation is just a console.warn wrapper around
-// the same call on current versions), so prefer it and only reach for the
-// old function on cores where getComponent() genuinely isn't there yet.
-function createStaticNavigationComponent<P extends object>(
-  tree: { getComponent?: () => React.ComponentType<P> },
-  name: string
-): React.ComponentType<P> {
-  if (typeof tree.getComponent === 'function') return tree.getComponent()
-
-  const { createComponentForStaticNavigation } = ReactNavigationNative as {
-    createComponentForStaticNavigation: (tree: unknown, name: string) => React.ComponentType<P>
-  }
-
-  return createComponentForStaticNavigation(tree, name)
-}
-
-const Filters = createStaticNavigationComponent(FilterNavigator, 'Filters')
+const Filters = createComponentForStaticNavigation(FilterNavigator, 'Filters')
 
 export const ConversationFiltersScreen = (_props: ConversationFiltersScreenProps) => {
   const styles = useStyles()
@@ -137,9 +117,6 @@ const useStyles = () => {
         ios: 20,
         android: 20 + top,
       }),
-      // The filter list scrolls under it, so the sheet header doesn't need a
-      // separator the way the non-scrolling reaction sheet does.
-      borderBottomWidth: 0,
     },
   })
 }

package/src/screens/conversation_new/components/groups_form.tsx

@@ -4,6 +4,7 @@ import { Platform, Pressable, StyleSheet, TextInput, View } from 'react-native'
 import { Banner, ChildNotice, Heading, Text } from '../../../components'
 import { ActionButton } from '../../../components/display/action_button'
 import { KeyboardView } from '../../../components/display/keyboard_view'
+import { AutoFocusAwareTextInput } from '../../../components/display/text_input'
 import { useApiClient, useCurrentPerson, useSuspenseGet, useTheme } from '../../../hooks'
 import { useGroupChatConversationPayload } from '../../../hooks/groups/use_group_chat_conversation_payload'
 import {
@@ -212,13 +213,13 @@ function FormContent({
       <Divider />
       <Pressable style={styles.titleSection} onPress={handleTitleSectionPress}>
         <Heading variant="h3">Title</Heading>
-        <TextInput
+        <AutoFocusAwareTextInput
           placeholder="Topic of conversation (required)"
           value={title}
           onChangeText={setTitle}
           style={styles.titleInput}
           autoFocus={true}
-          ref={inputRef}
+          inputRef={inputRef}
         />
       </Pressable>
       <Divider />

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, useWindowDimensions, View } from 'react-native'
+import { FlatList, Platform, StyleSheet, 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,7 +25,6 @@ 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'
@@ -375,15 +374,11 @@ 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',