@rn-tools/navigation 2.2.1 → 2.2.3

package/README.md

@@ -530,19 +530,19 @@ 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.
+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.
 
-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.
+- 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.
+- Make sure that the `DeepLinks` component is inside of a `Stack` component
 
 ```tsx
 import { DeepLinks, navigation, Stack, Tabs } from "@rn-tools/navigation";
+import * as Linking from "expo-linking";
 import * as React from "react";
 import { View, Text, TouchableOpacity } from "react-native";
-import * as Linking from "expo-linking";
 
 export function DeepLinksExample() {
   // You'll likely want to use Expo's Linking API to get the current URL and path
@@ -550,32 +550,52 @@ 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 = "/testing/home/item/1";
 
   return (
-    <DeepLinks
-      path={path}
-      handlers={[
-        {
-          path: "/testing/home/item/:itemId",
-          handler: (params: { itemId: string }) => {
-            let itemId = params.itemId;
-
-            // Go to home tab
-            navigation.setTabIndex(0);
-
-            // Push the screen we want
-            navigation.pushScreen(
-              <Stack.Screen>
-                <MyScreen title={`Item: ${itemId}`} />
-              </Stack.Screen>
-            );
-          },
-        },
-      ]}
-    >
-      <MyTabs />
-    </DeepLinks>
+    <Stack.Navigator
+      rootScreen={
+        <DeepLinks
+          path={path}
+          handlers={[
+            {
+              path: "/testing/home/item1/:itemId",
+              handler: (params: { itemId: string }) => {
+                let itemId = params.itemId;
+
+                // Go to home tab
+                navigation.setTabIndex(0);
+
+                // Push the screen we want
+                navigation.pushScreen(
+                  <Stack.Screen>
+                    <MyScreen title={`Item: ${itemId}`} />
+                  </Stack.Screen>
+                );
+              },
+            },
+            {
+              path: "/testing/home/item/:itemId",
+              handler: (params: { itemId: string }) => {
+                let itemId = params.itemId;
+
+                // Go to home tab
+                navigation.setTabIndex(0);
+
+                // Push the screen we want
+                navigation.pushScreen(
+                  <Stack.Screen>
+                    <MyScreen title={`Item: ${itemId}`} />
+                  </Stack.Screen>
+                );
+              },
+            },
+          ]}
+        >
+          <MyTabs />
+        </DeepLinks>
+      }
+    />
   );
 }
 
@@ -661,6 +681,7 @@ function MyScreen({
     </View>
   );
 }
+
 ```
 
 ### Preventing going back

package/package.json

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

package/src/deep-links.tsx

@@ -19,15 +19,11 @@ type DeepLinksProps<T> = {
   children: React.ReactNode;
 };
 
-export function DeepLinks<T>({ path, handlers, children }: DeepLinksProps<T>) {
-  let matchers = React.useRef(buildMatchers(handlers));
-
-  React.useLayoutEffect(() => {
-    matchers.current = buildMatchers(handlers);
-  }, [handlers]);
-
+export function DeepLinks<T>({ path = '', handlers = [], children }: DeepLinksProps<T>) {
   React.useEffect(() => {
-    for (let matcher of matchers.current) {
+    let matchers = buildMatchers(handlers);
+
+    for (let matcher of matchers) {
       let { fn, handler } = matcher;
       let match = fn(path);
       if (match) {
@@ -35,7 +31,7 @@ export function DeepLinks<T>({ path, handlers, children }: DeepLinksProps<T>) {
         break;
       }
     }
-  }, [path]);
+  }, [path, handlers]);
 
   return <>{children}</>;
 }