@planningcenter/chat-react-native 3.44.1-qa-875.0 → 3.44.1-qa-876.0

package/src/hooks/use_conversation_layout_diagnostics.ts

@@ -0,0 +1,123 @@
+import { useCallback, useEffect, useRef } from 'react'
+import { LayoutChangeEvent, PixelRatio, Platform, useWindowDimensions } from 'react-native'
+import { Log } from '../utils'
+
+const BREADCRUMB_INTERVAL_MS = 500
+const MAX_BREADCRUMB_FLUSHES = 6
+const SUSPICIOUS_MARGIN = 1
+
+type LayoutSample = { width: number; height: number; x: number }
+
+// Temporary instrumentation for CHAT-476 (Android-only `Layout: -2 < 0`
+// conversation crash). Android's text layout hard-throws when a Text or
+// TextInput resolves to a non-positive content width; this attaches to
+// onLayout on suspect nodes and reports their resolved width through the
+// host error reporter, so a QA repro surfaces which node it is before the
+// native crash tears down the surface. Remove once CHAT-476 is resolved —
+// this hook and every call site are tagged CHAT-476 for that reason.
+
+const samplesByLabel = new Map<string, LayoutSample>()
+const reportedSuspiciousLabels = new Set<string>()
+
+// Test-only: the maps above are module-scope so useConversationLayoutDiagnostics
+// can flush every probe's latest sample in one breadcrumb. Reset between tests.
+export const __resetLayoutDiagnosticsForTests = () => {
+  samplesByLabel.clear()
+  reportedSuspiciousLabels.clear()
+}
+
+/**
+ * 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 const useLayoutWidthProbe = (label: string, inset = 0) => {
+  const mountedAtRef = useRef(Date.now())
+
+  const handleLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      const { width, height, x } = event.nativeEvent.layout
+      const previous = samplesByLabel.get(label)
+      if (previous && previous.width === width && previous.height === height && previous.x === x) {
+        return
+      }
+      samplesByLabel.set(label, { width, height, x })
+
+      const isSuspicious = width <= inset + SUSPICIOUS_MARGIN
+      if (!isSuspicious || reportedSuspiciousLabels.has(label)) return
+
+      reportedSuspiciousLabels.add(label)
+      Log.reportError(new Error(`CHAT-476: ${label} measured at or below its horizontal inset`), {
+        scope: 'component',
+        tags: { team: 'chat', chat476: 'near-zero-width' },
+        extra: {
+          label,
+          width,
+          height,
+          x,
+          inset,
+          msSinceMount: Date.now() - mountedAtRef.current,
+          pixelRatio: PixelRatio.get(),
+          fontScale: PixelRatio.getFontScale(),
+        },
+      })
+    },
+    [label, inset]
+  )
+
+  if (Platform.OS !== 'android') return undefined
+
+  return handleLayout
+}
+
+/**
+ * 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 const useConversationLayoutDiagnostics = ({
+  conversationId,
+  replyRootId,
+}: {
+  conversationId: number
+  replyRootId?: string | null
+}) => {
+  const { width: windowWidth } = useWindowDimensions()
+  const mountedAtRef = useRef(Date.now())
+  const flushCountRef = useRef(0)
+
+  useEffect(() => {
+    if (Platform.OS !== 'android') return
+
+    samplesByLabel.clear()
+    reportedSuspiciousLabels.clear()
+    mountedAtRef.current = Date.now()
+    flushCountRef.current = 0
+
+    const interval = setInterval(() => {
+      if (flushCountRef.current >= MAX_BREADCRUMB_FLUSHES || samplesByLabel.size === 0) return
+
+      flushCountRef.current += 1
+      Log.reportError(new Error('CHAT-476: layout breadcrumb'), {
+        scope: 'component',
+        tags: { team: 'chat', chat476: 'breadcrumb' },
+        extra: {
+          conversationId,
+          replyRootId,
+          msSinceMount: Date.now() - mountedAtRef.current,
+          windowWidth,
+          pixelRatio: PixelRatio.get(),
+          fontScale: PixelRatio.getFontScale(),
+          samples: [...samplesByLabel.entries()].map(
+            ([label, { width, height, x }]) => `${label}|w=${width}|h=${height}|x=${x}`
+          ),
+        },
+      })
+    }, BREADCRUMB_INTERVAL_MS)
+
+    return () => clearInterval(interval)
+  }, [conversationId, replyRootId, windowWidth])
+}

package/src/screens/conversation_screen.tsx

@@ -32,6 +32,11 @@ 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'
@@ -97,6 +102,8 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
   })
   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 })
@@ -217,8 +224,8 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
               )
             }}
             onEndReached={() => {
-              // Android's inverted FlatList can refire onEndReached while a
-              // page fetch is already in flight, queueing unbounded requests.
+              // VirtualizedList dedupes onEndReached per content length, not
+              // per fetch, so it can refire while a page is already in flight.
               if (hasNextPage && !isFetchingNextPage) fetchNextPage()
             }}
             ListHeaderComponent={<View style={styles.listHeader} />}
@@ -293,11 +300,13 @@ 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}>
+      <Text variant="footnote" style={styles.dateText} onLayout={onDateTextLayout}>
         {dateStamp}
       </Text>
       <View style={styles.separator} />
@@ -346,11 +355,14 @@ 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
 
@@ -382,8 +394,10 @@ const usePressableHeaderStyle = () => {
   const { width } = useWindowDimensions()
   const slotReserve = useHeaderSlotReserve()
 
-  // Guards split-screen/DeX widths where slotReserve * 2 exceeds the
-  // available width, which would otherwise resolve to a negative maxWidth.
+  // 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) }
 
   return StyleSheet.create({

package/src/screens/message_report_screen.tsx

@@ -30,9 +30,11 @@ 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 },
+        { merge: true }
+      )
     )
 
   return composeOptions(
@@ -100,7 +102,7 @@ function MessageReportScreenContent({
   }, [isFormValid, selectedReason, reasonDetail, submitReport])
 
   const handleClose = useCallback(() => {
-    navigation.dispatch(StackActions.popTo('Conversation', { conversation_id }))
+    navigation.dispatch(StackActions.popTo('Conversation', { conversation_id }, { merge: true }))
   }, [navigation, conversation_id])
 
   const formVisible = status !== 'pending' && status !== 'success'

package/src/utils/aspect_ratio.ts

@@ -1,6 +1,7 @@
-// Android hard-throws when a <Text>/<Image> is measured with a non-positive
-// resolved width (`Layout: -2 < 0`), so any aspectRatio derived from
-// attachment metadata must never resolve to 0, negative, or non-finite.
+// assertKeysAreNumbers coerces unparseable attachment dimensions to 0, so a
+// raw width / height can be NaN or Infinity. Yoga ignores a NaN aspectRatio
+// and resolves Infinity by collapsing the dependent dimension to 0, so both
+// produce a silently broken box rather than an error.
 export const safeAspectRatio = (
   width: number | undefined,
   height: number | undefined,