@planningcenter/chat-react-native 4.3.1-rc.0 → 4.4.0-rc.1

package/src/hooks/use_animated_message_background_color.ts

@@ -1,43 +1,68 @@
+import { useCallback } from 'react'
 import { Platform } from 'react-native'
 import {
   useSharedValue,
   useAnimatedStyle,
+  withDelay,
+  withSequence,
   withTiming,
   interpolateColor,
   Easing,
+  ReduceMotion,
 } from 'react-native-reanimated'
 import { useTheme } from './use_theme'
 
+const FLASH_IN_MS = 150
+const FLASH_HOLD_MS = 500
+const FLASH_OUT_MS = 1500
+
 export function useAnimatedMessageBackgroundColor() {
   const { colors } = useTheme()
-  const bgFadeProgress = useSharedValue(0)
+  const pressProgress = useSharedValue(0)
+  const flashProgress = useSharedValue(0)
 
-  const pressedColor = Platform.select({
-    ios: colors.fillColorNeutral050Base,
-    default: 'transparent',
-  })
+  const tintColor = colors.fillColorNeutral050Base
+  const tintsOnPress = Platform.OS === 'ios'
 
   const animatedBackgroundColor = useAnimatedStyle(() => {
-    const backgroundColor = interpolateColor(
-      bgFadeProgress.value,
-      [0, 1],
-      ['transparent', pressedColor]
-    )
+    const pressTint = tintsOnPress ? pressProgress.value : 0
+    const progress = Math.max(pressTint, flashProgress.value)
+    const backgroundColor = interpolateColor(progress, [0, 1], ['transparent', tintColor])
     return {
       backgroundColor,
     }
   })
 
   const handleMessagePressIn = () => {
-    bgFadeProgress.value = withTiming(1, { duration: 300, easing: Easing.inOut(Easing.ease) })
+    pressProgress.value = withTiming(1, { duration: 300, easing: Easing.inOut(Easing.ease) })
   }
 
   const handleMessagePressOut = () => {
-    bgFadeProgress.value = withTiming(0, { duration: 300, easing: Easing.inOut(Easing.ease) })
+    pressProgress.value = withTiming(0, { duration: 300, easing: Easing.inOut(Easing.ease) })
   }
 
+  const flash = useCallback(() => {
+    flashProgress.value = withSequence(
+      withTiming(1, {
+        duration: FLASH_IN_MS,
+        easing: Easing.out(Easing.ease),
+        reduceMotion: ReduceMotion.Never,
+      }),
+      withDelay(
+        FLASH_HOLD_MS,
+        withTiming(0, {
+          duration: FLASH_OUT_MS,
+          easing: Easing.out(Easing.ease),
+          reduceMotion: ReduceMotion.System,
+        }),
+        ReduceMotion.Never
+      )
+    )
+  }, [flashProgress])
+
   return {
     animatedBackgroundColor,
+    flash,
     handleMessagePressIn,
     handleMessagePressOut,
   }

package/src/screens/search/__tests__/search_screen.test.tsx

@@ -1,8 +1,19 @@
 import { act, fireEvent, render } from '@testing-library/react-native'
 import React from 'react'
+import { Keyboard } from 'react-native'
 import type { useSearchResults } from '../../../hooks/use_search_results'
+import type {
+  ConversationSearchResultResource,
+  MessageSearchResultResource,
+} from '../../../types/resources/search_result'
 import { SearchScreen } from '../search_screen'
 
+const mockNavigate = jest.fn()
+jest.mock('@react-navigation/native', () => ({
+  ...jest.requireActual('@react-navigation/native'),
+  useNavigation: () => ({ navigate: mockNavigate }),
+}))
+
 const mockUseSearchResults = jest.fn<ReturnType<typeof useSearchResults>, [string]>()
 jest.mock('../../../hooks/use_search_results', () => ({
   useSearchResults: (term: string) => mockUseSearchResults(term),
@@ -14,8 +25,48 @@ jest.mock('../../../components/display/keyboard_view', () => ({
 
 const inputLabel = 'Search titles and messages'
 
+const conversationResult: ConversationSearchResultResource = {
+  type: 'conversation',
+  id: '42',
+  title: 'Budget Team',
+  url: '/conversations/42',
+  extra: { avatar: { previewAvatarUrls: [] } },
+}
+
+const messageResult: MessageSearchResultResource = {
+  type: 'message',
+  id: '01JMESSAGEULID',
+  title: 'Finance',
+  url: '/conversations/7/messages/01JMESSAGEULID',
+  extra: {
+    conversationId: 7,
+    authorName: 'Ann',
+    snippet: [{ text: 'budget', match: true }],
+    createdAt: '2026-01-01T00:00:00Z',
+    avatar: { previewAvatarUrls: [] },
+  },
+}
+
+const renderWithResults = () => {
+  mockUseSearchResults.mockReturnValue({
+    results: [conversationResult, messageResult],
+    failedTypes: [],
+    isPending: false,
+    isError: false,
+    isFetchNextPageError: false,
+    loadMore: jest.fn(),
+    hasNextPage: false,
+    isFetchingNextPage: false,
+  })
+  const view = render(<SearchScreen />)
+  fireEvent.changeText(view.getByLabelText(inputLabel), 'budget')
+  act(() => jest.advanceTimersByTime(200))
+  return view
+}
+
 beforeEach(() => {
   jest.useFakeTimers()
+  mockNavigate.mockReset()
   mockUseSearchResults.mockReset().mockReturnValue({
     results: [],
     failedTypes: [],
@@ -61,4 +112,29 @@ describe('SearchScreen', () => {
 
     expect(view.getByText('Search chat')).toBeTruthy()
   })
+
+  it('opens a conversation result at the latest message', () => {
+    const dismiss = jest.spyOn(Keyboard, 'dismiss')
+    const view = renderWithResults()
+
+    fireEvent.press(view.getByLabelText('Budget Team'))
+
+    expect(dismiss).toHaveBeenCalled()
+    expect(mockNavigate).toHaveBeenCalledWith('Conversation', {
+      conversation_id: 42,
+      title: 'Budget Team',
+    })
+  })
+
+  it('opens a message result anchored at that message', () => {
+    const view = renderWithResults()
+
+    fireEvent.press(view.getByLabelText(/^Finance, Ann: budget/))
+
+    expect(mockNavigate).toHaveBeenCalledWith('Conversation', {
+      conversation_id: 7,
+      initial_message_id: '01JMESSAGEULID',
+      title: 'Finance',
+    })
+  })
 })

package/src/screens/search/search_screen.tsx

@@ -1,17 +1,17 @@
-import { ParamListBase } from '@react-navigation/native'
+import { ParamListBase, useNavigation } from '@react-navigation/native'
 import {
   NativeStackNavigationOptions,
   NativeStackScreenProps,
 } from '@react-navigation/native-stack'
-import { noop } from 'lodash'
 import React, { useState } from 'react'
-import { StyleSheet, View } from 'react-native'
+import { Keyboard, StyleSheet, View } from 'react-native'
 import { KeyboardView } from '../../components'
 import {
   composeOptions,
   withMinimalBack,
 } from '../../components/display/platform_modal_header_buttons'
 import { useDebouncedSearchTerm } from '../../hooks/use_debounced_search_term'
+import type { SearchResultResource } from '../../types/resources/search_result'
 import { SearchPromptBlankState } from './components/search_blank_states'
 import { SearchField } from './components/search_field'
 import { SearchResultsList } from './components/search_results_list'
@@ -25,15 +25,33 @@ export const SearchScreenOptions = ({
   )
 
 export function SearchScreen() {
+  const navigation = useNavigation()
   const [term, setTerm] = useState('')
   const debouncedTerm = useDebouncedSearchTerm(term)
 
+  const openResult = (result: SearchResultResource) => {
+    Keyboard.dismiss()
+
+    if (result.type === 'conversation') {
+      navigation.navigate('Conversation', {
+        conversation_id: Number(result.id),
+        title: result.title,
+      })
+    } else {
+      navigation.navigate('Conversation', {
+        conversation_id: result.extra.conversationId,
+        initial_message_id: result.id,
+        title: result.title,
+      })
+    }
+  }
+
   return (
     <KeyboardView>
       <View style={styles.container} testID="search-screen">
         <SearchField term={term} onChange={setTerm} />
         {debouncedTerm.length > 0 ? (
-          <SearchResultsList key={debouncedTerm} term={debouncedTerm} onSelect={noop} />
+          <SearchResultsList key={debouncedTerm} term={debouncedTerm} onSelect={openResult} />
         ) : (
           <SearchPromptBlankState />
         )}