very basic start of routing

app/(tabs)/_layout.tsx

@@ -1,45 +0,0 @@
-import { Tabs } from 'expo-router';
-import React from 'react';
-import { Platform } from 'react-native';
-
-import { HapticTab } from '../components/HapticTab';
-import { IconSymbol } from '../components/ui/IconSymbol';
-import TabBarBackground from '../components/ui/TabBarBackground';
-import { Colors } from '..//constants/Colors';
-import { useColorScheme } from '../hooks/useColorScheme';
-
-export default function TabLayout() {
-  const colorScheme = useColorScheme();
-
-  return (
-    <Tabs
-      screenOptions={{
-        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
-        headerShown: false,
-        tabBarButton: HapticTab,
-        tabBarBackground: TabBarBackground,
-        tabBarStyle: Platform.select({
-          ios: {
-            // Use a transparent background on iOS to show the blur effect
-            position: 'absolute',
-          },
-          default: {},
-        }),
-      }}>
-      <Tabs.Screen
-        name="index"
-        options={{
-          title: 'Home',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="house.fill" color={color} />,
-        }}
-      />
-      <Tabs.Screen
-        name="explore"
-        options={{
-          title: 'Explore',
-          tabBarIcon: ({ color }) => <IconSymbol size={28} name="paperplane.fill" color={color} />,
-        }}
-      />
-    </Tabs>
-  );
-}

app/components/EnvironmentCard.tsx

@@ -1,22 +1,26 @@
-import { View, Text, StyleSheet } from 'react-native';
+import { View, Text, StyleSheet, Pressable } from 'react-native';
 
 interface EnvironmentCardProps {
   name: string;
   publicUrl: string;
   status: number;
   url: string;
+  id: number;
+  onPress: () => void;
 }
 
-export default function EnvironmentCard({ name, publicUrl, status, url }: EnvironmentCardProps) {
+export default function EnvironmentCard({ name, publicUrl, status, url, id, onPress }: EnvironmentCardProps) {
   return (
-    <View style={styles.card}>
-      <Text style={styles.title}>{name}</Text>
-      {publicUrl && <Text>Public URL: {publicUrl}</Text>}
-      {status === 1 && <Text>Status: Running</Text>}
-      {status === 2 && <Text>Status: Stopped</Text>}
-      {status === 3 && <Text>Status: Pending</Text>}
-      <Text>URL: {url}</Text>
-    </View>
+    <Pressable onPress={onPress}>
+      <View style={styles.card}>
+        <Text style={styles.title}>{name}</Text>
+        {publicUrl && <Text>Public URL: {publicUrl}</Text>}
+        {status === 1 && <Text>Status: Running</Text>}
+        {status === 2 && <Text>Status: Stopped</Text>}
+        {status === 3 && <Text>Status: Pending</Text>}
+        <Text>URL: {url}</Text>
+      </View>
+    </Pressable>
   );
 }
 

app/envs/[env].tsx

@@ -0,0 +1,14 @@
+import { Text, View } from 'react-native';
+import { useLocalSearchParams, useGlobalSearchParams, Link } from 'expo-router';
+
+export default function Route() {
+  const glob = useGlobalSearchParams();
+  const local = useLocalSearchParams();
+
+  return (
+    <View>
+      <Text>Glob: {local.env}</Text>
+      <Text>Local: {glob.env}</Text>
+    </View>
+  );
+}

app/envs/_layout.tsx

@@ -0,0 +1,5 @@
+import { Slot } from 'expo-router';
+
+export default function HomeLayout() {
+  return <Slot />;
+}

app/envs/index.tsx

@@ -0,0 +1,9 @@
+import { View, Text } from "react-native";
+
+export default function EnvIndex() {
+    return (
+        <View>
+            <Text>Environments</Text>
+        </View>
+    );
+}

app/index.tsx

@@ -1,6 +1,7 @@
 import { Text, View, ScrollView } from "react-native";
 import {SafeAreaView, SafeAreaProvider} from 'react-native-safe-area-context';
 import { useState, useEffect } from "react";
+import { useRouter } from "expo-router";
 
 import LoginForm from "./components/LoginForm";
 import LogoutButton from "./components/LogoutButton";
@@ -14,6 +15,7 @@ interface Environment {
   PublicURL: string;
   Status: number;
   URL: string;
+  Id: number;
 }
 
 export default function Index() {
@@ -28,6 +30,7 @@ export default function Index() {
 }
 
 function MainContent() {
+  const router = useRouter();
   const { isAuthenticated, domain, username, authData } = useAuth();
   const [environmentData, setEnvironmentData] = useState<Environment[] | null>(null);
   const [isLoading, setIsLoading] = useState(false);
@@ -75,6 +78,11 @@ function MainContent() {
               publicUrl={environment.PublicURL}
               status={environment.Status}
               url={environment.URL}
+              id={environment.Id}
+              onPress={() => router.push({
+                pathname: `/envs/[env]`,
+                params: { env: environment.Id }
+              })}
             />
           ))}
         </ScrollView>

package-lock.json

@@ -18,7 +18,7 @@
         "expo-font": "~13.0.1",
         "expo-haptics": "~14.0.0",
         "expo-linking": "~7.0.3",
-        "expo-router": "~4.0.9",
+        "expo-router": "~4.0.11",
         "expo-splash-screen": "~0.29.13",
         "expo-status-bar": "~2.0.0",
         "expo-symbols": "~0.2.0",
@@ -8443,9 +8443,9 @@
       }
     },
     "node_modules/expo-router": {
-      "version": "4.0.9",
-      "resolved": "https://registry.npmjs.org/expo-router/-/expo-router-4.0.9.tgz",
-      "integrity": "sha512-bZupRd2nUWolihwhW2kqTTAVyhMaHJbtEFn49bOHtrfl0gkIHld+IecUIh+eJW6QTAcTOHCu5gVHLoJeM0mwjA==",
+      "version": "4.0.11",
+      "resolved": "https://registry.npmjs.org/expo-router/-/expo-router-4.0.11.tgz",
+      "integrity": "sha512-2Qrd/fk98kC+CTg1umbuUaBaGkpdGStPpkSR99SoAjX6KWC1WhNMCv0hGFn7cRmSNOWQzgIfLGLERhRY1o4myw==",
       "license": "MIT",
       "dependencies": {
         "@expo/metro-runtime": "4.0.0",

package.json

@@ -25,7 +25,7 @@
     "expo-font": "~13.0.1",
     "expo-haptics": "~14.0.0",
     "expo-linking": "~7.0.3",
-    "expo-router": "~4.0.9",
+    "expo-router": "~4.0.11",
     "expo-splash-screen": "~0.29.13",
     "expo-status-bar": "~2.0.0",
     "expo-symbols": "~0.2.0",