@planningcenter/chat-react-native 3.44.1-qa-876.0 → 3.44.1-qa-staging.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.44.1-qa-876.0",
+  "version": "3.44.1-qa-staging.1",
   "description": "",
   "main": "build/index.js",
   "react-native": "./src/index.tsx",
@@ -26,7 +26,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^7.2.0",
     "@fortawesome/react-native-fontawesome": "^0.3.2",
-    "@planningcenter/emoji-keyboard": "3.44.1-qa-876.0",
+    "@planningcenter/emoji-keyboard": "3.44.1-qa-staging.1",
     "lodash-inflection": "^1.5.0",
     "react-compiler-runtime": "^1.0.0"
   },
@@ -73,5 +73,5 @@
     "sf-symbols-typescript": "^2.2.0",
     "typescript": "~6.0.3"
   },
-  "gitHead": "041126159a2f3cb4d4c07139a06f3d301d1dabdd"
+  "gitHead": "57de03cd8388934cfe0cb792621309b5b02d5ab4"
 }

package/src/components/conversation/attachments/giphy_attachment.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { Text, StyleSheet, Linking } from 'react-native'
 import { useTheme } from '../../../hooks'
 import { DenormalizedGiphyAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'
-import { assertKeysAreNumbers, safeAspectRatio } from '../../../utils'
+import { assertKeysAreNumbers } from '../../../utils'
 import { tokens } from '../../../vendor/tapestry/tokens'
 import { Image } from '../../display'
 
@@ -55,7 +55,7 @@ const useStyles = ({ imageWidth, imageHeight }: { imageWidth: number; imageHeigh
     },
     imageWrapper: {
       width: '100%',
-      aspectRatio: safeAspectRatio(imageWidth, imageHeight),
+      aspectRatio: imageWidth / imageHeight,
     },
     image: {
       borderRadius: 8,

package/src/components/conversation/attachments/image_attachment.tsx

@@ -7,9 +7,9 @@ import {
   Modal,
   View,
   Linking,
+  Dimensions,
   NativeSyntheticEvent,
   NativeScrollEvent,
-  useWindowDimensions,
   ViewToken,
 } from 'react-native'
 import {
@@ -30,12 +30,13 @@ import Animated, {
 import { useSafeAreaInsets, SafeAreaProvider } from 'react-native-safe-area-context'
 import { useTheme } from '../../../hooks'
 import { DenormalizedMessageAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'
-import { Haptic, platformFontWeightMedium, safeAspectRatio } from '../../../utils'
+import { Haptic, platformFontWeightMedium } from '../../../utils'
 import { formatDatePreview } from '../../../utils/date'
 import { tokens } from '../../../vendor/tapestry/tokens'
 import { IconButton, Image, Heading, Text } from '../../display'
 import { AttachmentDeletingOverlay } from './attachment_deleting_overlay'
 
+const { width: WINDOW_WIDTH, height: WINDOW_HEIGHT } = Dimensions.get('window')
 const DISMISS_PAN_THRESHOLD = 175
 const MIN_DISTANCE_FOR_PAN = 10 // Higher threshold gives pinching priority
 const SINGLE_FINGER_POINTER = 1 // Single-finger panning / tapping helps to avoid conflicts with pinching
@@ -166,7 +167,6 @@ const LightboxGallery = ({
 }: LightboxGalleryProps) => {
   const styles = useStyles()
   const insets = useSafeAreaInsets()
-  const { width: windowWidth, height: windowHeight } = useWindowDimensions()
   const [currentImageIndex, setCurrentImageIndex] = useState(initialImageIndex)
   const { soft: triggerMaxZoomHaptic, rigid: triggerDismissHaptic } = Haptic
 
@@ -177,8 +177,8 @@ const LightboxGallery = ({
   const imageHeight = metadata.height
 
   // Calculate available space for image display
-  const availableWindowWidth = windowWidth
-  const availableWindowHeight = windowHeight - insets.top - insets.bottom
+  const availableWindowWidth = WINDOW_WIDTH
+  const availableWindowHeight = WINDOW_HEIGHT - insets.top - insets.bottom
 
   /* ============================
    ANIMATION VALUES
@@ -299,8 +299,8 @@ const LightboxGallery = ({
     'worklet'
 
     // How far the focal point is from the center of the window
-    const windowCenterX = windowWidth / 2
-    const windowCenterY = windowHeight / 2
+    const windowCenterX = WINDOW_WIDTH / 2
+    const windowCenterY = WINDOW_HEIGHT / 2
 
     // Position of focal point relative to current image position
     const focalRelativeX = focalPointX - windowCenterX - currentSavedTranslateX
@@ -402,32 +402,29 @@ const LightboxGallery = ({
   // Used in tandem with FlatList's initialScrollIndex to quickly calculate the position and size of each image before they load.
   const getItemLayout = useCallback(
     (_: unknown, index: number) => ({
-      length: windowWidth,
-      offset: windowWidth * index,
+      length: WINDOW_WIDTH,
+      offset: WINDOW_WIDTH * index,
       index,
     }),
-    [windowWidth]
+    []
   )
 
   // Captures the current image's index after the FlatList finishes its scroll animation.
   // Used in tandem with onViewableItemsChanged to ensure the final value for currentImageIndex is set.
-  const onMomentumScrollEnd = useCallback(
-    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-      // Calculate the index of the image that is currently visible
-      const imageOffsetX = event.nativeEvent.contentOffset.x
-      const newImageIndex = Math.round(imageOffsetX / windowWidth)
-
-      // Check if the image index has changed and the FlatList didn't scroll past the first or last image
-      const didImageIndexChange = newImageIndex !== stableCurrentImageIndexRef.current
-      const isImageIndexWithinBounds =
-        newImageIndex >= 0 && newImageIndex < stableImageAttachmentsLengthRef.current
-
-      if (didImageIndexChange && isImageIndexWithinBounds) {
-        setCurrentImageIndex(newImageIndex)
-      }
-    },
-    [windowWidth]
-  )
+  const onMomentumScrollEnd = useCallback((event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    // Calculate the index of the image that is currently visible
+    const imageOffsetX = event.nativeEvent.contentOffset.x
+    const newImageIndex = Math.round(imageOffsetX / WINDOW_WIDTH)
+
+    // Check if the image index has changed and the FlatList didn't scroll past the first or last image
+    const didImageIndexChange = newImageIndex !== stableCurrentImageIndexRef.current
+    const isImageIndexWithinBounds =
+      newImageIndex >= 0 && newImageIndex < stableImageAttachmentsLengthRef.current
+
+    if (didImageIndexChange && isImageIndexWithinBounds) {
+      setCurrentImageIndex(newImageIndex)
+    }
+  }, [])
 
   // Supplements onMomentumScrollEnd by capturing the current image's index while the FlatList is actively scrolling.
   // Used in tandem with viewabilityConfig to trigger when the image is 50% visible in the window.
@@ -932,7 +929,6 @@ interface UseStylesProps {
 
 const useStyles = ({ imageWidth = 100, imageHeight = 100 }: UseStylesProps = {}) => {
   const { top, bottom } = useSafeAreaInsets()
-  const { width: windowWidth } = useWindowDimensions()
   const backgroundColor = tokens.colorNeutral7
   const transparentBackgroundColor = useMemo(
     () => colorFunction(backgroundColor).alpha(0.8).toString(),
@@ -950,7 +946,7 @@ const useStyles = ({ imageWidth = 100, imageHeight = 100 }: UseStylesProps = {})
     attachmentImageWrapper: {
       width: '100%',
       minWidth: 200,
-      aspectRatio: safeAspectRatio(imageWidth, imageHeight),
+      aspectRatio: imageWidth / imageHeight,
     },
     image: {
       borderRadius: 8,
@@ -964,7 +960,7 @@ const useStyles = ({ imageWidth = 100, imageHeight = 100 }: UseStylesProps = {})
     },
     gestureImage: {
       height: '100%',
-      width: windowWidth,
+      width: WINDOW_WIDTH,
       backgroundColor: 'transparent',
     },
     gestureImageLoading: {

package/src/components/conversation/attachments/video_attachment.tsx

@@ -3,7 +3,6 @@ import React, { useRef, useState } from 'react'
 import { View, StyleSheet } from 'react-native'
 import { useTheme } from '../../../hooks'
 import { DenormalizedMessageAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'
-import { safeAspectRatio } from '../../../utils'
 import { Video, VideoPlayerHandle } from '../../../utils/native_adapters'
 import { tokens } from '../../../vendor/tapestry/tokens'
 import { Icon } from '../../display'
@@ -59,7 +58,7 @@ export function VideoAttachment({
         <Video.Player
           ref={videoRef}
           source={{ uri: url }}
-          aspectRatio={safeAspectRatio(width, height)}
+          aspectRatio={width / height}
           style={styles.video}
           onFullscreenPlayerWillDismiss={onFullscreenPlayerWillDismiss}
         />

package/src/components/conversation/message.tsx

@@ -17,8 +17,6 @@ import {
   useTheme,
 } from '../../hooks'
 import { useDeletingIds } from '../../hooks'
-// CHAT-476 diagnostics - remove with use_conversation_layout_diagnostics.ts
-import { useLayoutWidthProbe } from '../../hooks/use_conversation_layout_diagnostics'
 import { useConversationMessage } from '../../hooks/use_conversation_message'
 import { useLiveRelativeTime } from '../../hooks/use_live_relative_time'
 import { useMessageCreateOrUpdate } from '../../hooks/use_message_create_or_update'
@@ -27,6 +25,7 @@ import { DenormalizedMessageAttachmentResource } from '../../types/resources/den
 import { ReactionCountResource } from '../../types/resources/reaction'
 import { pluralize } from '../../utils'
 import { isNewMessage } from '../../utils/cache/messages_cache'
+import { stripEmptyTextCharacters } from '../../utils/message_text'
 import { Haptic } from '../../utils/native_adapters'
 import {
   CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
@@ -56,7 +55,8 @@ export function Message({
   inReplyScreen,
   ...message
 }: MessageProps) {
-  const { text, reactionCounts, pending, error, attachments, author } = message
+  const { reactionCounts, pending, error, attachments, author } = message
+  const text = stripEmptyTextCharacters(message.text ?? '')
   const deletingMessageIds = useDeletingIds('deleteMessage')
   const isDeleting = deletingMessageIds.has(message.id)
   const styles = useMessageStyles(message.mine, isDeleting)
@@ -71,8 +71,6 @@ export function Message({
   const isPersisted = !isNewMessage(message)
   const [temporarilyHidePendingState, setTemporarilyHidePendingState] = React.useState(true)
   const [messageBubbleHeight, setMessageBubbleHeight] = React.useState(0)
-  // CHAT-476 diagnostics - remove with use_conversation_layout_diagnostics.ts
-  const onMessageBubbleLayout = useLayoutWidthProbe('message.bubble', 0)
   const { animatedBackgroundColor, handleMessagePressIn, handleMessagePressOut } =
     useAnimatedMessageBackgroundColor()
   const { message: replyRootMessage } = useConversationMessage({
@@ -235,10 +233,7 @@ export function Message({
           )}
           <View
             style={styles.messageBubble}
-            onLayout={e => {
-              setMessageBubbleHeight(e.nativeEvent.layout.height)
-              onMessageBubbleLayout?.(e)
-            }}
+            onLayout={e => setMessageBubbleHeight(e.nativeEvent.layout.height)}
           >
             {isDeletedReplyRootMessage ? (
               <View style={styles.messageText}>

package/src/components/conversation/message_form.tsx

@@ -24,8 +24,6 @@ import {
 import { useAttachmentUploader } from '../../hooks/use_attachment_uploader'
 import { useBroadcastTypingStatus } from '../../hooks/use_broadcast_typing_status'
 import { useChatConfiguration } from '../../hooks/use_chat_configuration'
-// CHAT-476 diagnostics - remove with use_conversation_layout_diagnostics.ts
-import { useLayoutWidthProbe } from '../../hooks/use_conversation_layout_diagnostics'
 import { useMessageCreateOrUpdate } from '../../hooks/use_message_create_or_update'
 import { useMessageDraft } from '../../hooks/use_message_draft'
 import { ConversationScreenProps } from '../../screens/conversation_screen'
@@ -43,6 +41,7 @@ import {
 import { pickAttachmentPreviewKind } from '../../utils/attachment_kind'
 import { canSubmitMessage } from '../../utils/can_submit_message'
 import { isInputEditable } from '../../utils/is_input_editable'
+import { hasMessageText, stripEmptyTextCharacters } from '../../utils/message_text'
 import {
   DocumentPicker,
   DocumentPickerResult,
@@ -195,7 +194,7 @@ function MessageFormRoot({
     conversationDisabled: conversation.disabled ?? false,
     pendingUploads: !!attachmentUploader?.pendingUploads,
     hasFlaggedAttachments: !!attachmentUploader?.flaggedAttachmentCount,
-    hasText: text.trim().length > 0,
+    hasText: hasMessageText(text),
     hasSendableAttachments: !!attachmentUploader?.attachmentIds?.length,
   })
   const disabled = !canSubmit
@@ -243,11 +242,13 @@ function MessageFormRoot({
               file: attachment.file,
             })
           )
+      const messageText = stripEmptyTextCharacters(text)
+
       if (currentlyEditingMessage) {
-        mutateAsync({ text })
+        mutateAsync({ text: messageText })
         reset()
       } else {
-        mutateAsync({ text, attachments: attachmentsForSubmit })
+        mutateAsync({ text: messageText, attachments: attachmentsForSubmit })
         reset()
       }
     }
@@ -432,11 +433,6 @@ function MessageFormInput() {
 
   const broadcastTypingStatus = useBroadcastTypingStatus()
 
-  // CHAT-476 diagnostics - remove with use_conversation_layout_diagnostics.ts
-  const onTextInputBoundaryLayout = useLayoutWidthProbe('form.textInputBoundary', 2)
-  const onInputErrorMessageLayout = useLayoutWidthProbe('form.errorText', 32)
-  const onTextInputLayout = useLayoutWidthProbe('form.textInput', 32)
-
   const handleTextChange = (newText: string) => {
     setText(newText)
 
@@ -455,13 +451,9 @@ function MessageFormInput() {
   }
 
   return (
-    <View style={styles.textInputBoundary} onLayout={onTextInputBoundaryLayout}>
+    <View style={styles.textInputBoundary}>
       <MessageFormAttachments />
-      {attachmentError ? (
-        <Text style={styles.inputErrorMessage} onLayout={onInputErrorMessageLayout}>
-          {attachmentError}
-        </Text>
-      ) : null}
+      {attachmentError ? <Text style={styles.inputErrorMessage}>{attachmentError}</Text> : null}
       <View style={styles.textInputRow}>
         {usingGiphy ? (
           <View style={styles.giphyBadge}>
@@ -483,7 +475,6 @@ function MessageFormInput() {
           onSubmitEditing={onSubmit}
           submitBehavior={usingGiphy ? 'submit' : 'newline'}
           editable={inputEditable}
-          onLayout={onTextInputLayout}
         />
       </View>
     </View>

package/src/components/conversation/reply_shadow_message.tsx

@@ -9,8 +9,6 @@ import {
   useScalableNumberOfLines,
   useTheme,
 } from '../../hooks'
-// CHAT-476 diagnostics - remove with use_conversation_layout_diagnostics.ts
-import { useLayoutWidthProbe } from '../../hooks/use_conversation_layout_diagnostics'
 import { useConversationMessage } from '../../hooks/use_conversation_message'
 import { useLiveRelativeTime } from '../../hooks/use_live_relative_time'
 import { MessageResource } from '../../types'
@@ -20,7 +18,8 @@ import {
   DenormalizedExpandedLinkAttachmentResource,
   DenormalizedMessageAttachmentResource,
 } from '../../types/resources/denormalized_attachment_resource'
-import { assertKeysAreNumbers, pluralize, safeAspectRatio } from '../../utils'
+import { assertKeysAreNumbers, pluralize } from '../../utils'
+import { stripEmptyTextCharacters } from '../../utils/message_text'
 import {
   CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
   MAX_FONT_SIZE_MULTIPLIER,
@@ -65,15 +64,14 @@ interface ShadowMessageContentProps extends MessageResource {
 }
 
 function ShadowMessageContent({ conversation_id, ...message }: ShadowMessageContentProps) {
-  const { text, deletedAt, author, attachments } = message
+  const { deletedAt, author, attachments } = message
+  const text = stripEmptyTextCharacters(message.text ?? '')
   const styles = useStyles(message)
   const { colors } = useTheme()
   const navigation = useNavigation()
   const timestamp = useLiveRelativeTime(message.createdAt)
 
   const [messageBubbleHeight, setMessageBubbleHeight] = React.useState(0)
-  // CHAT-476 diagnostics - remove with use_conversation_layout_diagnostics.ts
-  const onMessageBubbleLayout = useLayoutWidthProbe('replyShadow.bubble', 18)
   const { animatedBackgroundColor, handleMessagePressIn, handleMessagePressOut } =
     useAnimatedMessageBackgroundColor()
   const scalableNumberOfLines = useScalableNumberOfLines(2)
@@ -123,10 +121,7 @@ function ShadowMessageContent({ conversation_id, ...message }: ShadowMessageCont
         <View style={styles.messageContent}>
           <View
             style={styles.messageBubble}
-            onLayout={e => {
-              setMessageBubbleHeight(e.nativeEvent.layout.height)
-              onMessageBubbleLayout?.(e)
-            }}
+            onLayout={e => setMessageBubbleHeight(e.nativeEvent.layout.height)}
           >
             <MessageAttachmentImagery attachments={attachments} />
             {text && (
@@ -331,7 +326,7 @@ const useStyles = ({ mine, imageWidth = 32, imageHeight = 32 }: StylesProps = {}
     },
     imageWrapper: {
       width: 32 * fontScale,
-      aspectRatio: safeAspectRatio(imageWidth, imageHeight),
+      aspectRatio: imageWidth / imageHeight,
       opacity: 0.5,
     },
     image: {

package/src/components/display/badge.tsx

@@ -3,8 +3,6 @@ import type { TextStyle, ViewProps, ViewStyle } from 'react-native'
 import { Pressable, StyleSheet, View } from 'react-native'
 import Svg, { Defs, LinearGradient, Path, Stop } from 'react-native-svg'
 import { useFontScale, useTheme } from '../../hooks'
-// CHAT-476 diagnostics - remove with use_conversation_layout_diagnostics.ts
-import { useLayoutWidthProbe } from '../../hooks/use_conversation_layout_diagnostics'
 import { platformFontWeightMedium } from '../../utils'
 import { tokens } from '../../vendor/tapestry/tokens'
 import { Icon, IconString } from './icon'
@@ -109,14 +107,6 @@ export function Badge({
 }: BadgeProps) {
   const styles = useStyles({ appearance, maxFontSizeMultiplier, variant })
   const { showBadgeProductLogo } = useTheme()
-  // CHAT-476 diagnostics - remove with use_conversation_layout_diagnostics.ts
-  // Inset is metaLabel's remaining contentInset now that its left offset is
-  // a margin, not padding - see the CHAT-476 candidate fix on this style.
-  const onLabelLayout = useLayoutWidthProbe('badge.label', 0)
-  const onMetaLabelLayout = useLayoutWidthProbe(
-    'badge.metaLabel',
-    styles.metaLabel.paddingHorizontal * 2
-  )
 
   const isMetaSubtle = variant === 'metaSubtle'
   const hasMetaLabel = Boolean(metaLabel)
@@ -137,7 +127,6 @@ export function Badge({
           style={styles.label}
           numberOfLines={1}
           maxFontSizeMultiplier={maxFontSizeMultiplier}
-          onLayout={onLabelLayout}
         >
           {badgeLabel}
         </Text>
@@ -149,7 +138,6 @@ export function Badge({
           style={styles.metaLabel}
           numberOfLines={numberOfLinesMetaLabel}
           maxFontSizeMultiplier={maxFontSizeMultiplier}
-          onLayout={onMetaLabelLayout}
         >
           {metaLabel}
         </Text>
@@ -246,10 +234,7 @@ const useStyles = ({
       paddingVertical: variantStylesMap[variant].paddingVertical,
       paddingHorizontal: variantStylesMap[variant].paddingHorizontal,
       backgroundColor: variantStylesMap[variant].backgroundColor,
-      // metaSubtle's borderRadius is 0, so this would otherwise resolve to -2.
-      // Neither platform clamps a negative radius; Android's BackgroundDrawable
-      // reads it as "no rounded borders" and skips the rounded path entirely.
-      borderRadius: Math.max(0, variantStylesMap[variant].borderRadius - 2),
+      borderRadius: variantStylesMap[variant].borderRadius - 2,
     },
     icon: {
       color: statusColorMap[appearance].icon,
@@ -273,10 +258,7 @@ const useStyles = ({
       fontSize: badgeFontSize,
       alignSelf: 'center',
       flexShrink: 1,
-      // CHAT-476 candidate fix: margin (not padding) so this offset sits
-      // outside contentInsets - a shrunk Text can never see it as part of
-      // its own measured content width, so it can't go negative from this.
-      marginLeft: variantStylesMap[variant].metaLabelPaddingLeft,
+      paddingLeft: variantStylesMap[variant].metaLabelPaddingLeft,
     },
   })
 }

package/src/hooks/use_conversation_messages.ts

@@ -7,7 +7,7 @@ export const useConversationMessages = (
   { conversation_id, reply_root_id }: { conversation_id: number; reply_root_id?: string | null },
   opts?: SuspensePaginatorOptions
 ) => {
-  const { data, refetch, isRefetching, fetchNextPage, hasNextPage, isFetchingNextPage } =
+  const { data, refetch, isRefetching, fetchNextPage, hasNextPage } =
     useSuspensePaginator<MessageResource>(
       getMessagesRequestArgs({ conversation_id, reply_root_id }),
       opts
@@ -25,13 +25,5 @@ export const useConversationMessages = (
     [data]
   )
 
-  return {
-    messages,
-    refetch,
-    isRefetching,
-    fetchNextPage,
-    hasNextPage,
-    isFetchingNextPage,
-    queryKey,
-  }
+  return { messages, refetch, isRefetching, fetchNextPage, hasNextPage, queryKey }
 }

package/src/screens/conversation_screen.tsx

@@ -32,11 +32,6 @@ import { useTheme } from '../hooks'
 import { useMessageAvailableMembersAction } from '../hooks/direct_messages/use_message_available_members_action'
 import { useConversation } from '../hooks/use_conversation'
 import { useConversationJoltEvents } from '../hooks/use_conversation_jolt_events'
-// CHAT-476 diagnostics - remove with use_conversation_layout_diagnostics.ts
-import {
-  useConversationLayoutDiagnostics,
-  useLayoutWidthProbe,
-} from '../hooks/use_conversation_layout_diagnostics'
 import { useConversationMessages } from '../hooks/use_conversation_messages'
 import { useConversationMessagesJoltEvents } from '../hooks/use_conversation_messages_jolt_events'
 import { useMarkLatestMessageRead } from '../hooks/use_mark_latest_message_read'
@@ -96,14 +91,12 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
   const { conversation_id, editing_message_id, reply_root_id, reply_root_author_name } =
     route.params
   const { data: conversation } = useConversation(route.params)
-  const { messages, fetchNextPage, hasNextPage, isFetchingNextPage } = useConversationMessages({
+  const { messages, fetchNextPage, hasNextPage } = useConversationMessages({
     conversation_id,
     reply_root_id,
   })
   useConversationJoltEvents({ conversationId: conversation_id })
   useConversationMessagesJoltEvents({ conversationId: conversation_id })
-  // CHAT-476 diagnostics - remove with use_conversation_layout_diagnostics.ts
-  useConversationLayoutDiagnostics({ conversationId: conversation_id, replyRootId: reply_root_id })
   const { markHandledByMessageForm } = useVideoModerationJoltEvents()
   useEnsureConversationsRouteExists()
   useMarkLatestMessageRead({ conversation, messages })
@@ -223,11 +216,7 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
                 />
               )
             }}
-            onEndReached={() => {
-              // VirtualizedList dedupes onEndReached per content length, not
-              // per fetch, so it can refire while a page is already in flight.
-              if (hasNextPage && !isFetchingNextPage) fetchNextPage()
-            }}
+            onEndReached={() => fetchNextPage()}
             ListHeaderComponent={<View style={styles.listHeader} />}
           />
         )}
@@ -300,13 +289,11 @@ function InlineDateSeparator({ date }: DateSeparator) {
   const { isThisYear } = getRelativeDateStatus(date)
   const showYear = !isThisYear
   const dateStamp = formatDate(date, { style: 'long', year: showYear })
-  // CHAT-476 diagnostics - remove with use_conversation_layout_diagnostics.ts
-  const onDateTextLayout = useLayoutWidthProbe('dateSeparator.text', 16)
 
   return (
     <View style={styles.container}>
       <View style={styles.separator} />
-      <Text variant="footnote" style={styles.dateText} onLayout={onDateTextLayout}>
+      <Text variant="footnote" style={styles.dateText}>
         {dateStamp}
       </Text>
       <View style={styles.separator} />
@@ -355,14 +342,11 @@ export const ConversationScreenTitle = ({
   const resourceType = badge?.pcoResourceType || ''
   const productName = badge?.appName
   const name = badge?.text || undefined
-  // CHAT-476 diagnostics - remove with use_conversation_layout_diagnostics.ts
-  const onHeaderContainerLayout = useLayoutWidthProbe('header.container', 0)
 
   return (
     <PlatformPressable
       accessibilityHint="Opens details about members and settings"
       style={styles.container}
-      onLayout={onHeaderContainerLayout}
       onPress={() => {
         if (deleted) return
 
@@ -393,12 +377,7 @@ export const ConversationScreenTitle = ({
 const usePressableHeaderStyle = () => {
   const { width } = useWindowDimensions()
   const slotReserve = useHeaderSlotReserve()
-
-  // Guards narrow windows (split-screen, freeform, DeX) where slotReserve * 2
-  // exceeds the available width. A negative maxWidth can hand a descendant
-  // <Text> a negative measure width, and android.text.Layout hard-throws on
-  // that (`Layout: -2 < 0`) rather than clamping the way iOS does.
-  const headerContainerStyle = { maxWidth: Math.max(0, width - slotReserve * 2) }
+  const headerContainerStyle = { maxWidth: width - slotReserve * 2 }
 
   return StyleSheet.create({
     container: {

package/src/utils/__tests__/message_text.test.ts

@@ -0,0 +1,45 @@
+import { hasMessageText, stripEmptyTextCharacters } from '../message_text'
+
+const EMPTY = '\uFFFC'
+
+describe('stripEmptyTextCharacters', () => {
+  it.each([
+    ['leaves ordinary text alone', 'Come on over after.', 'Come on over after.'],
+    [
+      'removes a trailing pair',
+      `Yes. Come on over after.${EMPTY}${EMPTY}`,
+      'Yes. Come on over after.',
+    ],
+    ['removes one mid-string', `before${EMPTY}after`, 'beforeafter'],
+    ['reduces an all-empty body to an empty string', EMPTY, ''],
+    ['reduces a repeated all-empty body to an empty string', `${EMPTY}${EMPTY}${EMPTY}`, ''],
+    ['leaves an empty string alone', '', ''],
+  ])('%s', (_name, input, expected) => {
+    expect(stripEmptyTextCharacters(input)).toBe(expected)
+  })
+
+  it('does not disturb emoji or other multi-byte text', () => {
+    expect(stripEmptyTextCharacters(`👋 hi${EMPTY}`)).toBe('👋 hi')
+  })
+})
+
+describe('hasMessageText', () => {
+  it.each([
+    ['ordinary text', 'hello', true],
+    ['text alongside an empty character', `hello${EMPTY}`, true],
+    ['only an empty character', EMPTY, false],
+    ['several empty characters', `${EMPTY}${EMPTY}`, false],
+    ['an empty character surrounded by whitespace', `  ${EMPTY} `, false],
+    ['whitespace only', '   ', false],
+    ['empty string', '', false],
+    ['undefined', undefined, false],
+    ['null', null, false],
+  ])('%s -> %s', (_name, input, expected) => {
+    expect(hasMessageText(input)).toBe(expected)
+  })
+
+  it('is not fooled by trim alone, which does not treat the character as whitespace', () => {
+    expect(EMPTY.trim()).toBe(EMPTY)
+    expect(hasMessageText(EMPTY)).toBe(false)
+  })
+})

package/src/utils/index.ts

@@ -1,5 +1,4 @@
 export * from './assert_keys_are_numbers'
-export * from './aspect_ratio'
 export * from './attachment_kind'
 export * from './chat_type_label'
 export * from './cache'

package/src/utils/message_text.ts

@@ -0,0 +1,9 @@
+const EMPTY_TEXT_CHARACTERS = /\uFFFC/g
+
+export function stripEmptyTextCharacters(text: string) {
+  return text.replace(EMPTY_TEXT_CHARACTERS, '')
+}
+
+export function hasMessageText(text?: string | null) {
+  return Boolean(text && stripEmptyTextCharacters(text).trim())
+}

package/build/hooks/use_conversation_layout_diagnostics.d.ts

@@ -1,21 +0,0 @@
-import { LayoutChangeEvent } from 'react-native';
-export declare const __resetLayoutDiagnosticsForTests: () => void;
-/**
- * Attaches to a suspect Text/TextInput/View's onLayout and reports through
- * Log.reportError the first time its resolved width drops to at or below
- * its own horizontal inset (padding/border) — the shape that Android's
- * unclamped text-measure path can turn into a negative width. Returns
- * undefined on non-Android platforms so it's a no-op there.
- */
-export declare const useLayoutWidthProbe: (label: string, inset?: number) => ((event: LayoutChangeEvent) => void) | undefined;
-/**
- * Mount once per conversation screen. Periodically flushes every probed
- * label's latest known width as a single breadcrumb, so there's a timeline
- * leading up to the crash even if no individual probe crosses the
- * suspicious threshold. Capped at MAX_BREADCRUMB_FLUSHES per mount.
- */
-export declare const useConversationLayoutDiagnostics: ({ conversationId, replyRootId, }: {
-    conversationId: number;
-    replyRootId?: string | null;
-}) => void;
-//# sourceMappingURL=use_conversation_layout_diagnostics.d.ts.map

package/build/hooks/use_conversation_layout_diagnostics.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use_conversation_layout_diagnostics.d.ts","sourceRoot":"","sources":["../../src/hooks/use_conversation_layout_diagnostics.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAA6C,MAAM,cAAc,CAAA;AAsB3F,eAAO,MAAM,gCAAgC,YAG5C,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,GAAI,OAAO,MAAM,EAAE,cAAS,cAIhD,iBAAiB,sBAiC5B,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,gCAAgC,GAAI,kCAG9C;IACD,cAAc,EAAE,MAAM,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC5B,SAoCA,CAAA"}