add deep linking support

amnet-native/App.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import * as Linking from 'expo-linking';
 import {useColorScheme, View} from "react-native";
 import RealmContext from "./models/RealmContext";
 import {StatusBar} from "expo-status-bar";
@@ -23,6 +24,7 @@ import CardAddModal from "./app/CardAddModal";
 import CardManagerStack from "./app/CardManagerStack";
 import ServerManagerStack from "./app/ServerManagerStack";
 import {MD3Colors} from "react-native-paper/lib/typescript/types";
+import ServerAddModal from "./app/ServerAddModal";
 
 const AMColors: Partial<MD3Colors> = {
     primary: '#e11d48',
@@ -92,6 +94,26 @@ export default function AppRoot() {
         JetBrainsMono_400Regular
     });
 
+    const linking = {
+        prefixes: [Linking.createURL('/')],
+        config: {
+            screens: {
+                "add-card": "cards/add",
+                "add-server": "servers/add",
+                "app": {
+                    screens: {
+                        "servers": {
+                          screens: {
+                              "server-listing": "servers",
+                          }  
+                        },
+                        "cards": "cards"
+                    }
+                }
+            }
+        }
+    };
+
     if (!fontsLoaded) {
         return (
             <View style={{flex: 1, justifyContent: "center", alignItems: "center", gap: 10}}>
@@ -105,13 +127,15 @@ export default function AppRoot() {
         <RealmProvider>
             <SafeAreaProvider>
                 <PaperProvider theme={colorScheme === 'dark' ? AMDarkTheme : AMLightTheme}>
-                    <NavigationContainer theme={colorScheme === 'dark' ? DarkTheme : LightTheme}>
+                    {/* @ts-ignore */}
+                    <NavigationContainer theme={colorScheme === 'dark' ? DarkTheme : LightTheme} linking={linking}>
                         <StatusBar/>
-                        <Stack.Navigator initialRouteName="app-root">
+                        <Stack.Navigator initialRouteName="app">
                             {/* main app */}
-                            <Stack.Screen name="app-root" component={AppContent} options={{headerShown: false}}/>
+                            <Stack.Screen name="app" component={AppContent} options={{headerShown: false}}/>
 
                             <Stack.Group screenOptions={{presentation: "modal"}}>
+                                <Stack.Screen name="add-server" component={ServerAddModal} options={{title: "Add Server"}}/>
                                 <Stack.Screen name="add-card" component={CardAddModal} options={{title: "Add Card"}}/>
                             </Stack.Group>
                         </Stack.Navigator>

amnet-native/app.json

@@ -1,5 +1,6 @@
 {
   "name": "AMNet",
+  "scheme": "amnet",
   "version": "1.0.0",
   "slug": "amnet-native",
   "icon": "./assets/icon.png",

amnet-native/app/ServerAddModal.tsx

@@ -1,4 +1,4 @@
-import {useCallback, useLayoutEffect, useState} from "react";
+import {useCallback, useEffect, useLayoutEffect, useState} from "react";
 import {Card, Paragraph, useTheme} from "react-native-paper";
 import {TextInput, TouchableOpacity, View} from "react-native";
 import {useModalStyles} from "../utils/ModalStyles";
@@ -8,12 +8,18 @@ import {AMServer} from "../models/AMServer";
 
 const {useRealm} = RealmContext;
 
-export default function ServerAddModal({navigation}) {
+export default function ServerAddModal({route, navigation}) {
     const realm = useRealm();
     const theme = useTheme();
     const modalStyles = useModalStyles();
 
     const [serverAddress, setServerAddress] = useState('');
+    
+    // add option to add server address when loading a share link
+    const {address} = route.params;
+    useEffect(() => {
+        setServerAddress(address || '');
+    }, [address]);
 
     useLayoutEffect(() => {
         navigation.setOptions({
@@ -51,7 +57,7 @@ export default function ServerAddModal({navigation}) {
         }
 
         navigation.goBack();
-        setTimeout(() => navigation.navigate('server-card-in', {
+        setTimeout(() => navigation.navigate('server', {
             serverId: serverObject._id.toHexString()
         }), 500);
     }, [serverAddress, realm]);

amnet-native/app/ServerCardIn.tsx

@@ -45,8 +45,8 @@ export default function ServerCardIn({route, navigation}) {
     const [serverReloadCounter, setServerReloadCounter] = useState<number>(0);
     const [connectionTestResult, setConnectionTestResult] = useState<boolean | null>(null);
 
-    const {serverId} = route.params;
-    const server = useObject(AMServer, ObjectId.createFromHexString(serverId))
+    let {serverId} = route.params;
+    const server = useObject(AMServer, ObjectId.createFromHexString(serverId));
 
     useLayoutEffect(() => {
         if (!server) {
@@ -72,7 +72,7 @@ export default function ServerCardIn({route, navigation}) {
             if (!server) {
                 Alert.alert("Server not found", "The server you are looking for does not exist.");
             }
-            
+
             return;
         }
 

amnet-native/app/ServerManager.tsx

@@ -15,7 +15,7 @@ const {useRealm, useQuery} = RealmContext;
 function ServerCard(props: { server: AMServer, navigation: any }) {
     const realm = useRealm();
     const pageCallback = useCallback(() => {
-        props.navigation.navigate('server-card-in', {
+        props.navigation.navigate('server', {
             serverId: props.server._id.toHexString()
         });
     }, [props.navigation, props.server]);

amnet-native/app/ServerManagerStack.tsx

@@ -5,7 +5,6 @@ import {createNativeStackNavigator} from "@react-navigation/native-stack";
 
 import ServerCardIn from "./ServerCardIn";
 import ServerManager from "./ServerManager";
-import ServerAddModal from "./ServerAddModal";
 
 const Stack = createNativeStackNavigator();
 
@@ -31,11 +30,7 @@ export default function ServerManagerStack({navigation}) {
                                   </TouchableOpacity>
                               }}/>
 
-                <Stack.Screen name="server-card-in" options={{title: "Server", headerTransparent: true}} component={ServerCardIn}/>
-            </Stack.Group>
-
-            <Stack.Group screenOptions={{presentation: "modal"}}>
-                <Stack.Screen name="add-server" component={ServerAddModal} options={{title: "Add Server"}}/>
+                <Stack.Screen name="server" options={{title: "Server", headerTransparent: true}} component={ServerCardIn}/>
             </Stack.Group>
         </Stack.Navigator>
     );