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

package/build/utils/index.d.ts

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

package/build/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAA;AACzC,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA;AACjC,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,kCAAkC,CAAA;AAChD,cAAc,mCAAmC,CAAA;AACjD,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,iCAAiC,CAAA;AAC/C,cAAc,sBAAsB,CAAA;AACpC,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,mBAAmB,CAAA;AACjC,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAA;AACzC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA;AACjC,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,kCAAkC,CAAA;AAChD,cAAc,mCAAmC,CAAA;AACjD,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,iCAAiC,CAAA;AAC/C,cAAc,sBAAsB,CAAA;AACpC,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,mBAAmB,CAAA;AACjC,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA"}

package/build/utils/index.js

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

package/build/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAA;AACzC,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA;AACjC,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,kCAAkC,CAAA;AAChD,cAAc,mCAAmC,CAAA;AACjD,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,iCAAiC,CAAA;AAC/C,cAAc,sBAAsB,CAAA;AACpC,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,mBAAmB,CAAA;AACjC,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA","sourcesContent":["export * from './assert_keys_are_numbers'\nexport * from './attachment_kind'\nexport * from './chat_type_label'\nexport * from './cache'\nexport * from './client'\nexport * from './convert_attachments_for_create'\nexport * from './destructure_chat_group_graph_id'\nexport * from './host_bridge'\nexport * from './liquid_glass'\nexport * from './native_adapters'\nexport * from './pluralize'\nexport * from './conversation_safety_constants'\nexport * from './reaction_constants'\nexport * from './session'\nexport * from './styles'\nexport * from './system_messages'\nexport * from './theme'\nexport * from './uri'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAA;AACzC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,mBAAmB,CAAA;AACjC,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,kCAAkC,CAAA;AAChD,cAAc,mCAAmC,CAAA;AACjD,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,iCAAiC,CAAA;AAC/C,cAAc,sBAAsB,CAAA;AACpC,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,mBAAmB,CAAA;AACjC,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA","sourcesContent":["export * from './assert_keys_are_numbers'\nexport * from './aspect_ratio'\nexport * from './attachment_kind'\nexport * from './chat_type_label'\nexport * from './cache'\nexport * from './client'\nexport * from './convert_attachments_for_create'\nexport * from './destructure_chat_group_graph_id'\nexport * from './host_bridge'\nexport * from './liquid_glass'\nexport * from './native_adapters'\nexport * from './pluralize'\nexport * from './conversation_safety_constants'\nexport * from './reaction_constants'\nexport * from './session'\nexport * from './styles'\nexport * from './system_messages'\nexport * from './theme'\nexport * from './uri'\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/chat-react-native",
-  "version": "3.44.1-qa-874.0",
+  "version": "3.44.1-qa-875.0",
   "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-874.0",
+    "@planningcenter/emoji-keyboard": "3.44.1-qa-875.0",
     "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": "daeeded7a1784a81bbe37c495199a2fe5a0bf555"
+  "gitHead": "4a1e2d11d32c3d6b100d35c0aac5fe8d5fc60a59"
 }

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 } from '../../../utils'
+import { assertKeysAreNumbers, safeAspectRatio } 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: imageWidth / imageHeight,
+      aspectRatio: safeAspectRatio(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,13 +30,12 @@ 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 } from '../../../utils'
+import { Haptic, platformFontWeightMedium, safeAspectRatio } 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
@@ -167,6 +166,7 @@ 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 = WINDOW_WIDTH
-  const availableWindowHeight = WINDOW_HEIGHT - insets.top - insets.bottom
+  const availableWindowWidth = windowWidth
+  const availableWindowHeight = windowHeight - 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 = WINDOW_WIDTH / 2
-    const windowCenterY = WINDOW_HEIGHT / 2
+    const windowCenterX = windowWidth / 2
+    const windowCenterY = windowHeight / 2
 
     // Position of focal point relative to current image position
     const focalRelativeX = focalPointX - windowCenterX - currentSavedTranslateX
@@ -402,29 +402,32 @@ 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: WINDOW_WIDTH,
-      offset: WINDOW_WIDTH * index,
+      length: windowWidth,
+      offset: windowWidth * 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 / 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)
-    }
-  }, [])
+  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]
+  )
 
   // 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.
