From 8f188017089ca01b48bf7edd843b785108f932d1 Mon Sep 17 00:00:00 2001 From: Nishan Date: Thu, 20 Oct 2022 21:30:51 +0530 Subject: [PATCH 1/6] feat: handle external urls --- src/link/core.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/link/core.tsx b/src/link/core.tsx index cd22c982..95b42486 100644 --- a/src/link/core.tsx +++ b/src/link/core.tsx @@ -1,6 +1,6 @@ import React from 'react' import type { ComponentProps, ComponentType } from 'react' -import { Platform } from 'react-native' +import { Platform, Linking } from 'react-native' import { parseNextPath } from '../router' import { useLinkTo } from '../router/use-link-to' @@ -37,7 +37,13 @@ function LinkCore({ onPress={(e?: any) => { componentProps?.onPress?.(e) if (!e?.defaultPrevented) { - linkTo(parseNextPath(as || href)) + const link = as || href + // Handles external URLs + if (typeof link === 'string' && !link.startsWith('/')) { + Linking.openURL(link) + } else { + linkTo(parseNextPath(link)) + } } }} > From 8ee746d1f23f67175b05d397f4056c1872c2615d Mon Sep 17 00:00:00 2001 From: Nishan Date: Thu, 1 Dec 2022 09:56:22 +0530 Subject: [PATCH 2/6] fix: handle absolute urls using regex --- src/link/core.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/link/core.tsx b/src/link/core.tsx index 95b42486..b35b941a 100644 --- a/src/link/core.tsx +++ b/src/link/core.tsx @@ -39,7 +39,7 @@ function LinkCore({ if (!e?.defaultPrevented) { const link = as || href // Handles external URLs - if (typeof link === 'string' && !link.startsWith('/')) { + if (typeof link === 'string' && isAbsoluteUrl(link)) { Linking.openURL(link) } else { linkTo(parseNextPath(link)) @@ -52,4 +52,10 @@ function LinkCore({ ) } +// Scheme: https://tools.ietf.org/html/rfc3986#section-3.1 +// Absolute URL: https://tools.ietf.org/html/rfc3986#section-4.3 +const ABSOLUTE_URL_REGEX = /^[a-zA-Z][a-zA-Z\d+\-.]*?:/ +// Source credit NextJS - https://github.com/vercel/next.js/blob/77b5f79a4dff453abb62346bf75b14d859539b81/packages/next/shared/lib/utils.ts#L313 +export const isAbsoluteUrl = (url: string) => ABSOLUTE_URL_REGEX.test(url) + export { LinkCore } From a18f93ee7372d3b4fccc310c69c201aaf0cc9bce Mon Sep 17 00:00:00 2001 From: Nishan Date: Thu, 1 Dec 2022 10:30:56 +0530 Subject: [PATCH 3/6] handle default prevented --- src/link/core.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/link/core.tsx b/src/link/core.tsx index 195fea91..e33894b1 100644 --- a/src/link/core.tsx +++ b/src/link/core.tsx @@ -67,7 +67,11 @@ function LinkCore({ componentProps?.onPress?.(e) const link = as || href // Handles external URLs - if (typeof link === 'string' && isAbsoluteUrl(link)) { + if ( + !e?.defaultPrevented && + typeof link === 'string' && + isAbsoluteUrl(link) + ) { Linking.openURL(link) } else { linkTo.onPress(e) @@ -82,7 +86,7 @@ function LinkCore({ // Scheme: https://tools.ietf.org/html/rfc3986#section-3.1 // Absolute URL: https://tools.ietf.org/html/rfc3986#section-4.3 const ABSOLUTE_URL_REGEX = /^[a-zA-Z][a-zA-Z\d+\-.]*?:/ -// Source credit NextJS - https://github.com/vercel/next.js/blob/77b5f79a4dff453abb62346bf75b14d859539b81/packages/next/shared/lib/utils.ts#L313 +// Source - https://github.com/vercel/next.js/blob/77b5f79a4dff453abb62346bf75b14d859539b81/packages/next/shared/lib/utils.ts#L313 export const isAbsoluteUrl = (url: string) => ABSOLUTE_URL_REGEX.test(url) export { LinkCore } From c27a66bab073bf6ec002e700febd4c03b35b2998 Mon Sep 17 00:00:00 2001 From: Zilvinas Date: Sun, 4 Dec 2022 21:38:13 +0100 Subject: [PATCH 4/6] Update expo-router.md Fix Getting Started guide broken link --- docs/docs/guides/expo-router.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/guides/expo-router.md b/docs/docs/guides/expo-router.md index e5359915..0e6d5da7 100644 --- a/docs/docs/guides/expo-router.md +++ b/docs/docs/guides/expo-router.md @@ -4,7 +4,7 @@ title: Expo Router Expo recently announced an experimental new routing system which lets you use file-system based routing in native apps. The API is very Next.js- and Remix-esque. I view it as the future of cross-platform routing. -To use Solito with [Expo Router](https://expo.github.io/router/), you'll need to follow their [Getting Started](https://expo.github.io/router/docs/intro#getting-started) guide. These steps should be done inside of `apps/expo` in your Solito project. +To use Solito with [Expo Router](https://expo.github.io/router/), you'll need to follow their [Getting Started](https://expo.github.io/router/docs/#getting-started) guide. These steps should be done inside of `apps/expo` in your Solito project. Once those steps are done, you're good to go. You can create files inside of `apps/expo/app` to use file system routing on iOS and Android. Solito's `useLink` hook and `Link` component will work like always. From 53714b0d5f8dcc23f707b1ed7b8b00606804bdd8 Mon Sep 17 00:00:00 2001 From: Karl Horky Date: Thu, 8 Dec 2022 17:07:32 +0100 Subject: [PATCH 5/6] Fix example --- docs/docs/v2.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/v2.mdx b/docs/docs/v2.mdx index 39af4b08..fb309505 100644 --- a/docs/docs/v2.mdx +++ b/docs/docs/v2.mdx @@ -104,7 +104,7 @@ export function Home() { const router = useRouter() const openArtists = () => { - replace('/artists', undefined, { + router.replace('/artists', undefined, { experimental: { nativeBehavior: 'stack-replace', isNestedNavigator: true, From 4bdd86a1af4d5f859cfb731036e365fcf0206799 Mon Sep 17 00:00:00 2001 From: Nishan Date: Fri, 9 Dec 2022 12:17:26 +0530 Subject: [PATCH 6/6] treeshaking linking on web --- src/link/core.tsx | 7 ++++--- src/link/linking.ts | 3 +++ src/link/linking.web.ts | 2 ++ 3 files changed, 9 insertions(+), 3 deletions(-) create mode 100644 src/link/linking.ts create mode 100644 src/link/linking.web.ts diff --git a/src/link/core.tsx b/src/link/core.tsx index e33894b1..a35c6fa1 100644 --- a/src/link/core.tsx +++ b/src/link/core.tsx @@ -1,7 +1,8 @@ import React from 'react' import type { ComponentProps, ComponentType } from 'react' -import { Platform, Linking } from 'react-native' +import { Platform } from 'react-native' +import { openURL } from './linking' import { NextLink } from './next-link' import { useLink } from './use-custom-link' @@ -72,7 +73,7 @@ function LinkCore({ typeof link === 'string' && isAbsoluteUrl(link) ) { - Linking.openURL(link) + openURL(link) } else { linkTo.onPress(e) } @@ -87,6 +88,6 @@ function LinkCore({ // Absolute URL: https://tools.ietf.org/html/rfc3986#section-4.3 const ABSOLUTE_URL_REGEX = /^[a-zA-Z][a-zA-Z\d+\-.]*?:/ // Source - https://github.com/vercel/next.js/blob/77b5f79a4dff453abb62346bf75b14d859539b81/packages/next/shared/lib/utils.ts#L313 -export const isAbsoluteUrl = (url: string) => ABSOLUTE_URL_REGEX.test(url) +const isAbsoluteUrl = (url: string) => ABSOLUTE_URL_REGEX.test(url) export { LinkCore } diff --git a/src/link/linking.ts b/src/link/linking.ts new file mode 100644 index 00000000..98f2161f --- /dev/null +++ b/src/link/linking.ts @@ -0,0 +1,3 @@ +import { Linking } from 'react-native' + +export const openURL = (url: string) => Linking.openURL(url) diff --git a/src/link/linking.web.ts b/src/link/linking.web.ts new file mode 100644 index 00000000..573a05c5 --- /dev/null +++ b/src/link/linking.web.ts @@ -0,0 +1,2 @@ +// noop, not supported on web +export const openURL = (url: string) => {}