@rn-tools/navigation 2.2.0 → 2.2.2

package/README.md

@@ -530,12 +530,12 @@ let useUser = () => {
 
 ### Deep Links
 
-This section will cover how to respond to deep links in your app. Deep links usually have some extra setup required - use Expo's [Deep Linking Guide](https://docs.expo.dev/guides/deep-linking/) to get started.
+This section will cover how to respond to deep links in your app. Deep links usually have some extra setup required - use Expo's [Deep Linking Guide](https://docs.expo.dev/guides/deep-linking/) to get started. Once you are able to receive deep links, use the `DeepLinks` component exported from this library to handle them.
 
-Once you are able to receive deep links, use the `DeepLinks` component exported from this library to handle them. In this example we will have a basic 3 tab view. We want to response to the link `home/items/:id` by navigating to the home tab and then pushing a detail screen with the corresponding id.
-
-The deep link component takes an array of handlers which are functions that will be invoked when their `path` matches the deep link that was opened. The handler function will receive the params from the deep link - these use the same token syntax as libraries like `react-router` and `express` for path params.
+In this example we will have a basic 3 tab view. We want to repond to the link `home/items/:id` by navigating to the home tab and then pushing a detail screen with the corresponding item id. The deep link component takes an array of handlers which are functions that will be invoked when their `path` matches the deep link that was opened.
 
+- Only the first matching handler will be invoked.
+- The handler function will receive the params from the deep link - these use the same token syntax as libraries like `react-router` and `express` for path params.
 
 ```tsx
 import { DeepLinks, navigation, Stack, Tabs } from "@rn-tools/navigation";
@@ -549,14 +549,14 @@ export function DeepLinksExample() {
   // let { path } = Linking.parse(url)
 
   // But it's easier to test hardcoded strings for the sake of this example
-  let path = "/testing/home/item/4";
+  let path = "/home/item/4";
 
   return (
     <DeepLinks
       path={path}
       handlers={[
         {
-          path: "/testing/home/item/:itemId",
+          path: "/home/item/:itemId",
           handler: (params: { itemId: string }) => {
             let itemId = params.itemId;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rn-tools/navigation",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "main": "./src/index.ts",
   "license": "MIT",
   "files": [

package/src/deep-links.tsx

@@ -20,20 +20,18 @@ type DeepLinksProps<T> = {
 };
 
 export function DeepLinks<T>({ path, handlers, children }: DeepLinksProps<T>) {
-  let matchers = React.useRef(buildMatchers(handlers));
-
-  React.useLayoutEffect(() => {
-    matchers.current = buildMatchers(handlers);
-  }, [handlers]);
-
   React.useEffect(() => {
-    matchers.current.forEach(({ fn, handler }) => {
+    let matchers = buildMatchers(handlers);
+
+    for (let matcher of matchers) {
+      let { fn, handler } = matcher;
       let match = fn(path);
       if (match) {
-        return setImmediate(() => handler(match.params as T));
+        setImmediate(() => handler(match.params as T));
+        break;
       }
-    });
-  }, [path]);
+    }
+  }, [path, handlers]);
 
   return <>{children}</>;
 }