@planningcenter/chat-react-native 3.38.0-rc.0 → 3.38.0-rc.10

package/src/components/display/icon_avatar.tsx

@@ -26,13 +26,21 @@ interface IconAvatarProps {
   iconKey: string
   color?: string | null
   size?: AvatarRootProps['size']
+  maxFontSizeMultiplier?: AvatarRootProps['maxFontSizeMultiplier']
+  style?: AvatarRootProps['style']
 }
 
 function findIcon(iconKey: string): IconDefinition | undefined {
   return findIconDefinition({ prefix: 'fas', iconName: iconKey as IconName })
 }
 
-export function IconAvatar({ iconKey, color, size = 'lg' }: IconAvatarProps) {
+export function IconAvatar({
+  iconKey,
+  color,
+  size = 'lg',
+  maxFontSizeMultiplier,
+  style,
+}: IconAvatarProps) {
   const gradientProps = getAvatarGradientProps(color)
   const iconDef = findIcon(iconKey)
 
@@ -41,7 +49,7 @@ export function IconAvatar({ iconKey, color, size = 'lg' }: IconAvatarProps) {
   }
 
   return (
-    <AvatarPrimitive.Root size={size}>
+    <AvatarPrimitive.Root size={size} maxFontSizeMultiplier={maxFontSizeMultiplier} style={style}>
       <AvatarPrimitive.Mask>
         <LinearGradient {...gradientProps} style={styles.gradientFill}>
           <View style={styles.contentContainer}>

package/src/hooks/groups/use_group_chat_conversation_payload.ts

@@ -26,6 +26,7 @@ export function useGroupChatConversationPayload({ groupId, enabled = true }: Pro
         },
       }),
     staleTime: STALE_TIME_MS,
+    refetchOnMount: 'always',
     enabled,
   })
 

package/src/hooks/index.ts

@@ -16,6 +16,7 @@ export * from './use_message_reaction_toggle'
 export * from './use_new_conversation_entry'
 export * from './use_organization'
 export * from './use_people_person'
+export * from './use_preview_avatar_diameter'
 export * from './use_product_analytics'
 export * from './use_qualified_by_age'
 export * from './use_scalable_number_of_lines'

package/src/hooks/use_preview_avatar_diameter.ts

@@ -0,0 +1,12 @@
+import { useWindowDimensions } from 'react-native'
+import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../utils'
+import { useFontScale } from './use_font_scale'
+
+const VIEWPORT_FRACTION = 0.22
+const BASE_DIAMETER = 80
+
+export function usePreviewAvatarDiameter() {
+  const { width } = useWindowDimensions()
+  const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER_LANDMARK })
+  return Math.min(BASE_DIAMETER * fontScale, width * VIEWPORT_FRACTION)
+}

package/src/jest.ts

@@ -16,6 +16,6 @@
  */
 export const jestTransformPackages = [
   '@planningcenter/chat-react-native',
+  '@planningcenter/emoji-keyboard',
   '@fortawesome',
-  'rn-emoji-keyboard',
 ]

package/src/screens/age_check/age_check_underage_screen.tsx

