@rn-tools/navigation 2.2.2 → 2.2.4

package/README.md

@@ -536,45 +536,66 @@ 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() {
+export default function DeepLinksExample() {
   // You'll likely want to use Expo's Linking API to get the current URL and path
   // let url = Linking.useURL()
   // 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/2";
 
   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>
+      }
+    />
   );
 }
 
@@ -644,7 +665,14 @@ function MyScreen({
 }) {
   return (
     <View style={{ flex: 1, backgroundColor: bg }}>
-      <View className="flex-1 items-center justify-center gap-4">
+      <View
+        style={{
+          flex: 1,
+          justifyContent: "center",
+          alignItems: "center",
+          gap: 4,
+        }}
+      >
         <Text style={{ fontSize: 26, fontWeight: "semibold" }}>{title}</Text>
 
         {!isRoot && (
@@ -660,6 +688,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.4",
   "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);
 

package/src/utils.ts

@@ -34,7 +34,7 @@ export function useSafeAreaInsetsSafe() {
     // eslint-disable-next-line
     insets = useSafeAreaInsets();
   } catch (error) {
-    console.log("useSafeAreaInsets is not available");
+    console.warn("`react-native-safe-area-context` missing - Please install and wrap your app in a SafeAreaProvider" );
   }
 
   return insets;