@planningcenter/chat-react-native 4.3.0-rc.9 → 4.3.1-qa-989.0

package/src/contexts/__tests__/api_provider.test.tsx

@@ -0,0 +1,106 @@
+import { render, screen, waitFor } from '@testing-library/react-native'
+import React, { useContext, useMemo } from 'react'
+import { Text } from 'react-native'
+import { useApiGet } from '../../hooks/use_api'
+import { ApiClient, useApiClient } from '../../hooks/use_api_client'
+import { Session } from '../../utils'
+import { ApiProvider, chatQueryClient } from '../api_provider'
+import { ChatContext, ChatContextValue } from '../chat_context'
+
+jest.mock('../../hooks/use_api_client')
+
+const mockedUseApiClient = useApiClient as jest.MockedFunction<typeof useApiClient>
+
+type Deferred = { promise: Promise<unknown>; reject: (_reason: unknown) => void }
+
+const defer = (): Deferred => {
+  let reject: Deferred['reject'] = () => {}
+  const promise = new Promise((_, rej) => {
+    reject = rej
+  })
+  promise.catch(() => {})
+  return { promise, reject }
+}
+
+let get: jest.Mock
+let staleRequest: Deferred
+
+const meRequests = () =>
+  get.mock.calls.filter(([url]) => url === '/me').map(([, token]) => token as string)
+
+const Probe = () => {
+  const { status, fetchStatus, data } = useApiGet<{ type: 'Person'; id: number }>({
+    url: '/me',
+    data: { fields: { Person: ['id'] } },
+  })
+
+  return <Text>{`${status}:${fetchStatus}:${data?.id ?? ''}`}</Text>
+}
+
+const Tree = ({ accessToken }: { accessToken: string }) => {
+  const value = useMemo(() => {
+    const session = new Session({ token: { access_token: accessToken } })
+    return {
+      session,
+      token: session.token,
+      env: 'production',
+      onUnauthorizedResponse: () => {},
+    } as unknown as ChatContextValue
+  }, [accessToken])
+
+  return (
+    <ChatContext.Provider value={value}>
+      <ApiProvider>
+        <Probe />
+      </ApiProvider>
+    </ChatContext.Provider>
+  )
+}
+
+beforeAll(() => {
+  chatQueryClient.setDefaultOptions({
+    queries: { ...chatQueryClient.getDefaultOptions().queries, gcTime: 0 },
+  })
+})
+
+beforeEach(() => {
+  staleRequest = defer()
+  get = jest.fn((url: string, accessToken: string) => {
+    if (url !== '/me') return Promise.resolve({ data: [] })
+    if (accessToken === 'stale') return staleRequest.promise
+
+    return Promise.resolve({ data: { type: 'Person', id: 42 } })
+  })
+
+  mockedUseApiClient.mockImplementation(() => {
+    const { session } = useContext(ChatContext)
+    const accessToken = session.token?.access_token
+    const client = { get: ({ url }: { url: string }) => get(url, accessToken) }
+
+    return {
+      chat: client,
+      groups: client,
+      services: client,
+      people: client,
+    } as unknown as ApiClient
+  })
+})
+
+afterEach(() => {
+  chatQueryClient.clear()
+  jest.clearAllMocks()
+})
+
+describe('ApiProvider on access token change', () => {
+  it('restarts in-flight requests with the new token and ignores the stale result', async () => {
+    const { rerender } = render(<Tree accessToken="stale" />)
+    await waitFor(() => expect(meRequests()).toEqual(['stale']))
+
+    rerender(<Tree accessToken="fresh" />)
+    await waitFor(() => expect(meRequests()).toEqual(['stale', 'fresh']))
+
+    staleRequest.reject(new Response(null, { status: 401, statusText: 'Unauthorized' }))
+
+    expect(await screen.findByText('success:idle:42')).toBeTruthy()
+  })
+})

package/src/contexts/api_provider.tsx

