Added initial activation page

App.tsx

@@ -5,6 +5,7 @@ import { Provider } from "react-redux";
 import store from "./src/features/redux/Store/Store";
 import "react-native-reanimated";
 import "react-native-gesture-handler";
+import * as Linking from "expo-linking";
 
 import CustomDrawerContent from "./src/components/DrawerSettings/CustomDrawerContent";
 import DrawerScreenSettings from "./src/components/DrawerSettings/DrawerScreenSettings";
@@ -14,13 +15,48 @@ import Login from "./src/routes/Login/Login";
 import Register from "./src/routes/Register/Register";
 import Onboarding from "./src/routes/Onboarding/Onboarding";
 import Revalidation from "./src/routes/Revalidation/Revalidation";
+import Activation from "./src/routes/Activation/Activation";
+import { useState, useEffect } from "react";
 
 const Drawer = createDrawerNavigator();
 
+const linking = {
+  prefixes: [Linking.makeUrl("/")],
+  config: {
+    screens: {
+      Home: "home",
+      Login: "login",
+      Register: "register",
+      Onboarding: "onboarding",
+      Revalidation: "revalidation",
+      Activation: "activation/:uid?/:token?",
+      NotFound: "*",
+    },
+  },
+};
+
 export default function App() {
+  const [initialRoute, setInitialRoute] = useState<string | null>(null);
+  useEffect(() => {
+    async function getInitialURL() {
+      const url = await Linking.getInitialURL();
+      if (url) {
+        setInitialRoute(url);
+      }
+    }
+    if (!initialRoute) {
+      getInitialURL();
+    }
+  }, [initialRoute]);
+
+  if (!initialRoute) {
+    console.log("heh");
+    return null;
+  }
+
   return (
     <Provider store={store}>
-      <NavigationContainer>
+      <NavigationContainer linking={linking}>
         <Drawer.Navigator
           initialRouteName="Revalidation"
           drawerContent={CustomDrawerContent}
@@ -31,6 +67,7 @@ export default function App() {
           <Drawer.Screen name="Register" component={Register} />
           <Drawer.Screen name="Onboarding" component={Onboarding} />
           <Drawer.Screen name="Revalidation" component={Revalidation} />
+          <Drawer.Screen name="Activation" component={Activation} />
         </Drawer.Navigator>
       </NavigationContainer>
     </Provider>

app.json

@@ -1,6 +1,7 @@
 {
   "expo": {
     "name": "StudE_Frontend",
+    "scheme": "StudE_Frontend",
     "slug": "StudE_Frontend",
     "version": "1.0.0",
     "orientation": "portrait",

package-lock.json

@@ -15,6 +15,7 @@
         "@reduxjs/toolkit": "^1.9.5",
         "axios": "^1.4.0",
         "expo": "~48.0.18",
+        "expo-linking": "~4.0.1",
         "expo-status-bar": "~1.4.4",
         "moti": "^0.25.3",
         "react": "18.2.0",
@@ -5245,6 +5246,11 @@
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
       "integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
     },
+    "node_modules/@types/qs": {
+      "version": "6.9.7",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
+      "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw=="
+    },
     "node_modules/@types/react": {
       "version": "18.0.38",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.38.tgz",
@@ -7376,6 +7382,18 @@
         "expo": "*"
       }
     },
+    "node_modules/expo-linking": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/expo-linking/-/expo-linking-4.0.1.tgz",
+      "integrity": "sha512-geRMmKLhtaCigptRzOGW8ZZJKGl47gyu0KFtQOtGf26ELxyt/AietgQjyzF24i7cVD08TnWUJDHgWZkpRHTa7g==",
+      "dependencies": {
+        "@types/qs": "^6.9.7",
+        "expo-constants": "~14.2.0",
+        "invariant": "^2.2.4",
+        "qs": "^6.11.0",
+        "url-parse": "^1.5.9"
+      }
+    },
     "node_modules/expo-modules-autolinking": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/expo-modules-autolinking/-/expo-modules-autolinking-1.2.0.tgz",

package.json

@@ -26,7 +26,8 @@
     "react-native-screens": "~3.20.0",
     "react-native-svg": "13.4.0",
     "react-redux": "^8.1.1",
-    "redux": "^4.2.1"
+    "redux": "^4.2.1",
+    "expo-linking": "~4.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

src/components/DrawerSettings/CustomDrawerContent.tsx

@@ -62,6 +62,15 @@ export default function CustomDrawerContent(props: {}) {
         <AddIcon size={32} />
         <Text style={styles.text_white_medium}>Revalidation</Text>
       </DrawerButton>
+      <DrawerButton
+        color={colors.blue_2}
+        onPress={() => {
+          navigation.navigate("Activation");
+        }}
+      >
+        <AddIcon size={32} />
+        <Text style={styles.text_white_medium}>Activation</Text>
+      </DrawerButton>
     </DrawerContentScrollView>
   );
 }

src/routes/Activation/Activation.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+import styles, { colors } from "../../styles";
+import { View, Text, ActivityIndicator } from "react-native";
+import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
+import { useRoute } from "@react-navigation/native";
+
+interface ActivationRouteParams {
+  uid?: string;
+  token?: string;
+}
+
+export default function Activation() {
+  const route = useRoute();
+  const { uid, token } = route.params as ActivationRouteParams;
+  return (
+    <View style={styles.background}>
+      <AnimatedContainer>
+        <Text style={styles.text_white_large}>Activation</Text>
+        <View style={{ paddingVertical: 8 }} />
+        <ActivityIndicator size={96} color={colors.blue_1} />
+        <Text style={styles.text_white_medium}>
+          Activating {uid ? `with UID: ${uid}` : ""}{" "}
+          {token ? `and Token: ${token}` : ""}
+        </Text>
+      </AnimatedContainer>
+    </View>
+  );
+}