use `useOpenLink` hook for links in ALF (#2975)

* use `useOpenLink` hook for links in ALF

* web only for `outline`

1 files changed, 13 insertions, 10 deletions

diff --git a/src/components/Link.tsx b/src/components/Link.tsx
index 593b0863a..0a654fed2 100644
--- a/src/components/Link.tsx
+++ b/src/components/Link.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {GestureResponderEvent, Linking} from 'react-native'
+import {GestureResponderEvent} from 'react-native'
 import {
   useLinkProps,
   useNavigation,
@@ -20,6 +20,7 @@ import {
 import {useModalControls} from '#/state/modals'
 import {router} from '#/routes'
 import {Text, TextProps} from '#/components/Typography'
+import {useOpenLink} from 'state/preferences/in-app-browser'
 
 /**
  * Only available within a `Link`, since that inherits from `Button`.
@@ -80,6 +81,7 @@ export function useLink({
   })
   const isExternal = isExternalUrl(href)
   const {openModal, closeModal} = useModalControls()
+  const openLink = useOpenLink()
 
   const onPress = React.useCallback(
     (e: GestureResponderEvent) => {
@@ -106,7 +108,7 @@ export function useLink({
         e.preventDefault()
 
         if (isExternal) {
-          Linking.openURL(href)
+          openLink(href)
         } else {
           /**
            * A `GestureResponderEvent`, but cast to `any` to avoid using a bunch
@@ -124,7 +126,7 @@ export function useLink({
             href.startsWith('http') ||
             href.startsWith('mailto')
           ) {
-            Linking.openURL(href)
+            openLink(href)
           } else {
             closeModal() // close any active modals
 
@@ -145,15 +147,16 @@ export function useLink({
       }
     },
     [
-      href,
-      isExternal,
+      outerOnPress,
       warnOnMismatchingTextChild,
-      navigation,
-      action,
       displayText,
-      closeModal,
+      isExternal,
+      href,
       openModal,
-      outerOnPress,
+      openLink,
+      closeModal,
+      action,
+      navigation,
     ],
   )
 
@@ -260,7 +263,7 @@ export function InlineLink({
       style={[
         {color: t.palette.primary_500},
         (hovered || focused || pressed) && {
-          outline: 0,
+          ...web({outline: 0}),
           textDecorationLine: 'underline',
           textDecorationColor: flattenedStyle.color ?? t.palette.primary_500,
         },