@planningcenter/chat-react-native 3.44.1-qa-875.0 → 3.44.1-rc.1

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/reply_shadow_message.tsx

@@ -18,7 +18,7 @@ import {
   DenormalizedExpandedLinkAttachmentResource,
   DenormalizedMessageAttachmentResource,
 } from '../../types/resources/denormalized_attachment_resource'
-import { assertKeysAreNumbers, pluralize, safeAspectRatio } from '../../utils'
+import { assertKeysAreNumbers, pluralize } 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: safeAspectRatio(imageWidth, imageHeight),
+      aspectRatio: imageWidth / imageHeight,
       opacity: 0.5,
     },
     image: {

package/src/components/display/badge.tsx

@@ -234,9 +234,7 @@ const useStyles = ({
       paddingVertical: variantStylesMap[variant].paddingVertical,
       paddingHorizontal: variantStylesMap[variant].paddingHorizontal,
       backgroundColor: variantStylesMap[variant].backgroundColor,
-      // 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),
+      borderRadius: 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, 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

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

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/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/build/utils/aspect_ratio.d.ts

@@ -1,2 +0,0 @@
-export declare const safeAspectRatio: (width: number | undefined, height: number | undefined, fallback?: number) => number;
-//# sourceMappingURL=aspect_ratio.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"aspect_ratio.d.ts","sourceRoot":"","sources":["../../src/utils/aspect_ratio.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,eAAe,GAC1B,OAAO,MAAM,GAAG,SAAS,EACzB,QAAQ,MAAM,GAAG,SAAS,EAC1B,iBAAY,KACX,MAKF,CAAA"}

package/build/utils/aspect_ratio.js

@@ -1,10 +0,0 @@
-// 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, height, fallback = 1) => {
-    if (!width || !height)
-        return fallback;
-    const ratio = width / height;
-    return Number.isFinite(ratio) && ratio > 0 ? ratio : fallback;
-};
-//# sourceMappingURL=aspect_ratio.js.map

package/build/utils/aspect_ratio.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"aspect_ratio.js","sourceRoot":"","sources":["../../src/utils/aspect_ratio.ts"],"names":[],"mappings":"AAAA,4EAA4E;AAC5E,qEAAqE;AACrE,wEAAwE;AACxE,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,KAAyB,EACzB,MAA0B,EAC1B,QAAQ,GAAG,CAAC,EACJ,EAAE;IACV,IAAI,CAAC,KAAK,IAAI,CAAC,MAAM;QAAE,OAAO,QAAQ,CAAA;IAEtC,MAAM,KAAK,GAAG,KAAK,GAAG,MAAM,CAAA;IAC5B,OAAO,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAA;AAC/D,CAAC,CAAA","sourcesContent":["// Android hard-throws when a <Text>/<Image> is measured with a non-positive\n// resolved width (`Layout: -2 < 0`), so any aspectRatio derived from\n// attachment metadata must never resolve to 0, negative, or non-finite.\nexport const safeAspectRatio = (\n  width: number | undefined,\n  height: number | undefined,\n  fallback = 1\n): number => {\n  if (!width || !height) return fallback\n\n  const ratio = width / height\n  return Number.isFinite(ratio) && ratio > 0 ? ratio : fallback\n}\n"]}

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

@@ -1,50 +0,0 @@
-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

@@ -1,13 +0,0 @@
-// 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
-}