@@ -929,6 +932,7 @@ 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(),
@@ -946,7 +950,7 @@ const useStyles = ({ imageWidth = 100, imageHeight = 100 }: UseStylesProps = {})
     attachmentImageWrapper: {
       width: '100%',
       minWidth: 200,
-      aspectRatio: imageWidth / imageHeight,
+      aspectRatio: safeAspectRatio(imageWidth, imageHeight),
     },
     image: {
       borderRadius: 8,
@@ -960,7 +964,7 @@ const useStyles = ({ imageWidth = 100, imageHeight = 100 }: UseStylesProps = {})
     },
     gestureImage: {
       height: '100%',
-      width: WINDOW_WIDTH,
+      width: windowWidth,
       backgroundColor: 'transparent',
     },
     gestureImageLoading: {

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

@@ -3,6 +3,7 @@ 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'
@@ -58,7 +59,7 @@ export function VideoAttachment({
         <Video.Player
           ref={videoRef}
           source={{ uri: url }}
-          aspectRatio={width / height}
+          aspectRatio={safeAspectRatio(width, height)}
           style={styles.video}
           onFullscreenPlayerWillDismiss={onFullscreenPlayerWillDismiss}
         />

package/src/components/conversation/reply_shadow_message.tsx

@@ -18,7 +18,7 @@ import {
   DenormalizedExpandedLinkAttachmentResource,
   DenormalizedMessageAttachmentResource,
 } from '../../types/resources/denormalized_attachment_resource'
-import { assertKeysAreNumbers, pluralize } from '../../utils'
+import { assertKeysAreNumbers, pluralize, safeAspectRatio } from '../../utils'
 import {
   CONVERSATION_MESSAGE_LIST_PADDING_HORIZONTAL,
   MAX_FONT_SIZE_MULTIPLIER,
@@ -324,7 +324,7 @@ const useStyles = ({ mine, imageWidth = 32, imageHeight = 32 }: StylesProps = {}
     },
     imageWrapper: {
       width: 32 * fontScale,
-      aspectRatio: imageWidth / imageHeight,
+      aspectRatio: safeAspectRatio(imageWidth, imageHeight),
       opacity: 0.5,
     },
     image: {

package/src/components/display/badge.tsx

@@ -234,7 +234,9 @@ const useStyles = ({
       paddingVertical: variantStylesMap[variant].paddingVertical,
       paddingHorizontal: variantStylesMap[variant].paddingHorizontal,
       backgroundColor: variantStylesMap[variant].backgroundColor,
-      borderRadius: variantStylesMap[variant].borderRadius - 2,
+      // metaSubtle's borderRadius is 0, so this can't go below 0 - Android
+      // hard-throws on a negative borderRadius during layout.
+      borderRadius: Math.max(0, variantStylesMap[variant].borderRadius - 2),
     },
     icon: {
       color: statusColorMap[appearance].icon,

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 } =
+  const { data, refetch, isRefetching, fetchNextPage, hasNextPage, isFetchingNextPage } =
     useSuspensePaginator<MessageResource>(
       getMessagesRequestArgs({ conversation_id, reply_root_id }),
       opts
@@ -25,5 +25,13 @@ export const useConversationMessages = (
     [data]
   )
 
-  return { messages, refetch, isRefetching, fetchNextPage, hasNextPage, queryKey }
+  return {
+    messages,
+    refetch,
+    isRefetching,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    queryKey,
+  }
 }

package/src/navigation/index.tsx

@@ -178,10 +178,9 @@ export const ChatStack = createNativeStackNavigator({
         composeOptions(
           {
             headerTitle: (route.params as { title?: string })?.title ?? 'Chat',
+            headerBackVisible: false,
           },
-          withMinimalBack({
-            onPress: navigation.goBack,
-          })
+          withRightClose({ onPress: navigation.goBack })
         ),
     },
     ConversationFilters: {

package/src/screens/conversation_screen.tsx

@@ -91,7 +91,7 @@ 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 } = useConversationMessages({
+  const { messages, fetchNextPage, hasNextPage, isFetchingNextPage } = useConversationMessages({
     conversation_id,
     reply_root_id,
   })
@@ -216,7 +216,11 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
                 />
               )
             }}
-            onEndReached={() => fetchNextPage()}
+            onEndReached={() => {
+              // Android's inverted FlatList can refire onEndReached while a
+              // page fetch is already in flight, queueing unbounded requests.
+              if (hasNextPage && !isFetchingNextPage) fetchNextPage()
+            }}
             ListHeaderComponent={<View style={styles.listHeader} />}
           />
         )}
@@ -377,7 +381,10 @@ export const ConversationScreenTitle = ({
 const usePressableHeaderStyle = () => {
   const { width } = useWindowDimensions()
   const slotReserve = useHeaderSlotReserve()
-  const headerContainerStyle = { maxWidth: width - slotReserve * 2 }
+
+  // Guards split-screen/DeX widths where slotReserve * 2 exceeds the
+  // available width, which would otherwise resolve to a negative maxWidth.
+  const headerContainerStyle = { maxWidth: Math.max(0, width - slotReserve * 2) }
 
   return StyleSheet.create({
     container: {

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

@@ -0,0 +1,50 @@
+import { safeAspectRatio } from '../aspect_ratio'
+
+describe('safeAspectRatio', () => {
+  it.each([
+    [200, 100, 2],
+    [100, 200, 0.5],
+    [100, 100, 1],
+  ])('divides width %p by height %p to get %p', (width, height, expected) => {
+    expect(safeAspectRatio(width, height)).toBe(expected)
+  })
+
+  describe('with values that would produce a non-positive or non-finite ratio', () => {
+    it.each([
+      [0, 100],
+      [100, 0],
+      [0, 0],
+      [-100, 100],
+      [100, -100],
+      [undefined, 100],
+      [100, undefined],
+      [undefined, undefined],
+      [NaN, 100],
+      [100, NaN],
+      [Infinity, 100],
+    ])('falls back to 1 for width %p, height %p', (width, height) => {
+      expect(safeAspectRatio(width, height)).toBe(1)
+    })
+  })
+
+  it('falls back to a caller-supplied value instead of the default', () => {
+    expect(safeAspectRatio(0, 100, 0.75)).toBe(0.75)
+  })
+
+  it('never returns 0, a negative number, or a non-finite number', () => {
+    const invertedFallbackCases: Array<[number | undefined, number | undefined]> = [
+      [0, 100],
+      [100, 0],
+      [-100, 100],
+      [NaN, 100],
+      [Infinity, 100],
+    ]
+
+    for (const [width, height] of invertedFallbackCases) {
+      const ratio = safeAspectRatio(width, height)
+      expect(ratio).not.toBe(0)
+      expect(Number.isFinite(ratio)).toBe(true)
+      expect(ratio).toBeGreaterThan(0)
+    }
+  })
+})

package/src/utils/aspect_ratio.ts

@@ -0,0 +1,13 @@
+// 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.
+export const safeAspectRatio = (
+  width: number | undefined,
+  height: number | undefined,
+  fallback = 1
+): number => {
+  if (!width || !height) return fallback
+
+  const ratio = width / height
+  return Number.isFinite(ratio) && ratio > 0 ? ratio : fallback
+}

package/src/utils/index.ts

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