Animated the container and added revalidation of credentials on app reopen

App.tsx

@@ -3,6 +3,8 @@ import { NavigationContainer } from "@react-navigation/native";
 import { createDrawerNavigator } from "@react-navigation/drawer";
 import { Provider } from "react-redux";
 import store from "./src/features/redux/Store/Store";
+import "react-native-reanimated";
+import "react-native-gesture-handler";
 
 import CustomDrawerContent from "./src/components/DrawerSettings/CustomDrawerContent";
 import DrawerScreenSettings from "./src/components/DrawerSettings/DrawerScreenSettings";
@@ -11,6 +13,7 @@ import Home from "./src/routes/Home/Home";
 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";
 
 const Drawer = createDrawerNavigator();
 
@@ -19,7 +22,7 @@ export default function App() {
     <Provider store={store}>
       <NavigationContainer>
         <Drawer.Navigator
-          initialRouteName="Home"
+          initialRouteName="Revalidation"
           drawerContent={CustomDrawerContent}
           screenOptions={DrawerScreenSettings}
         >
@@ -27,6 +30,7 @@ export default function App() {
           <Drawer.Screen name="Login" component={Login} />
           <Drawer.Screen name="Register" component={Register} />
           <Drawer.Screen name="Onboarding" component={Onboarding} />
+          <Drawer.Screen name="Revalidation" component={Revalidation} />
         </Drawer.Navigator>
       </NavigationContainer>
     </Provider>

package-lock.json

@@ -10,11 +10,13 @@
       "dependencies": {
         "@react-native-async-storage/async-storage": "1.17.11",
         "@react-navigation/drawer": "^6.6.3",
+        "@react-navigation/native": "^6.1.7",
         "@react-navigation/native-stack": "^6.9.13",
         "@reduxjs/toolkit": "^1.9.5",
         "axios": "^1.4.0",
         "expo": "~48.0.18",
         "expo-status-bar": "~1.4.4",
+        "moti": "^0.25.3",
         "react": "18.2.0",
         "react-native": "0.71.8",
         "react-native-gesture-handler": "~2.9.0",
@@ -1984,6 +1986,21 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "optional": true,
+      "dependencies": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
+      "optional": true
+    },
     "node_modules/@expo/bunyan": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@expo/bunyan/-/bunyan-4.0.0.tgz",
@@ -3549,6 +3566,64 @@
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz",
       "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw=="
     },
+    "node_modules/@motionone/animation": {
+      "version": "10.15.1",
+      "resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.15.1.tgz",
+      "integrity": "sha512-mZcJxLjHor+bhcPuIFErMDNyrdb2vJur8lSfMCsuCB4UyV8ILZLvK+t+pg56erv8ud9xQGK/1OGPt10agPrCyQ==",
+      "dependencies": {
+        "@motionone/easing": "^10.15.1",
+        "@motionone/types": "^10.15.1",
+        "@motionone/utils": "^10.15.1",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/dom": {
+      "version": "10.12.0",
+      "resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.12.0.tgz",
+      "integrity": "sha512-UdPTtLMAktHiqV0atOczNYyDd/d8Cf5fFsd1tua03PqTwwCe/6lwhLSQ8a7TbnQ5SN0gm44N1slBfj+ORIhrqw==",
+      "dependencies": {
+        "@motionone/animation": "^10.12.0",
+        "@motionone/generators": "^10.12.0",
+        "@motionone/types": "^10.12.0",
+        "@motionone/utils": "^10.12.0",
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/easing": {
+      "version": "10.15.1",
+      "resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.15.1.tgz",
+      "integrity": "sha512-6hIHBSV+ZVehf9dcKZLT7p5PEKHGhDwky2k8RKkmOvUoYP3S+dXsKupyZpqx5apjd9f+php4vXk4LuS+ADsrWw==",
+      "dependencies": {
+        "@motionone/utils": "^10.15.1",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/generators": {
+      "version": "10.15.1",
+      "resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.15.1.tgz",
+      "integrity": "sha512-67HLsvHJbw6cIbLA/o+gsm7h+6D4Sn7AUrB/GPxvujse1cGZ38F5H7DzoH7PhX+sjvtDnt2IhFYF2Zp1QTMKWQ==",
+      "dependencies": {
+        "@motionone/types": "^10.15.1",
+        "@motionone/utils": "^10.15.1",
+        "tslib": "^2.3.1"
+      }
+    },
+    "node_modules/@motionone/types": {
+      "version": "10.15.1",
+      "resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.15.1.tgz",
+      "integrity": "sha512-iIUd/EgUsRZGrvW0jqdst8st7zKTzS9EsKkP+6c6n4MPZoQHwiHuVtTQLD6Kp0bsBLhNzKIBlHXponn/SDT4hA=="
+    },
+    "node_modules/@motionone/utils": {
+      "version": "10.15.1",
+      "resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.15.1.tgz",
+      "integrity": "sha512-p0YncgU+iklvYr/Dq4NobTRdAPv9PveRDUXabPEeOjBLSO/1FNB2phNTZxOxpi1/GZwYpAoECEa0Wam+nsmhSw==",
+      "dependencies": {
+        "@motionone/types": "^10.15.1",
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.3.1"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -4946,7 +5021,6 @@
       "version": "6.4.9",
       "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.4.9.tgz",
       "integrity": "sha512-G9GH7bP9x0qqupxZnkSftnkn4JoXancElTvFc8FVGfEvxnxP+gBo3wqcknyBi7M5Vad4qecsYjCOa9wqsftv9g==",
-      "peer": true,
       "dependencies": {
         "@react-navigation/routers": "^6.1.9",
         "escape-string-regexp": "^4.0.0",
@@ -4963,7 +5037,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -4974,8 +5047,7 @@
     "node_modules/@react-navigation/core/node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-      "peer": true
     },
     "node_modules/@react-navigation/drawer": {
       "version": "6.6.3",
@@ -5011,7 +5083,6 @@
       "version": "6.1.7",
       "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.1.7.tgz",
       "integrity": "sha512-W6E3+AtTombMucCRo6q7vPmluq8hSjS+IxfazJ/SokOe7ChJX7eLvvralIsJkjFj3iWV1KgOSnHxa6hdiFasBw==",
-      "peer": true,
       "dependencies": {
         "@react-navigation/core": "^6.4.9",
         "escape-string-regexp": "^4.0.0",
@@ -5043,7 +5114,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -5055,7 +5125,6 @@
       "version": "6.1.9",
       "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.1.9.tgz",
       "integrity": "sha512-lTM8gSFHSfkJvQkxacGM6VJtBt61ip2XO54aNfswD+KMw6eeZ4oehl7m0me3CR9hnDE4+60iAZR8sAhvCiI3NA==",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.1.23"
       }
@@ -7496,8 +7565,7 @@
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
-      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
-      "peer": true
     },
     "node_modules/fast-glob": {
       "version": "3.3.0",
@@ -7598,7 +7666,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
       "integrity": "sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7772,6 +7839,34 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-6.5.1.tgz",
+      "integrity": "sha512-o1BGqqposwi7cgDrtg0dNONhkmPsUFDaLcKXigzuTFC5x58mE8iyTazxSudFzmT6MEyJKfjjU8ItoMe3W+3fiw==",
+      "dependencies": {
+        "@motionone/dom": "10.12.0",
+        "framesync": "6.0.1",
+        "hey-listen": "^1.0.8",
+        "popmotion": "11.0.3",
+        "style-value-types": "5.0.0",
+        "tslib": "^2.1.0"
+      },
+      "optionalDependencies": {
+        "@emotion/is-prop-valid": "^0.8.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8 || ^17.0.0 || ^18.0.0",
+        "react-dom": ">=16.8 || ^17.0.0 || ^18.0.0"
+      }
+    },
+    "node_modules/framesync": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/framesync/-/framesync-6.0.1.tgz",
+      "integrity": "sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/freeport-async": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/freeport-async/-/freeport-async-2.0.0.tgz",
@@ -8107,6 +8202,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/hey-listen": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
+      "integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
+    },
     "node_modules/hoist-non-react-statics": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
@@ -10870,6 +10970,17 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/moti": {
+      "version": "0.25.3",
+      "resolved": "https://registry.npmjs.org/moti/-/moti-0.25.3.tgz",
+      "integrity": "sha512-n6YR56i+tQdIuiOfspeCCvNR8vAJtPdfclt4998rX6S6kQn+/5DmfBWkOneN63JFTWM/oYnZHwwpF4z4LUXohQ==",
+      "dependencies": {
+        "framer-motion": "^6.5.1"
+      },
+      "peerDependencies": {
+        "react-native-reanimated": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -10937,7 +11048,6 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "peer": true,
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -11662,6 +11772,17 @@
         "node": ">=4.0.0"
       }
     },
+    "node_modules/popmotion": {
+      "version": "11.0.3",
+      "resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.3.tgz",
+      "integrity": "sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==",
+      "dependencies": {
+        "framesync": "6.0.1",
+        "hey-listen": "^1.0.8",
+        "style-value-types": "5.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/posix-character-classes": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz",
@@ -11818,7 +11939,6 @@
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.1.3.tgz",
       "integrity": "sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg==",
-      "peer": true,
       "dependencies": {
         "decode-uri-component": "^0.2.2",
         "filter-obj": "^1.1.0",
@@ -11932,6 +12052,19 @@
         }
       }
     },
+    "node_modules/react-dom": {
+      "version": "18.2.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
+      "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.0"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0"
+      }
+    },
     "node_modules/react-freeze": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/react-freeze/-/react-freeze-1.0.3.tgz",
@@ -13005,7 +13138,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
       "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==",
-      "peer": true,
       "engines": {
         "node": ">=6"
       }
@@ -13188,7 +13320,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
       "integrity": "sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==",
-      "peer": true,
       "engines": {
         "node": ">=4"
       }
@@ -13283,6 +13414,15 @@
       "resolved": "https://registry.npmjs.org/structured-headers/-/structured-headers-0.4.1.tgz",
       "integrity": "sha512-0MP/Cxx5SzeeZ10p/bZI0S6MpgD+yxAhi1BOQ34jgnMXsCq3j1t6tQnZu+KdlL7dvJTLT3g9xN8tl10TqgFMcg=="
     },
+    "node_modules/style-value-types": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-5.0.0.tgz",
+      "integrity": "sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==",
+      "dependencies": {
+        "hey-listen": "^1.0.8",
+        "tslib": "^2.1.0"
+      }
+    },
     "node_modules/sucrase": {
       "version": "3.32.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.32.0.tgz",
@@ -13982,7 +14122,6 @@
       "version": "0.1.6",
       "resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.1.6.tgz",
       "integrity": "sha512-VO/P91A/PmKH9bcN9a7O3duSuxe6M14ZoYXgA6a8dab8doWNdhiIHzEkX/jFeTTRBsX0Ubk6nG4q2NIjNsj+bg==",
-      "peer": true,
       "peerDependencies": {
         "react": ">=16.8"
       }

package.json

@@ -9,12 +9,15 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@react-native-async-storage/async-storage": "1.17.11",
     "@react-navigation/drawer": "^6.6.3",
+    "@react-navigation/native": "^6.1.7",
     "@react-navigation/native-stack": "^6.9.13",
     "@reduxjs/toolkit": "^1.9.5",
     "axios": "^1.4.0",
     "expo": "~48.0.18",
     "expo-status-bar": "~1.4.4",
+    "moti": "^0.25.3",
     "react": "18.2.0",
     "react-native": "0.71.8",
     "react-native-gesture-handler": "~2.9.0",
@@ -23,8 +26,7 @@
     "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"
-    "@react-native-async-storage/async-storage": "1.17.11"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

src/components/AnimatedContainer/AnimatedContainer.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { View, Text } from "react-native";
+import styles from "../../styles";
+import { colors } from "../../styles";
+import { MotiView } from "moti";
+export interface props {
+  children: React.ReactNode;
+}
+
+export default function AnimatedContainer(props: props) {
+  return (
+    <MotiView
+      style={styles.container}
+      from={{ opacity: 0, backgroundColor: colors.orange_1 }}
+      animate={{ opacity: 1, backgroundColor: colors.blue_2 }}
+      transition={{ type: "timing", duration: 300 }}
+    >
+      {props.children}
+    </MotiView>
+  );
+}

src/components/Api/Api.tsx

@@ -21,8 +21,28 @@ const instance = axios.create({
 
 // App APIs
 
-// User APIs
+// Token Handling
+export async function getAccessToken() {
+  const accessToken = await AsyncStorage.getItem("access_token");
+  return accessToken;
+}
 
+export async function getRefreshToken() {
+  const refreshToken = await AsyncStorage.getItem("refresh_token");
+  return refreshToken;
+}
+
+export async function setAccessToken(access: string) {
+  await AsyncStorage.setItem("access_token", access);
+  return true;
+}
+
+export async function setRefreshToken(refresh: string) {
+  await AsyncStorage.setItem("refresh_token", refresh);
+  return true;
+}
+
+// User APIs
 export function UserRegister(register: RegistrationParams) {
   console.log(JSON.stringify(register));
   return instance
@@ -39,15 +59,14 @@ export function UserLogin(user: LoginParams) {
   return instance
     .post("/api/v1/accounts/jwt/create/", user)
     .then(async (response) => {
-      console.log(response.data.access, response.data.refresh);
+      console.log(
-      AsyncStorage.setItem(
+        "Access Token:",
-        "access_token",
+        response.data.access,
-        JSON.stringify(response.data.access)
+        "\nRefresh Token:",
-      );
+        response.data.refresh
-      AsyncStorage.setItem(
-        "refresh_token",
-        JSON.stringify(response.data.refresh)
       );
+      setAccessToken(response.data.access);
+      setRefreshToken(response.data.refresh);
       return [
         true,
         JSON.stringify(response.data.access),
@@ -60,28 +79,41 @@ export function UserLogin(user: LoginParams) {
     });
 }
 
-export function TokenRefresh(token: string) {
+export async function TokenRefresh() {
+  const refresh = await getRefreshToken();
+  // console.log("Refresh token", refresh);
   return instance
-    .post("/api/v1/accounts/jwt/refresh/", token)
+    .post("/api/v1/accounts/jwt/refresh/", {
+      refresh: refresh,
+    })
     .then(async (response) => {
-      AsyncStorage.setItem("token", JSON.stringify(response.data.auth_token));
+      setAccessToken(response.data.access);
-      return true;
+      /*console.log(
+        "Token refresh success! New Access Token",
+        response.data.access
+      );*/
+      return [true, getAccessToken()];
     })
     .catch((error) => {
-      console.log("Login Failed: " + error);
+      console.log("Refresh Failed: " + JSON.stringify(error.response.data));
-      return false;
+      return [false, error.response.data];
     });
 }
 export async function UserInfo() {
-  const token = JSON.parse((await AsyncStorage.getItem("token")) || "{}");
+  const accessToken = await getAccessToken();
   return instance
     .get("/api/v1/accounts/users/me/", {
       headers: {
-        Authorization: "Token " + token,
+        Authorization: `Bearer ${accessToken}`,
       },
     })
     .then((response) => {
+      console.log(JSON.stringify(response.data));
       return response.data;
+    })
+    .catch((error) => {
+      console.log("User Info Error", error.response.data);
+      return [false, error.response.data];
     });
 }
 

src/components/DrawerSettings/CustomDrawerContent.tsx

@@ -11,6 +11,7 @@ import HomeIcon from "../../icons/HomeIcon/HomeIcon";
 import LoginIcon from "../../icons/LoginIcon/LoginIcon";
 import SignupIcon from "../../icons/SignupIcon/SignupIcon";
 import DrawerButton from "../Button/DrawerButton";
+import AddIcon from "../../icons/AddIcon/AddIcon";
 
 export default function CustomDrawerContent(props: {}) {
   const navigation = useNavigation<RootDrawerParamList>();
@@ -52,6 +53,15 @@ export default function CustomDrawerContent(props: {}) {
         <SignupIcon size={32} />
         <Text style={styles.text_white_medium}>Register</Text>
       </DrawerButton>
+      <DrawerButton
+        color={colors.blue_2}
+        onPress={() => {
+          navigation.navigate("Revalidation");
+        }}
+      >
+        <AddIcon size={32} />
+        <Text style={styles.text_white_medium}>Revalidation</Text>
+      </DrawerButton>
     </DrawerContentScrollView>
   );
 }

src/routes/Home/Home.tsx

@@ -7,13 +7,16 @@ import Button from "../../components/Button/Button";
 import { UserLogin } from "../../components/Api/Api";
 import { colors } from "../../styles";
 import axios from "axios";
+import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
 
 export default function Home() {
   const creds = useSelector((state: RootState) => state.auth.creds);
   return (
     <View style={styles.background}>
-      <Text style={styles.text_white_large}>Template Homepage</Text>
+      <AnimatedContainer>
-      <Text style={styles.text_white_tiny}>{JSON.stringify(creds)}</Text>
+        <Text style={styles.text_white_large}>Template Homepage</Text>
+        <Text style={styles.text_white_tiny}>{JSON.stringify(creds)}</Text>
+      </AnimatedContainer>
     </View>
   );
 }

src/routes/Login/Login.tsx

@@ -17,6 +17,7 @@ import { useNavigation } from "@react-navigation/native";
 import { RootDrawerParamList } from "../../interfaces/Interfaces";
 import { UserLogin } from "../../components/Api/Api";
 import { ParseLoginError } from "../../components/ParseError/ParseError";
+import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
 
 export default function Login() {
   const navigation = useNavigation<RootDrawerParamList>();
@@ -28,7 +29,7 @@ export default function Login() {
   });
   return (
     <View style={styles.background}>
-      <View style={styles.container}>
+      <AnimatedContainer>
         <View
           style={{
             paddingVertical: 4,
@@ -80,12 +81,12 @@ export default function Login() {
             }).then((result) => {
               if (result[0]) {
                 setUser({ ...user, username: "", password: "", error: "" });
-                console.log(
+                /*console.log(
                   "Access Token:",
                   result[1],
                   "\nRefresh Token:",
                   result[2]
-                );
+                );*/
                 dispatch(
                   setToken({
                     access_token: result[1],
@@ -111,7 +112,7 @@ export default function Login() {
         >
           <Text style={styles.text_white_small}>Register</Text>
         </Button>
-      </View>
+      </AnimatedContainer>
     </View>
   );
 }

src/routes/Register/Register.tsx

@@ -17,6 +17,7 @@ import SignupIcon from "../../icons/SignupIcon/SignupIcon";
 import { UserRegister } from "../../components/Api/Api";
 import IsNumber from "../../components/IsNumber/IsNumber";
 import ParseError from "../../components/ParseError/ParseError";
+import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
 
 export default function Register() {
   const navigation = useNavigation<RootDrawerParamList>();
@@ -33,7 +34,7 @@ export default function Register() {
   });
   return (
     <View style={styles.background}>
-      <View style={styles.container}>
+      <AnimatedContainer>
         <View
           style={{
             paddingVertical: 4,
@@ -167,7 +168,7 @@ export default function Register() {
         >
           <Text style={styles.text_white_small}>Register</Text>
         </Button>
-      </View>
+      </AnimatedContainer>
     </View>
   );
 }

src/routes/Revalidation/Revalidation.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+import styles from "../../styles";
+import { View, Text, ActivityIndicator } from "react-native";
+import Button from "../../components/Button/Button";
+import { TokenRefresh, UserInfo, UserLogin } from "../../components/Api/Api";
+import axios from "axios";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "../../features/redux/Store/Store";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+
+import { MotiView } from "moti";
+import { colors } from "../../styles";
+import { useEffect, useState } from "react";
+import { useNavigation } from "@react-navigation/native";
+import { RootDrawerParamList } from "../../interfaces/Interfaces";
+import { setUser } from "../../features/redux/slices/AuthSlice/AuthSlice";
+import AnimatedContainer from "../../components/AnimatedContainer/AnimatedContainer";
+
+export default function Revalidation() {
+  const dispatch = useDispatch();
+  const navigation = useNavigation<RootDrawerParamList>();
+  const creds = useSelector((state: RootState) => state.auth.creds);
+  console.log(JSON.stringify(creds));
+  const [state, setState] = useState("Checking for existing session");
+  useEffect(() => {
+    setState("Previous session found");
+    TokenRefresh().then(async (response) => {
+      if (response[0]) {
+        await dispatch(setUser(await UserInfo()));
+        setTimeout(() => {
+          navigation.navigate("Home");
+        }, 700);
+      } else {
+        setState("Session expired");
+        setTimeout(() => {
+          navigation.navigate("Login");
+        }, 700);
+      }
+    });
+  }, []);
+
+  return (
+    <View style={styles.background}>
+      <AnimatedContainer>
+        <View style={{ paddingVertical: 8 }} />
+        <ActivityIndicator size={96} color={colors.blue_1} />
+        <Text style={styles.text_white_medium}>{state}</Text>
+      </AnimatedContainer>
+    </View>
+  );
+}