@@ -9,9 +9,9 @@ import React, { useContext, useEffect, useRef } from 'react'
 import { ViewProps } from 'react-native'
 import { ApiClient, useApiClient } from '../hooks/use_api_client'
 import { useAppState } from '../hooks/use_app_state'
-import { appGrantsRequestArgs } from '../hooks/use_chat_permissions'
+import { appGrantsQueryOptions } from '../hooks/use_chat_permissions'
 import { featuresQueryOptions } from '../hooks/use_features'
-import { getRequestQueryKey, RequestQueryKey } from '../hooks/use_suspense_api'
+import { RequestQueryKey } from '../hooks/use_suspense_api'
 import { emitAuthRefresh } from '../utils/auth_events'
 import { ResponseError } from '../utils/response_error'
 import { ChatContext, ChatContextValue } from './chat_context'
@@ -48,7 +48,7 @@ export const chatQueryClient = new QueryClient({
 })
 
 export function ApiProvider({ children }: ViewProps) {
-  const { token, env } = useContext(ChatContext)
+  const { token, env, session } = useContext(ChatContext)
   const sessionChanged = useSessionChanged({ token, env })
 
   const client = useApiClient()
@@ -59,7 +59,7 @@ export function ApiProvider({ children }: ViewProps) {
     emitAuthRefresh()
 
     if (chatQueryClient.isFetching()) {
-      chatQueryClient.invalidateQueries()
+      chatQueryClient.cancelQueries().then(() => chatQueryClient.invalidateQueries())
       return
     }
 
@@ -72,7 +72,7 @@ export function ApiProvider({ children }: ViewProps) {
 
   return (
     <QueryClientProvider client={chatQueryClient}>
-      <PrefetchQueries />
+      {session.isAuthenticated && <PrefetchQueries />}
       {children}
     </QueryClientProvider>
   )
@@ -84,10 +84,7 @@ export function ApiProvider({ children }: ViewProps) {
 const PrefetchQueries = () => {
   const client = useApiClient()
 
-  usePrefetchQuery({
-    queryKey: getRequestQueryKey(appGrantsRequestArgs),
-    queryFn: defaultQueryFn,
-  })
+  usePrefetchQuery(appGrantsQueryOptions(client))
   usePrefetchQuery(featuresQueryOptions(client))
 
   return null

package/src/hooks/__tests__/use_debounced_search_term.test.tsx

@@ -0,0 +1,38 @@
+import { act, renderHook } from '@testing-library/react-native'
+import { useDebouncedSearchTerm } from '../use_debounced_search_term'
+
+beforeEach(() => jest.useFakeTimers())
+afterEach(() => jest.useRealTimers())
+
+describe('useDebouncedSearchTerm', () => {
+  it('settles on the trimmed term once typing pauses', () => {
+    const { result, rerender } = renderHook(
+      ({ term }: { term: string }) => useDebouncedSearchTerm(term),
+      {
+        initialProps: { term: 'bud' },
+      }
+    )
+
+    rerender({ term: ' budget ' })
+    act(() => jest.advanceTimersByTime(199))
+    expect(result.current).toBe('')
+
+    act(() => jest.advanceTimersByTime(1))
+    expect(result.current).toBe('budget')
+  })
+
+  it('clears immediately when the term empties', () => {
+    const { result, rerender } = renderHook(
+      ({ term }: { term: string }) => useDebouncedSearchTerm(term),
+      {
+        initialProps: { term: 'budget' },
+      }
+    )
+    act(() => jest.advanceTimersByTime(200))
+    expect(result.current).toBe('budget')
+
+    rerender({ term: '   ' })
+
+    expect(result.current).toBe('')
+  })
+})

package/src/hooks/__tests__/use_jolt.test.tsx

@@ -0,0 +1,70 @@
+import { QueryClientProvider } from '@tanstack/react-query'
+import { render, waitFor } from '@testing-library/react-native'
+import React, { PropsWithChildren, Suspense } from 'react'
+import { buildTestQueryClient } from '../../__utils__/query_client'
+import { ChatContext, ChatContextValue } from '../../contexts/chat_context'
+import { Session } from '../../utils'
+import { Client } from '../../utils/client'
+import { ResponseError } from '../../utils/response_error'
+import { useJoltClient } from '../use_jolt'
+
+let caught: unknown
+
+class Catch extends React.Component<PropsWithChildren, { failed: boolean }> {
+  state = { failed: false }
+
+  static getDerivedStateFromError(error: unknown) {
+    caught = error
+    return { failed: true }
+  }
+
+  render() {
+    return this.state.failed ? null : this.props.children
+  }
+}
+
+const Probe = () => {
+  useJoltClient()
+  return null
+}
+
+const renderJoltClient = () => {
+  const session = new Session({ token: { access_token: 'a-real-token' } })
+
+  return render(
+    <QueryClientProvider client={buildTestQueryClient()}>
+      <ChatContext.Provider value={{ session } as unknown as ChatContextValue}>
+        <Catch>
+          <Suspense fallback={null}>
+            <Probe />
+          </Suspense>
+        </Catch>
+      </ChatContext.Provider>
+    </QueryClientProvider>
+  )
+}
+
+describe('useJoltClient', () => {
+  let post: jest.SpyInstance
+  let consoleError: jest.SpyInstance
+
+  beforeEach(() => {
+    caught = undefined
+    post = jest.spyOn(Client.prototype, 'post')
+    consoleError = jest.spyOn(console, 'error').mockImplementation(() => {})
+  })
+
+  afterEach(() => {
+    post.mockRestore()
+    consoleError.mockRestore()
+  })
+
+  it('surfaces a failed jolt_authorize as a ResponseError', async () => {
+    post.mockRejectedValue(new Response(null, { status: 401, statusText: 'Unauthorized' }))
+
+    renderJoltClient()
+
+    await waitFor(() => expect(caught).toBeInstanceOf(ResponseError))
+    expect((caught as ResponseError).status).toBe(401)
+  })
+})

package/src/hooks/__tests__/use_search_results.test.tsx

@@ -0,0 +1,88 @@
+import { QueryClientProvider } from '@tanstack/react-query'
+import { act, renderHook, waitFor } from '@testing-library/react-native'
+import React from 'react'
+import { buildTestQueryClient } from '../../__utils__/query_client'
+import type { SearchResultResource } from '../../types/resources/search_result'
+import { NO_FAILED_TYPES, useSearchResults } from '../use_search_results'
+
+const mockGet = jest.fn()
+jest.mock('../use_api_client', () => ({ useApiClient: () => ({ chat: { get: mockGet } }) }))
+
+const result = (type: SearchResultResource['type'], id: string) =>
+  ({ type, id, title: `${type} ${id}`, url: `/${type}s/${id}` }) as SearchResultResource
+
+const page = (data: SearchResultResource[], meta: Record<string, unknown> = {}) => ({
+  data,
+  links: {},
+  meta: { count: data.length, totalCount: data.length, ...meta },
+})
+
+const wrapper = ({ children }: { children: React.ReactNode }) => (
+  <QueryClientProvider client={buildTestQueryClient()}>{children}</QueryClientProvider>
+)
+
+beforeEach(() => mockGet.mockReset())
+
+describe('useSearchResults', () => {
+  it('flattens pages into one list without repeating a result', async () => {
+    mockGet
+      .mockResolvedValueOnce(
+        page([result('conversation', '1'), result('message', '1')], { next: { offset: '20' } })
+      )
+      .mockResolvedValueOnce(page([result('message', '1'), result('message', '2')]))
+
+    const { result: hook } = renderHook(() => useSearchResults('potluck'), { wrapper })
+    await waitFor(() => expect(hook.current.hasNextPage).toBe(true))
+
+    act(() => {
+      hook.current.loadMore()
+    })
+    await waitFor(() => expect(hook.current.hasNextPage).toBe(false))
+
+    expect(hook.current.results.map(({ type, id }) => `${type}:${id}`)).toEqual([
+      'conversation:1',
+      'message:1',
+      'message:2',
+    ])
+    expect(mockGet).toHaveBeenLastCalledWith({
+      url: '/search_results',
+      data: expect.objectContaining({ q: 'potluck', offset: 20 }),
+    })
+  })
+
+  it('reads failedTypes from the first page', async () => {
+    mockGet
+      .mockResolvedValueOnce(page([], { failedTypes: ['message'], next: { offset: '20' } }))
+      .mockResolvedValueOnce(page([], { failedTypes: ['conversation'] }))
+
+    const { result: hook } = renderHook(() => useSearchResults('potluck'), { wrapper })
+    await waitFor(() => expect(hook.current.hasNextPage).toBe(true))
+
+    act(() => {
+      hook.current.loadMore()
+    })
+    await waitFor(() => expect(hook.current.hasNextPage).toBe(false))
+
+    expect(hook.current.failedTypes).toEqual(['message'])
+  })
+
+  it('makes no request for an empty or whitespace-only term', () => {
+    const { result: hook } = renderHook(() => useSearchResults('   '), { wrapper })
+
+    expect(mockGet).not.toHaveBeenCalled()
+    expect(hook.current.results).toEqual([])
+    expect(hook.current.failedTypes).toBe(NO_FAILED_TYPES)
+  })
+
+  it('searches with the trimmed term', async () => {
+    mockGet.mockResolvedValueOnce(page([]))
+
+    const { result: hook } = renderHook(() => useSearchResults(' potluck '), { wrapper })
+    await waitFor(() => expect(hook.current.isPending).toBe(false))
+
+    expect(mockGet).toHaveBeenCalledWith({
+      url: '/search_results',
+      data: expect.objectContaining({ q: 'potluck' }),
+    })
+  })
+})

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/hooks/use_chat_permissions.ts

@@ -1,7 +1,10 @@
-import { AppGrantsResource } from '../types'
+import { queryOptions } from '@tanstack/react-query'
+import { ApiCollection, AppGrantsResource } from '../types'
+import { throwResponseError } from '../utils/response_error'
 import { FIVE_MINUTES } from '../utils/time'
 import { useApiGet } from './use_api'
-import { App } from './use_api_client'
+import { ApiClient, App } from './use_api_client'
+import { getRequestQueryKey } from './use_suspense_api'
 
 export const appGrantsRequestArgs = {
   url: '/me/app_grants',
@@ -13,6 +16,16 @@ export const appGrantsRequestArgs = {
   app: 'chat' as App,
 }
 
+export const appGrantsQueryOptions = (apiClient: ApiClient) =>
+  queryOptions({
+    queryKey: getRequestQueryKey(appGrantsRequestArgs),
+    queryFn: (): Promise<ApiCollection<AppGrantsResource>> =>
+      apiClient[appGrantsRequestArgs.app]
+        .get<ApiCollection<AppGrantsResource>>(appGrantsRequestArgs)
+        .catch(throwResponseError),
+    staleTime: FIVE_MINUTES,
+  })
+
 export function useAppGrants() {
   return useApiGet<AppGrantsResource[]>(appGrantsRequestArgs, {
     staleTime: FIVE_MINUTES,

package/src/hooks/use_debounced_search_term.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react'
+
+const DEFAULT_DELAY_MS = 200
+
+export function useDebouncedSearchTerm(term: string, delayMs = DEFAULT_DELAY_MS) {
+  const [debouncedTerm, setDebouncedTerm] = useState('')
+  const trimmedTerm = term.trim()
+
+  useEffect(() => {
+    if (trimmedTerm.length === 0) {
+      setDebouncedTerm('')
+      return
+    }
+
+    const timer = setTimeout(() => setDebouncedTerm(trimmedTerm), delayMs)
+    return () => clearTimeout(timer)
+  }, [trimmedTerm, delayMs])
+
+  return debouncedTerm
+}

package/src/hooks/use_features.ts

@@ -57,6 +57,8 @@ export const availableFeatures = {
   dm_search_clear_fix: 'ROLLOUT_MOBILE_dm_search_clear_fix',
   search: 'QA_MOBILE_search',
   search_rollout: 'ROLLOUT_MOBILE_search',
+  manual_archiving: 'QA_MOBILE_manual_archiving',
+  manual_archiving_rollout: 'ROLLOUT_MOBILE_manual_archiving',
 } as const satisfies Record<string, `${'QA' | 'ROLLOUT'}_${string}`>
 
 const stableEmptyFeatures: ApiCollection<FeatureResource> = {

package/src/hooks/use_jolt.ts

@@ -13,6 +13,7 @@ import { useChatContext } from '../contexts/chat_context'
 import { ApiResource } from '../types'
 import type { JoltSubscriptionPattern } from '../types/jolt_events'
 import { Client, Uri } from '../utils'
+import { throwResponseError } from '../utils/response_error'
 import { FIVE_SECONDS } from '../utils/time'
 
 interface JoltResponse {
@@ -40,15 +41,17 @@ export const useJoltClient = (): JoltClient | undefined => {
     return queryClient.fetchQuery({
       queryKey: ['jolt-token'],
       queryFn: () => {
-        return apiClient.post<ApiResource<JoltResponse>>({
-          url: '/me/jolt_authorize',
-          data: {
+        return apiClient
+          .post<ApiResource<JoltResponse>>({
+            url: '/me/jolt_authorize',
             data: {
-              type: 'JoltToken',
-              attributes: {},
+              data: {
+                type: 'JoltToken',
+                attributes: {},
+              },
             },
-          },
-        })
+          })
+          .catch(throwResponseError)
       },
       staleTime: FIVE_SECONDS,
     })

package/src/hooks/use_product_analytics.ts

@@ -12,6 +12,8 @@ export interface EventMetadata {
 export const analyticsEvents = {
   conversation_index_opened: 'chat.mobile.conversations.index.opened',
   conversation_show_opened: 'chat.mobile.conversations.show.opened',
+  search_performed: 'chat.mobile.search.performed',
+  search_result_opened: 'chat.mobile.search.result.opened',
 } as const satisfies Record<string, `chat.mobile.${string}`>
 
 type AnalyticsEventName = (typeof analyticsEvents)[keyof typeof analyticsEvents]
@@ -53,7 +55,7 @@ function sendEvents(events: AnalyticsEvent[], config: ProductAnalyticsConfig): P
   })
 }
 
-const useProductAnalytics = () => {
+export const useProductAnalytics = () => {
   const { productAnalyticsConfig } = useChatContext()
 
   const snakeCasedBaseMeta = useMemo(

package/src/hooks/use_search_enabled.ts

@@ -0,0 +1,9 @@
+import { availableFeatures, useFeatures } from './use_features'
+
+export function useSearchEnabled() {
+  const { featureEnabled } = useFeatures()
+
+  return (
+    featureEnabled(availableFeatures.search) || featureEnabled(availableFeatures.search_rollout)
+  )
+}

package/src/hooks/use_search_results.ts

@@ -0,0 +1,78 @@
+import { useInfiniteQuery } from '@tanstack/react-query'
+import { useCallback, useMemo } from 'react'
+import type { ApiCollection } from '../types'
+import type { SearchResultResource } from '../types/resources/search_result'
+import {
+  getSearchResultsQueryKey,
+  getSearchResultsRequestArgs,
+} from '../utils/request/get_search_results'
+import { ONE_MINUTE } from '../utils/time'
+import { useApiClient } from './use_api_client'
+
+export type SearchResultsCollection = ApiCollection<SearchResultResource> & {
+  meta: { failedTypes?: SearchResultResource['type'][] }
+}
+
+type SearchResultsPageParam = { offset?: number }
+
+export const NO_FAILED_TYPES: SearchResultResource['type'][] = []
+
+export function useSearchResults(term: string) {
+  const apiClient = useApiClient()
+  const trimmedTerm = term.trim()
+
+  const {
+    data,
+    isPending,
+    isError,
+    isFetchNextPageError,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useInfiniteQuery({
+    queryKey: getSearchResultsQueryKey(trimmedTerm),
+    queryFn: ({ pageParam }) => {
+      const requestArgs = getSearchResultsRequestArgs(trimmedTerm)
+      return apiClient.chat.get<SearchResultsCollection>({
+        url: requestArgs.url,
+        data: { ...requestArgs.data, ...pageParam },
+      })
+    },
+    initialPageParam: {} as SearchResultsPageParam,
+    getNextPageParam: lastPage => nextPageParam(lastPage.meta.next?.offset),
+    enabled: trimmedTerm.length >= 1,
+    staleTime: ONE_MINUTE,
+    refetchOnWindowFocus: false,
+    refetchOnMount: false,
+    retry: 1,
+  })
+
+  const results = useMemo(() => uniqueResults(data?.pages.flatMap(page => page.data) ?? []), [data])
+  const failedTypes = data?.pages[0]?.meta.failedTypes ?? NO_FAILED_TYPES
+  const loadMore = useCallback(() => fetchNextPage({ cancelRefetch: false }), [fetchNextPage])
+
+  return {
+    results,
+    failedTypes,
+    isPending,
+    isError: isError && !isFetchNextPageError,
+    isFetchNextPageError,
+    loadMore,
+    hasNextPage,
+    isFetchingNextPage,
+  }
+}
+
+function nextPageParam(offset?: string): SearchResultsPageParam | undefined {
+  return offset ? { offset: Number(offset) } : undefined
+}
+
+function uniqueResults(results: SearchResultResource[]) {
+  const seen = new Set<string>()
+  return results.filter(result => {
+    const key = `${result.type}:${result.id}`
+    if (seen.has(key)) return false
+    seen.add(key)
+    return true
+  })
+}

package/src/screens/age_check/age_check_underage_screen.tsx

@@ -1,9 +1,10 @@
 import { useRoute, RouteProp } from '@react-navigation/native'
 import React from 'react'
-import { Linking, StyleSheet, View, ScrollView } from 'react-native'
+import { StyleSheet, View, ScrollView } from 'react-native'
 import { Heading } from '../../components'
 import { Icon, Text, TextInlineButton } from '../../components/display'
 import { useTheme } from '../../hooks'
+import { Linking } from '../../utils'
 import type { AgeCheckParams } from './screen_props'
 
 export interface AgeCheckUnderageScreenProps {

package/src/screens/attachment_actions/attachment_actions_screen.tsx

@@ -1,7 +1,8 @@
 import { StaticScreenProps, useNavigation } from '@react-navigation/native'
 import React, { useCallback } from 'react'
-import { Alert, Linking, StyleSheet } from 'react-native'
+import { Alert, StyleSheet } from 'react-native'
 import FormSheet, { getFormSheetScreenOptions } from '../../components/primitive/form_sheet'
+import { Linking } from '../../utils'
 import { useDeleteAttachment } from './hooks/useDeleteAttachment'
 
 export const AttachmentActionsScreenOptions = getFormSheetScreenOptions({
@@ -57,7 +58,7 @@ export function AttachmentActionsScreen({ route }: AttachmentActionsScreenProps)
   }, [attachmentName, handleDeleteAttachment, navigation])
 
   const handleOpenInBrowser = () => {
-    Linking.openURL(attachmentUrl)
+    Linking.openURL(attachmentUrl, { forceOpenInBrowser: true })
     navigation.goBack()
   }