@planningcenter/chat-react-native 3.17.2 → 3.17.3-qa-456.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.17.2",
+  "version": "3.17.3-qa-456.0",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -29,7 +29,6 @@
     "@react-navigation/elements": "*",
     "@react-navigation/native": ">=7.0.0",
     "@react-navigation/native-stack": ">=7.0.0",
-    "@shopify/flash-list": "<2.0.0",
     "@tanstack/react-query": "^5.0.0",
     "color": "^3.1.2",
     "lodash": "*",
@@ -59,5 +58,5 @@
     "react-native-url-polyfill": "^2.0.0",
     "typescript": "<5.6.0"
   },
-  "gitHead": "0dae32d2726a5eb02650377356a9cccf65968166"
+  "gitHead": "d509a7a88fb84b1517a4b0dc70be90dfd316a63a"
 }

package/src/components/conversation/message.tsx

@@ -66,10 +66,31 @@ export function Message({
     enabled: !!message.replyRootId,
   })
 
+  const metaProps = {
+    authorName: message.author.name,
+    createdAt: message.createdAt,
+  }
+
+  const renderAuthor = (!message.mine && message.renderAuthor) || false
+  const showReplyCountButton =
+    !inReplyScreen && message.replyRootId === message.id && REPLIES_FEATURE_ENABLED
+  const isReplyRootMessage = message.replyRootId === message.id
+  const isDeletedReplyRootMessage = isReplyRootMessage && !!message.deletedAt
+
+  const messageText = isDeletedReplyRootMessage ? 'Message deleted' : text
+  const replyCountText = pluralize(message.replyCount, 'reply')
+  const messagePendingLabel = isPersisted ? 'Saving' : 'Sending'
   const replyRootAuthorName = message.replyRootId
     ? replyRootMessage?.author.name
     : message.author.name
 
