@rn-tools/navigation 2.2.2 → 2.2.3

package/README.md

@@ -536,12 +536,13 @@ In this example we will have a basic 3 tab view. We want to repond to the link `
 
 - 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
@@ -549,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 = "/home/item/4";
+  let path = "/testing/home/item/1";
 
   return (
-    <DeepLinks
-      path={path}
-      handlers={[
-        {
-          path: "/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>
+      }
+    />
   );
 }
 
@@ -660,6 +681,7 @@ function MyScreen({
     </View>
   );
 }
+
 ```
 
 ### Preventing going back

package/package.json

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

package/src/deep-links.tsx

@@ -19,7 +19,7 @@ type DeepLinksProps<T> = {
   children: React.ReactNode;
 };
 
-export function DeepLinks<T>({ path, handlers, children }: DeepLinksProps<T>) {
+export function DeepLinks<T>({ path = '', handlers = [], children }: DeepLinksProps<T>) {
   React.useEffect(() => {
     let matchers = buildMatchers(handlers);