@@ -31,7 +31,7 @@ export function AgeCheckUnderageScreen({ contactEmail }: AgeCheckUnderageScreenP
 
       <View style={styles.content}>
         <Heading variant="h3" style={styles.baseText}>
-          Your age does not meet the minimum safety requirements to use chat.
+          Chat is only available for users 13 and older.
         </Heading>
         <Text variant="tertiary" style={styles.baseText}>
           If you submitted the wrong birthdate by accident,{` `}

package/src/screens/avatar_picker/avatar_picker_screen.tsx

@@ -13,6 +13,8 @@ import {
   type AvatarUpdatePayload,
 } from '../../hooks/use_conversation_avatar_update'
 import { useFontScale } from '../../hooks/use_font_scale'
+import { usePreviewAvatarDiameter } from '../../hooks/use_preview_avatar_diameter'
+import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'
 import type { ImagePickerAsset } from '../../utils/native_adapters/image_picker'
 import {
   avatarPickerReducer,
@@ -71,6 +73,7 @@ function EditModeContent({ conversationId }: { conversationId: number }) {
   const navigation = useNavigation()
   const { data: conversation } = useConversation({ conversation_id: conversationId })
   const mutation = useConversationAvatarUpdate({ conversationId })
+  const previewDiameter = usePreviewAvatarDiameter()
 
   const [state, dispatch] = useReducer(avatarPickerReducer, conversation, initAvatarPickerState)
 
@@ -110,7 +113,14 @@ function EditModeContent({ conversationId }: { conversationId: number }) {
           </FormSheet.HeaderTextButton>
         </>
       }
-      fallbackPreview={<ConversationAvatar conversation={conversation} size="2xl" />}
+      fallbackPreview={
+        <ConversationAvatar
+          conversation={conversation}
+          size="2xl"
+          maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+          style={{ width: previewDiameter, height: previewDiameter }}
+        />
+      }
     />
   )
 }
@@ -187,7 +197,10 @@ function AvatarPickerFormSheet({
         activeTab={state.activeTab}
         onTabPress={tab => dispatch({ type: 'SELECT_TAB', payload: tab })}
         renderItem={({ item }) => (
-          <Text style={[styles.tabLabel, item === state.activeTab && styles.tabLabelActive]}>
+          <Text
+            style={[styles.tabLabel, item === state.activeTab && styles.tabLabelActive]}
+            maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+          >
             {TAB_LABELS[item]}
           </Text>
         )}
@@ -226,7 +239,15 @@ function AvatarPickerFormSheet({
 
 function EmptyAvatarPlaceholder() {
   const styles = useStyles()
-  return <View style={styles.emptyAvatarPlaceholder} />
+  const diameter = usePreviewAvatarDiameter()
+  return (
+    <View
+      style={[
+        styles.emptyAvatarPlaceholder,
+        { width: diameter, height: diameter, borderRadius: diameter / 2 },
+      ]}
+    />
+  )
 }
 
 type ValidAvatarPickerState = AvatarPickerState &
@@ -264,9 +285,7 @@ function buildPayload(state: AvatarPickerState): AvatarUpdatePayload | null {
 
 const useStyles = () => {
   const { colors } = useTheme()
-  const fontScale = useFontScale({ maxFontSizeMultiplier: 1.3 })
-  const uncappedFontScale = useFontScale()
-  const emptyAvatarDiameter = 80 * uncappedFontScale
+  const fontScale = useFontScale({ maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER_LANDMARK })
 
   return StyleSheet.create({
     formSheetRoot: {
@@ -301,9 +320,6 @@ const useStyles = () => {
       borderTopColor: colors.borderColorDefaultBase,
     },
     emptyAvatarPlaceholder: {
-      width: emptyAvatarDiameter,
-      height: emptyAvatarDiameter,
-      borderRadius: emptyAvatarDiameter / 2,
       borderWidth: 2,
       borderStyle: 'dashed',
       borderColor: colors.borderColorDefaultBase,

package/src/screens/avatar_picker/avatar_preview.tsx

@@ -3,6 +3,8 @@ import { StyleSheet, View } from 'react-native'
 import { EmojiAvatar } from '../../components/display/emoji_avatar'
 import { IconAvatar } from '../../components/display/icon_avatar'
 import AvatarPrimitive from '../../components/primitive/avatar_primitive'
+import { usePreviewAvatarDiameter } from '../../hooks/use_preview_avatar_diameter'
+import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'
 import type { AvatarPickerState } from './avatar_picker_state'
 
 interface AvatarPreviewProps {
@@ -10,18 +12,24 @@ interface AvatarPreviewProps {
   fallback: React.ReactNode
 }
 
-function getPreviewNode(state: AvatarPickerState): React.ReactNode {
+function getPreviewNode(state: AvatarPickerState, diameter: number): React.ReactNode {
+  const sizeProps = {
+    size: '2xl',
+    maxFontSizeMultiplier: MAX_FONT_SIZE_MULTIPLIER_LANDMARK,
+    style: { width: diameter, height: diameter },
+  } as const
+
   switch (state.selectedType) {
     case 'icon':
       if (!state.selectedKey) return null
-      return <IconAvatar iconKey={state.selectedKey} color={state.selectedColor} size="2xl" />
+      return <IconAvatar iconKey={state.selectedKey} color={state.selectedColor} {...sizeProps} />
     case 'emoji':
       if (!state.selectedKey) return null
-      return <EmojiAvatar emoji={state.selectedKey} color={state.selectedColor} size="2xl" />
+      return <EmojiAvatar emoji={state.selectedKey} color={state.selectedColor} {...sizeProps} />
     case 'image':
       if (!state.imagePreviewUri) return null
       return (
-        <AvatarPrimitive.Root size="2xl">
+        <AvatarPrimitive.Root {...sizeProps}>
           <AvatarPrimitive.Mask>
             <AvatarPrimitive.Image sourceUri={state.imagePreviewUri} />
           </AvatarPrimitive.Mask>
@@ -33,7 +41,8 @@ function getPreviewNode(state: AvatarPickerState): React.ReactNode {
 }
 
 export function AvatarPreview({ state, fallback }: AvatarPreviewProps) {
-  const preview = getPreviewNode(state)
+  const diameter = usePreviewAvatarDiameter()
+  const preview = getPreviewNode(state, diameter)
   return <View style={styles.container}>{preview ?? fallback}</View>
 }
 

package/src/screens/avatar_picker/emoji_tab.tsx

@@ -1,15 +1,11 @@
+import { EmojiKeyboard, emojisByCategory, type EmojiType } from '@planningcenter/emoji-keyboard'
 import React, { useCallback } from 'react'
 import { StyleSheet, View } from 'react-native'
-import { EmojiKeyboard, type EmojiType, type EmojisByCategory } from 'rn-emoji-keyboard'
-// rn-emoji-keyboard exposes no public exclusion API, so we reach into its
-// internal src/ tree for the emoji JSON. Version is pinned in package.json
-// — verify this path still resolves before bumping rn-emoji-keyboard.
-import emojiData from 'rn-emoji-keyboard/src/assets/emojis.json'
 import { useTheme } from '../../hooks'
 
 const BLOCKED_EMOJIS = new Set(['🖕'])
 
-const filteredEmojis = (emojiData as EmojisByCategory[]).map(category => ({
+const filteredEmojis = emojisByCategory.map(category => ({
   ...category,
   data: category.data.filter(e => !BLOCKED_EMOJIS.has(e.emoji)),
 }))
@@ -57,6 +53,7 @@ export function EmojiTab({ onEmojiSelect }: EmojiTabProps) {
         categoryPosition="top"
         emojisByCategory={filteredEmojis}
         onEmojiSelected={handleEmojiSelected}
+        hideHeader
         enableSearchBar
         enableRecentlyUsed
         theme={emojiTheme}

package/src/screens/avatar_picker/upload_tab.tsx

@@ -2,6 +2,7 @@ import React, { useCallback } from 'react'
 import { Alert, StyleSheet, View } from 'react-native'
 import { Button } from '../../components'
 import { useTheme } from '../../hooks'
+import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'
 import { ImagePicker } from '../../utils/native_adapters'
 import type { ImagePickerAsset } from '../../utils/native_adapters/image_picker'
 
@@ -43,6 +44,7 @@ export function UploadTab({ imagePreviewUri, onImageSelect }: UploadTabProps) {
         variant="outline"
         appearance="interaction"
         size="md"
+        maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
       />
     </View>
   )

package/src/screens/conversation_details_screen.tsx

@@ -49,8 +49,10 @@ import {
   useConversationUpdate,
 } from '../hooks/use_conversation'
 import { availableFeatures, useFeatures } from '../hooks/use_features'
+import { usePreviewAvatarDiameter } from '../hooks/use_preview_avatar_diameter'
 import { type ConversationResource, MemberResource, isDefined } from '../types'
 import { GroupResource } from '../types/resources/group_resource'
+import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../utils'
 import { genderDisplayLabel } from '../utils/gender_display_label'
 import { tokens } from '../vendor/tapestry/tokens'
 // =========================================
@@ -634,10 +636,16 @@ function AvatarCard({
   onPress: () => void
 }) {
   const styles = useStyles()
+  const diameter = usePreviewAvatarDiameter()
 
   return (
     <View style={styles.avatarCard}>
-      <ConversationAvatar conversation={conversation} size="2xl" />
+      <ConversationAvatar
+        conversation={conversation}
+        size="2xl"
+        maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
+        style={{ width: diameter, height: diameter }}
+      />
       <Button
         title="Update avatar"
         iconNameLeft="general.pencil"
@@ -645,6 +653,7 @@ function AvatarCard({
         variant="outline"
         appearance="interaction"
         size="sm"
+        maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
       />
     </View>
   )

package/src/screens/conversation_filter_recipients/components/header_row.tsx

@@ -24,6 +24,7 @@ export const HeaderRow = ({ data, nativeID, style, setTeamFilters }: HeaderRowPr
   const route = useRoute<RouteProp<ConversationFilterRecipientsScreenProps['route']>>()
 
   const { serviceTypeName, teamIdsForServiceType } = data
+  const displayName = serviceTypeName ?? 'No service type'
   const { team_ids: currentTeamIds = [] } = route.params
 
   const newTeamIdsAdded = [...new Set([...currentTeamIds, ...teamIdsForServiceType])]
@@ -34,7 +35,7 @@ export const HeaderRow = ({ data, nativeID, style, setTeamFilters }: HeaderRowPr
   const selectLabel = allTeamsSelected ? 'Deselect' : 'Select'
 
   const headingAccessibilityHint = `${pluralize(teamIdsForServiceType.length, 'team')} available to select`
-  const selectAllAccessibilityLabel = `${selectLabel} ${pluralize(teamIdsForServiceType.length, 'team')} for ${serviceTypeName}`
+  const selectAllAccessibilityLabel = `${selectLabel} ${pluralize(teamIdsForServiceType.length, 'team')} for ${displayName}`
 
   const handleSelectAll = () => {
     setTeamFilters({
@@ -53,7 +54,7 @@ export const HeaderRow = ({ data, nativeID, style, setTeamFilters }: HeaderRowPr
           nativeID={nativeID}
           accessibilityHint={headingAccessibilityHint}
         >
-          {serviceTypeName}
+          {displayName}
         </Heading>
       </View>
 

package/src/screens/conversation_filter_recipients/hooks/__tests__/use_service_types_with_teams.test.ts

@@ -0,0 +1,108 @@
+import type { TeamResponseItem } from '../../../../types'
+import { decorateTeamResponseItems } from '../use_service_types_with_teams'
+
+const makeTeam = (
+  overrides: Partial<TeamResponseItem> & { teamId: number; teamName: string }
+): TeamResponseItem => ({
+  name: overrides.teamName,
+  value: {
+    teamId: overrides.teamId,
+    serviceTypeId: overrides.value?.serviceTypeId ?? 0,
+    serviceTypeIds: overrides.value?.serviceTypeIds ?? [],
+  },
+  serviceTypeName: overrides.serviceTypeName ?? '',
+  serviceTypeNames: overrides.serviceTypeNames ?? [],
+  serviceTypeAcronyms: overrides.serviceTypeAcronyms ?? [],
+  teamName: overrides.teamName,
+  order: overrides.order ?? [0, '', overrides.teamName],
+})
+
+describe('decorateTeamResponseItems', () => {
+  it('groups teams under their service types', () => {
+    const items = [
+      makeTeam({
+        teamId: 1,
+        teamName: 'Worship',
+        value: { teamId: 1, serviceTypeId: 10, serviceTypeIds: [10] },
+        serviceTypeNames: ['Sunday Morning'],
+      }),
+    ]
+
+    const result = decorateTeamResponseItems(items)
+
+    expect(result).toHaveLength(1)
+    expect(result[0]).toMatchObject({ id: 10, name: 'Sunday Morning', teams: [{ id: 1 }] })
+  })
+
+  it('gives each team without a service type its own bucket', () => {
+    const items = [
+      makeTeam({
+        teamId: 58,
+        teamName: 'Services Team 58',
+        value: { teamId: 58, serviceTypeId: 0, serviceTypeIds: [] },
+        serviceTypeNames: [],
+      }),
+      makeTeam({
+        teamId: 99,
+        teamName: 'Another Typeless Team',
+        value: { teamId: 99, serviceTypeId: 0, serviceTypeIds: [] },
+        serviceTypeNames: [],
+      }),
+    ]
+
+    const result = decorateTeamResponseItems(items)
+
+    expect(result).toHaveLength(2)
+    expect(result[0]).toMatchObject({ id: -58, name: 'Services Team 58', teams: [{ id: 58 }] })
+    expect(result[1]).toMatchObject({
+      id: -99,
+      name: 'Another Typeless Team',
+      teams: [{ id: 99 }],
+    })
+  })
+
+  it('places teams with and without service types in the right buckets', () => {
+    const items = [
+      makeTeam({
+        teamId: 1,
+        teamName: 'Worship',
+        value: { teamId: 1, serviceTypeId: 10, serviceTypeIds: [10] },
+        serviceTypeNames: ['Sunday Morning'],
+      }),
+      makeTeam({
+        teamId: 58,
+        teamName: 'Services Team 58',
+        value: { teamId: 58, serviceTypeId: 0, serviceTypeIds: [] },
+        serviceTypeNames: [],
+      }),
+    ]
+
+    const result = decorateTeamResponseItems(items)
+
+    expect(result).toHaveLength(2)
+    expect(result[0]).toMatchObject({ id: -58, name: 'Services Team 58', teams: [{ id: 58 }] })
+    expect(result[1]).toMatchObject({ id: 10, name: 'Sunday Morning' })
+  })
+
+  it('filters by search query, matching teams without service types by name', () => {
+    const items = [
+      makeTeam({
+        teamId: 58,
+        teamName: 'Services Team 58',
+        value: { teamId: 58, serviceTypeId: 0, serviceTypeIds: [] },
+        serviceTypeNames: [],
+      }),
+      makeTeam({
+        teamId: 99,
+        teamName: 'Unrelated Team',
+        value: { teamId: 99, serviceTypeId: 0, serviceTypeIds: [] },
+        serviceTypeNames: [],
+      }),
+    ]
+
+    const result = decorateTeamResponseItems(items, 'Services Team')
+
+    expect(result).toHaveLength(1)
+    expect(result[0]).toMatchObject({ id: -58, name: 'Services Team 58', teams: [{ id: 58 }] })
+  })
+})

package/src/screens/conversation_filter_recipients/hooks/use_flattened_array_of_service_types_with_teams.tsx

@@ -13,9 +13,10 @@ export function useFlattenedArrayOfServiceTypesWithTeams({
   firstRowStyle,
   lastRowStyle,
 }: Props) {
-  const flattenedData: SectionListData = useMemo(
-    () =>
-      data.flatMap(serviceType => {
+  const flattenedData: SectionListData = useMemo(() => {
+    const serviceTypeRows = data
+      .filter(serviceType => serviceType.id > 0)
+      .flatMap(serviceType => {
         const teamIdsForServiceType = serviceType.teams.map(team => team.id)
 
         return [
@@ -28,23 +29,49 @@ export function useFlattenedArrayOfServiceTypesWithTeams({
             },
             sectionStyle: firstRowStyle,
           },
-          ...serviceType.teams.map((team, teamIdx) => {
-            const isLastTeamInServiceType = teamIdx === serviceType.teams.length - 1
-
-            return {
-              type: SectionTypes.team as const,
-              data: {
-                teamName: team.name,
-                teamId: team.id,
-                serviceTypeId: serviceType.id,
-              },
-              sectionStyle: isLastTeamInServiceType ? lastRowStyle : undefined,
-            }
-          }),
+          ...serviceType.teams.map((team, teamIdx) => ({
+            type: SectionTypes.team as const,
+            data: {
+              teamName: team.name,
+              teamId: team.id,
+              serviceTypeId: serviceType.id,
+            },
+            sectionStyle: teamIdx === serviceType.teams.length - 1 ? lastRowStyle : undefined,
+          })),
         ]
-      }),
-    [data, firstRowStyle, lastRowStyle]
-  )
+      })
+
+    // Teams without a service type (id < 0) are merged under a single "No service type" section.
+    // Service type ID 0 is a safe sentinel — real IDs are always positive.
+    const serviceTypelessTeams = data
+      .filter(serviceType => serviceType.id < 0)
+      .flatMap(serviceType => serviceType.teams)
+
+    if (serviceTypelessTeams.length === 0) return serviceTypeRows
+
+    const serviceTypelessRows: SectionListData = [
+      {
+        type: SectionTypes.header as const,
+        data: {
+          serviceTypeName: null,
+          serviceTypeId: 0,
+          teamIdsForServiceType: serviceTypelessTeams.map(t => t.id),
+        },
+        sectionStyle: firstRowStyle,
+      },
+      ...serviceTypelessTeams.map((team, teamIdx) => ({
+        type: SectionTypes.team as const,
+        data: {
+          teamName: team.name,
+          teamId: team.id,
+          serviceTypeId: 0,
+        },
+        sectionStyle: teamIdx === serviceTypelessTeams.length - 1 ? lastRowStyle : undefined,
+      })),
+    ]
+
+    return [...serviceTypelessRows, ...serviceTypeRows]
+  }, [data, firstRowStyle, lastRowStyle])
 
   return flattenedData
 }

package/src/screens/conversation_filter_recipients/hooks/use_service_types_with_teams.ts

@@ -59,45 +59,47 @@ const useTeams = ({ filterType }: { filterType: TeamFilterTypes }) => {
   return { data: result || [], ...rest }
 }
 
-function decorateTeamResponseItems(teamResponseItems: TeamResponseItem[], searchQuery?: string) {
-  return teamResponseItems
-    .filter(item => {
-      if (!searchQuery) return true
+export function decorateTeamResponseItems(
+  teamResponseItems: TeamResponseItem[],
+  searchQuery?: string
+) {
+  const filtered = teamResponseItems.filter(item => {
+    if (!searchQuery) return true
+    const evalMatch = (str: string) => str.toLowerCase().includes(searchQuery.toLowerCase())
+    return evalMatch(item.name) || evalMatch(item.serviceTypeNames?.join(',') || '')
+  })
 
-      const evalMatch = (str: string) => str.toLowerCase().includes(searchQuery.toLowerCase())
-      const teamNameMatch = evalMatch(item.name)
-      const serviceTypeNamesMatch = evalMatch(item.serviceTypeNames?.join(',') || '')
+  const withServiceTypes = filtered.filter(item => item.value.serviceTypeIds.length > 0)
+  const withoutServiceTypes = filtered.filter(item => item.value.serviceTypeIds.length === 0)
 
-      return teamNameMatch || serviceTypeNamesMatch
-    })
-    .map(({ value, serviceTypeNames, teamName }) => {
-      return {
-        service_types: value.serviceTypeIds.map((serviceTypeId, i) => ({
-          id: serviceTypeId,
-          name: serviceTypeNames[i],
-        })),
-        team: {
-          id: value.teamId,
-          name: teamName,
-        },
-      }
+  // Negative team ID is used as a unique sentinel — real service type IDs are always positive.
+  const typelessEntries: ServiceTypeWithTeams[] = withoutServiceTypes.map(
+    ({ value, teamName }) => ({
+      id: -value.teamId,
+      name: teamName,
+      teams: [{ id: value.teamId, name: teamName }],
     })
+  )
+
+  const typedEntries = withServiceTypes
+    .map(({ value, serviceTypeNames, teamName }) => ({
+      service_types: value.serviceTypeIds.map((serviceTypeId, i) => ({
+        id: serviceTypeId,
+        name: serviceTypeNames[i],
+      })),
+      team: { id: value.teamId, name: teamName },
+    }))
     .reduce((acc: ServiceTypeWithTeams[], { service_types, team }) => {
       service_types.forEach(serviceType => {
         let serviceTypeEntry = acc.find(entry => entry.id === serviceType.id)
-
         if (!serviceTypeEntry) {
-          serviceTypeEntry = {
-            id: serviceType.id,
-            name: serviceType.name,
-            teams: [],
-          }
+          serviceTypeEntry = { id: serviceType.id, name: serviceType.name, teams: [] }
           acc.push(serviceTypeEntry)
         }
-
-        const initialTeams = serviceTypeEntry.teams
-        serviceTypeEntry.teams = uniqBy([...initialTeams, team], 'id')
+        serviceTypeEntry.teams = uniqBy([...serviceTypeEntry.teams, team], 'id')
       })
       return acc
     }, [])
+
+  return [...typelessEntries, ...typedEntries]
 }

package/src/screens/conversation_filter_recipients/types.tsx

@@ -17,7 +17,7 @@ export enum SectionTypes {
 }
 
 export interface ServiceTypeProps {
-  serviceTypeName: string
+  serviceTypeName: string | null
   serviceTypeId: number
   teamIdsForServiceType: number[]
 }

package/src/screens/conversation_screen.tsx

@@ -9,7 +9,8 @@ import {
   useRoute,
 } from '@react-navigation/native'
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { ActivityIndicator, FlatList, Platform, StyleSheet, View } from 'react-native'
+import { ActivityIndicator, Platform, StyleSheet, View } from 'react-native'
+import type { FlatList } from 'react-native-gesture-handler'
 import Animated, { FadeIn, FadeOut } from 'react-native-reanimated'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
 import { Badge, Icon, Text } from '../components'
@@ -17,6 +18,7 @@ import { EmptyConversationBlankState } from '../components/conversation/empty_co
 import { JumpToBottomButton } from '../components/conversation/jump_to_bottom_button'
 import { Message } from '../components/conversation/message'
 import { MessageForm } from '../components/conversation/message_form'
+import { MessageList } from '../components/conversation/message_list'
 import {
   ConversationDisabledBanner,
   LeaderMessagesDisabledBanner,
@@ -85,9 +87,6 @@ export type ConversationRouteProps = {
 
 export type ConversationScreenProps = StaticScreenProps<ConversationRouteProps>
 
-const extractItemKey = (item: EnrichedMessage) => String(item.id)
-const maintainVisibleContentPosition = { minIndexForVisible: 0 }
-
 export function ConversationScreen({ route }: ConversationScreenProps) {
   const { conversation_id, message_id, reply_root_id } = route.params
 
@@ -300,16 +299,11 @@ function ConversationScreenContent({ route }: ConversationScreenProps) {
         {noMessages ? (
           <EmptyConversationBlankState />
         ) : (
-          <FlatList
-            inverted
-            ref={listRef}
-            contentContainerStyle={styles.listContainer}
-            maintainVisibleContentPosition={maintainVisibleContentPosition}
+          <MessageList
+            listRef={listRef}
             data={items}
-            keyExtractor={extractItemKey}
             onScroll={onScroll}
             onScrollBeginDrag={onScrollBeginDrag}
-            scrollEventThrottle={64}
             viewabilityConfigCallbackPairs={viewabilityConfigCallbackPairs}
             onContentSizeChange={onContentSizeChange}
             onScrollToIndexFailed={onScrollToIndexFailed}
@@ -499,9 +493,6 @@ const useStyles = () => {
       backgroundColor: navigationTheme.colors.card,
       paddingBottom: bottom,
     },
-    listContainer: {
-      paddingVertical: 12,
-    },
     listHeader: {
       // Just whitespace to provide space where the typing indicator can be
       height: 16,