+  const messageBottomMargin =
+    message.lastInGroup || message.nextIsReplyShadowMessage
+      ? 16
+      : hasReactions || showMessageMeta || showReplyCountButton
+        ? 8
+        : 4
+
   useEffect(() => {
     if (pending) {
       const timer = setTimeout(() => {
@@ -135,23 +156,6 @@ export function Message({
     })
   }
 
-  const metaProps = {
-    authorName: message.author.name,
-    createdAt: message.createdAt,
-  }
-
-  const renderAuthor = (!message.mine && message.renderAuthor) || false
-  const messagePendingLabel = isPersisted ? 'Saving' : 'Sending'
-  const showReplyCountButton =
-    !inReplyScreen && message.replyRootId === message.id && REPLIES_FEATURE_ENABLED
-  const replyCountText = pluralize(message.replyCount, 'reply')
-  const messageBottomMargin =
-    message.lastInGroup || message.nextIsReplyShadowMessage
-      ? 16
-      : hasReactions || showMessageMeta || showReplyCountButton
-        ? 8
-        : 4
-
   return (
     <Pressable
       onLongPress={handleMessageLongPress}
@@ -171,6 +175,8 @@ export function Message({
                 style={styles.avatar}
                 maxFontSizeMultiplier={1}
                 minFontSizeMultiplier={1}
+                fallbackIconName={isDeletedReplyRootMessage ? 'publishing.trash' : 'general.person'}
+                showFallback={isDeletedReplyRootMessage}
               />
             ) : (
               <View style={styles.avatarPlaceholder} />
@@ -196,9 +202,9 @@ export function Message({
                 onMessageLongPress={handleMessageLongPress}
               />
             </ErrorBoundary>
-            {text && (
+            {messageText && (
               <View style={styles.messageText}>
-                <MessageMarkdown text={text} />
+                <MessageMarkdown text={messageText} />
               </View>
             )}
           </View>

package/src/components/conversation/reply_connectors.tsx

@@ -94,7 +94,11 @@ export function MyReplyConnector({ message, messageBubbleHeight }: ReplyConnecto
 
   const spacerStyle = nextRendersAuthor ? styles.myReplyConnectorSpacer : null
 
-  return <View style={[styles.myReplyConnectorContainer, spacerStyle]}>{ConnectorComponent}</View>
+  return (
+    <EnforceLeftPositionForMyReplyConnector>
+      <View style={[styles.myReplyConnectorContainer, spacerStyle]}>{ConnectorComponent}</View>
+    </EnforceLeftPositionForMyReplyConnector>
+  )
 }
 
 function VerticalLineConnector({ style }: { style?: ViewStyle }) {
@@ -104,22 +108,74 @@ function VerticalLineConnector({ style }: { style?: ViewStyle }) {
 
 function LongHeadCurveConnector({ height, style }: { height: number; style?: ViewStyle }) {
   const styles = useStyles()
-  return <View style={[styles.longHeadCurveConnector, { height, marginTop: height }, style]} />
+  const { colors } = useTheme()
+
+  return (
+    <View style={[styles.longHeadCurveConnector, { marginTop: height }, style]}>
+      <Svg width={MY_REPLY_CONNECTOR_WIDTH} height={18} fill="none">
+        <Path
+          d="M 2 18 L 2 16 A 14 14 0 0 1 16 2 L 38 2"
+          stroke={colors.borderColorDefaultBase}
+          strokeWidth={CONNECTOR_BORDER_WIDTH}
+        />
+      </Svg>
+      <View style={styles.svgConnnectorVerticalLineTail} />
+    </View>
+  )
 }
 
 function LongTailCurveConnector({ height, style }: { height: number; style?: ViewStyle }) {
   const styles = useStyles()
-  return <View style={[styles.longTailCurveConnector, { height }, style]} />
+  const { colors } = useTheme()
+
+  return (
+    <View style={[{ height }, style]}>
+      <View style={styles.svgConnnectorVerticalLineHead} />
+      <Svg width={MY_REPLY_CONNECTOR_WIDTH} height={18} fill="none">
+        <Path
+          d="M 2 0 L 2 2 A 14 14 0 0 0 16 16 L 38 16"
+          stroke={colors.borderColorDefaultBase}
+          strokeWidth={CONNECTOR_BORDER_WIDTH}
+        />
+      </Svg>
+    </View>
+  )
 }
 
 function ShortHeadCurveConnector({ height }: { height: number }) {
   const styles = useStyles()
-  return <View style={[styles.shortHeadCurveConnector, { marginTop: height }]} />
+  const { colors } = useTheme()
+
+  return (
+    <View style={[styles.shortHeadCurveConnector, { marginTop: height }]}>
+      <Svg width={20} height={18} fill="none">
+        <Path
+          d="M 2 18 L 2 16 A 14 14 0 0 1 16 2 L 20 2"
+          stroke={colors.borderColorDefaultBase}
+          strokeWidth={CONNECTOR_BORDER_WIDTH}
+        />
+      </Svg>
+      <View style={styles.svgConnnectorVerticalLineTail} />
+    </View>
+  )
 }
 
 function ShortTailCurveConnector({ height }: { height: number }) {
   const styles = useStyles()
-  return <View style={[styles.shortTailCurveConnector, { height }]} />
+  const { colors } = useTheme()
+
+  return (
+    <View style={{ height }}>
+      <View style={styles.svgConnnectorVerticalLineHead} />
+      <Svg width={20} height={18} fill="none">
+        <Path
+          d="M 2 0 L 2 2 A 14 14 0 0 0 16 16 L 20 16"
+          stroke={colors.borderColorDefaultBase}
+          strokeWidth={CONNECTOR_BORDER_WIDTH}
+        />
+      </Svg>
+    </View>
+  )
 }
 
 function SwirlConnector({ style, height }: { style?: ViewStyle; height: number }) {
@@ -129,7 +185,7 @@ function SwirlConnector({ style, height }: { style?: ViewStyle; height: number }
   return (
     <View style={[styles.swirlConnectorContainer, style]}>
       <View style={{ height }}>
-        <View style={styles.swirlConnectorVerticalLineHead} />
+        <View style={styles.svgConnnectorVerticalLineHead} />
         <Svg width={27} height={34} fill="none">
           <Path
             stroke={colors.borderColorDefaultBase}
@@ -137,9 +193,25 @@ function SwirlConnector({ style, height }: { style?: ViewStyle; height: number }
             d="M2.07 34c0-6.142 1.201-12.283 3.343-17m0 0c2.305-5.075 5.699-8.5 9.857-8.5 4.86 0 8.8 3.806 8.8 8.5s-3.94 8.5-8.8 8.5c-4.158 0-7.552-3.425-9.857-8.5zm0 0C3.271 12.283 2.07 6.142 2.07 0"
           />
         </Svg>
-        <View style={styles.swirlConnectorVerticalLineTail} />
+        <View style={styles.svgConnnectorVerticalLineTail} />
       </View>
-      <View style={styles.swirlConnectorVerticalLineTail} />
+      <View style={styles.svgConnnectorVerticalLineTail} />
+    </View>
+  )
+}
+
+// TODO: Remove when Services React Native bumps to React Native 0.74 or higher.
+// This fixes a React Native bug where using `flexDirection: 'row-reverse'` also switches the `left`/`right` absolute positioning values.
+// The wrapper ensures the MyReplyConnector is always positioned to the left of the message bubble on older versions of React Native.
+// Long term fix is described here: https://reactnative.dev/blog/2024/04/22/release-0.74#new-layout-behaviors
+function EnforceLeftPositionForMyReplyConnector({ children }: { children: React.ReactNode }) {
+  const styles = useStyles()
+  return (
+    <View
+      style={styles.resetPosition}
+      pointerEvents="none" // ensures wrapper does not block press events
+    >
+      {children}
     </View>
   )
 }
@@ -177,47 +249,33 @@ const useStyles = () => {
       borderLeftColor: borderColor,
     },
     longHeadCurveConnector: {
-      width: MY_REPLY_CONNECTOR_WIDTH,
-      borderColor: borderColor,
-      borderLeftWidth: CONNECTOR_BORDER_WIDTH,
-      borderTopWidth: CONNECTOR_BORDER_WIDTH,
-      borderTopLeftRadius: 16,
       flex: 1,
     },
-    longTailCurveConnector: {
-      width: MY_REPLY_CONNECTOR_WIDTH,
-      borderColor: borderColor,
-      borderLeftWidth: CONNECTOR_BORDER_WIDTH,
-      borderBottomWidth: CONNECTOR_BORDER_WIDTH,
-      borderBottomLeftRadius: 16,
-    },
     shortHeadCurveConnector: {
-      borderColor: borderColor,
-      borderLeftWidth: CONNECTOR_BORDER_WIDTH,
-      borderTopWidth: CONNECTOR_BORDER_WIDTH,
-      borderTopLeftRadius: 16,
       flex: 1,
     },
-    shortTailCurveConnector: {
-      borderColor: borderColor,
-      borderLeftWidth: CONNECTOR_BORDER_WIDTH,
-      borderBottomWidth: CONNECTOR_BORDER_WIDTH,
-      borderBottomLeftRadius: 16,
-    },
     swirlConnectorContainer: {
       flex: 1,
     },
-    swirlConnectorVerticalLineHead: {
+    svgConnnectorVerticalLineHead: {
       backgroundColor: borderColor,
       width: CONNECTOR_BORDER_WIDTH,
       flex: 1,
       marginBottom: -1, // Ensures there is no gap between the vertical line and the swirl connector
     },
-    swirlConnectorVerticalLineTail: {
+    svgConnnectorVerticalLineTail: {
       backgroundColor: borderColor,
       width: CONNECTOR_BORDER_WIDTH,
       flex: 1,
       marginTop: -1, // Ensures there is no gap between the vertical line and the swirl connector
     },
+    // TODO: Remove when Services React Native bumps to React Native 0.74 or higher.
+    resetPosition: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0,
+    },
   })
 }

package/src/components/conversation/reply_shadow_message.tsx

@@ -45,7 +45,7 @@ export function ReplyShadowMessage({
 
   if (inReplyScreen) return null
   if (isLoading) return <ShadowMessageFallback text="Loading..." />
-  if (isError || !message) return <ShadowMessageFallback text="Message not found" />
+  if (isError || !message) return <ShadowMessageFallback text="Message deleted" />
 
   const enrichedMessage = {
     ...message,
@@ -61,7 +61,7 @@ interface ShadowMessageContentProps extends MessageResource {
 }
 
 function ShadowMessageContent({ conversation_id, ...message }: ShadowMessageContentProps) {
-  const { text } = message
+  const { text, deletedAt } = message
   const styles = useStyles(message)
   const { colors } = useTheme()
   const navigation = useNavigation()
@@ -71,6 +71,8 @@ function ShadowMessageContent({ conversation_id, ...message }: ShadowMessageCont
     useAnimatedMessageBackgroundColor()
   const scalableNumberOfLines = useScalableNumberOfLines(2)
   const replyCountText = pluralize(message.replyCount, 'reply')
+  const isDeleted = !!deletedAt
+  const messageText = isDeleted ? 'Message deleted' : text
 
   const handleNavigateToReplies = () => {
     navigation.navigate('ConversationReply', {
@@ -92,12 +94,14 @@ function ShadowMessageContent({ conversation_id, ...message }: ShadowMessageCont
       <Animated.View style={[styles.message, animatedBackgroundColor]}>
         {!message.mine && (
           <View>
-            <View style={styles.avatarWrapper}>
+            <View style={[styles.avatarWrapper, !isDeleted && styles.avatarOpacity]}>
               <Avatar
                 size="xs"
                 sourceUri={message.author.avatar}
                 style={styles.avatar}
                 maxFontSizeMultiplier={1}
+                fallbackIconName={isDeleted ? 'publishing.trash' : 'general.person'}
+                showFallback={isDeleted}
               />
             </View>
             <TheirReplyConnector message={message} messageBubbleHeight={messageBubbleHeight} />
@@ -115,7 +119,7 @@ function ShadowMessageContent({ conversation_id, ...message }: ShadowMessageCont
                 style={styles.messageText}
                 numberOfLines={scalableNumberOfLines}
               >
-                {text}
+                {messageText}
               </Text>
             )}
           </View>
@@ -281,6 +285,8 @@ const useStyles = ({ mine, imageWidth = 32, imageHeight = 32 }: StylesProps = {}
     },
     avatar: {
       marginBottom: 8,
+    },
+    avatarOpacity: {
       opacity: 0.5,
     },
     messageBubble: {

package/src/components/conversations/conversations.tsx

@@ -1,7 +1,6 @@
 import { useNavigation } from '@react-navigation/native'
-import { FlashList } from '@shopify/flash-list'
 import React, { useMemo } from 'react'
-import { StyleSheet, View } from 'react-native'
+import { FlatList, StyleSheet, View } from 'react-native'
 import { useConversationsContext } from '../../contexts/conversations_context'
 import { useTheme } from '../../hooks'
 import { ConversationResource } from '../../types'
@@ -35,7 +34,7 @@ export const Conversations = ({ ListHeaderComponent }: ConversationsProps) => {
 
   const showBadges = !chat_group_graph_id
 
-  const data: FlashListItem[] = useMemo(() => {
+  const data: FlatListItem[] = useMemo(() => {
     if (isLoading) {
       return loadingPlaceholder
     }
@@ -54,9 +53,8 @@ export const Conversations = ({ ListHeaderComponent }: ConversationsProps) => {
 
   return (
     <View style={styles.container}>
-      <FlashList
+      <FlatList
         data={data}
-        estimatedItemSize={97}
         keyExtractor={item => item.id.toString()}
         contentContainerStyle={styles.contentContainer}
         onRefresh={refetch}
@@ -114,18 +112,18 @@ const useStyles = () => {
   })
 }
 
-interface FlashListLoadingItem {
+interface FlatListLoadingItem {
   type: 'loading'
   id: string
 }
-interface FlashListConversationItem {
+interface FlatListConversationItem {
   type: 'conversation'
   resource: ConversationResource
   id: number
 }
-type FlashListItem = FlashListLoadingItem | FlashListConversationItem
+type FlatListItem = FlatListLoadingItem | FlatListConversationItem
 
-const loadingPlaceholder: FlashListItem[] = Array.from({ length: 5 }, (_, i) => ({
+const loadingPlaceholder: FlatListItem[] = Array.from({ length: 5 }, (_, i) => ({
   type: 'loading',
   id: `loading${i}`,
 }))

package/src/screens/conversation_details_screen.tsx

@@ -9,6 +9,7 @@ import React, {
   useRef,
 } from 'react'
 import {
+  FlatList,
   StyleSheet,
   TextInput,
   View,
@@ -40,7 +41,6 @@ import {
 } from '../hooks/use_conversation'
 import { MemberResource, isDefined } from '../types'
 import { HeaderTextButton } from '../components/display/platform_modal_header_buttons'
-import { FlashList } from '@shopify/flash-list'
 import { tokens } from '../vendor/tapestry/tokens'
 import { ButtonAppearanceUnion } from '../components/display/utils/button_colors'
 import { GroupResource } from '../types/resources/group_resource'
@@ -300,9 +300,8 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
 
   return (
     <View style={styles.listContainer}>
-      <FlashList
+      <FlatList
         data={listData as SectionListData}
-        estimatedItemSize={52}
         contentContainerStyle={styles.contentContainer}
         renderItem={({ item, index }) => {
           const [isStart, isEnd] = [
@@ -375,7 +374,7 @@ export function ConversationDetailsScreen({ route }: ConversationDetailsScreenPr
               return null
           }
         }}
-        onEndReached={fetchNextPageOfMembers}
+        onEndReached={() => fetchNextPageOfMembers()}
       />
     </View>
   )

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

@@ -1,6 +1,5 @@
 import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import { FlashList, type FlashListProps } from '@shopify/flash-list'
+import { FlatList, type FlatListProps, StyleSheet, View } from 'react-native'
 import { MemberResource } from '../../../types'
 import { Person, Text } from '../../../components/display'
 import { useTheme } from '../../../hooks'
@@ -8,7 +7,7 @@ import { useTheme } from '../../../hooks'
 interface FormListProps {
   memberData: MemberResource[]
   loadingMore?: boolean
-  FormContent?: FlashListProps<MemberResource>['ListHeaderComponent']
+  FormContent?: FlatListProps<MemberResource>['ListHeaderComponent']
   listEmptyText?: string
   onEndReached?: () => void
 }
@@ -23,7 +22,7 @@ export const FormList = ({
   const styles = useStyles()
 
   return (
-    <FlashList
+    <FlatList
       data={memberData}
       ListHeaderComponent={FormContent}
       renderItem={({ item }) => <Person person={item} style={styles.person} />}
@@ -31,7 +30,6 @@ export const FormList = ({
         loadingMore ? <Text style={styles.loadingMore}>Loading more...</Text> : null
       }
       keyExtractor={item => item.id.toString()}
-      estimatedItemSize={45}
       ListEmptyComponent={<ListEmptyText text={listEmptyText || 'No members found'} />}
       onEndReached={onEndReached}
     />

package/src/screens/conversation_screen.tsx

@@ -314,8 +314,7 @@ export const groupMessages = ({ ms, inReplyScreen }: GroupMessagesProps) => {
         message.threadPosition = null // ensures we don't render a connector for root replies that aren't immediately followed up a reply
       else if (firstInThread) message.threadPosition = 'first'
       else if (lastInThread) message.threadPosition = 'last'
-      else if (!prevMessageDifferentThread && !nextMessageDifferentThread)
-        message.threadPosition = 'center'
+      else message.threadPosition = 'center'
     }
 
     enrichedMessages.push(message)

package/src/screens/conversation_select_recipients/conversation_select_group_recipients_screen.tsx

@@ -1,7 +1,6 @@
 import { useNavigation } from '@react-navigation/native'
 import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import { FlashList } from '@shopify/flash-list'
+import { FlatList, StyleSheet, View } from 'react-native'
 import { Heading } from '../../components'
 import { GroupsGroupResource } from '../../types'
 import { useGroupsGroups } from '../../hooks/use_groups_groups'
@@ -31,10 +30,9 @@ export const ConversationSelectGroupRecipientsScreen = ({
   }
 
   return (
-    <FlashList
+    <FlatList
       data={groupsWithCreatePermission}
       keyExtractor={item => item.id.toString()}
-      estimatedItemSize={65}
       contentContainerStyle={styles.contentContainer}
       ListHeaderComponent={
         <View style={styles.sectionHeader}>

package/src/screens/conversation_select_recipients/conversation_select_teams_i_lead_recipients_screen.tsx

@@ -1,7 +1,6 @@
 import { useNavigation } from '@react-navigation/native'
 import React from 'react'
-import { StyleSheet, View } from 'react-native'
-import { FlashList } from '@shopify/flash-list'
+import { FlatList, StyleSheet, View } from 'react-native'
 import { Heading } from '../../components'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { ConversationSelectRecipientsScreenProps } from './types/screen_props'
@@ -30,10 +29,9 @@ export const ConversationSelectTeamsILeadRecipientsScreen = ({
   }
 
   return (
-    <FlashList
+    <FlatList
       data={serviceTypes}
       keyExtractor={item => item.id.toString()}
-      estimatedItemSize={65}
       contentContainerStyle={styles.contentContainer}
       ListHeaderComponent={
         <View style={styles.sectionHeader}>