feat: add page fade transition

invertedEcho · May 25, 2024 · 79969f4 · 79969f4
1 parent 730ca6d
commit 79969f4
Show file tree

Hide file tree

Showing 8 changed files with 1,066 additions and 497 deletions.
diff --git a/frontend/App.tsx b/frontend/App.tsx
@@ -26,7 +26,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import "./public/tailwind.css";
 import Toast from "react-native-toast-message";
 import AllTasksScreen from "./src/screens/all-tasks";
-import { NavigationContainer } from "@react-navigation/native";
+import { DefaultTheme, NavigationContainer } from "@react-navigation/native";
 import { CreateTaskGroupScreen } from "./src/screens/create-task-group";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 
@@ -36,7 +36,7 @@ type IconGlyph = keyof typeof Ionicons.glyphMap;
 
 function getIconName(
   routeName: string,
-  focused: boolean,
+  focused: boolean
 ): IconGlyph | undefined {
   switch (routeName) {
     case "MyAssignments":
@@ -82,7 +82,12 @@ export default function App() {
     <AuthContext.Provider value={{ isAuthorized, setIsAuthorized, userId }}>
       <QueryClientProvider client={queryClient}>
         <SafeAreaProvider>
-          <NavigationContainer>
+          <NavigationContainer
+            theme={{
+              ...DefaultTheme,
+              colors: { ...DefaultTheme.colors, background: "#0F172A" },
+            }}
+          >
             <BottomTabNavigator.Navigator
               initialRouteName="CreateTaskGroup"
               screenOptions={({ route }) => ({
@@ -105,6 +110,7 @@ export default function App() {
                   </>
                 ),
                 headerRightContainerStyle: { marginRight: 20 },
+                unmountOnBlur: true,
               })}
             >
               {!isAuthorized && (

diff --git a/frontend/package.json b/frontend/package.json
@@ -34,15 +34,16 @@
     "react-native": "0.74.1",
     "react-native-bouncy-checkbox": "^4.0.0",
     "react-native-element-dropdown": "^2.12.0",
+    "react-native-reanimated": "~3.10.1",
     "react-native-safe-area-context": "4.10.1",
     "react-native-screens": "~3.31.1",
     "react-native-toast-message": "^2.2.0",
-    "react-native-web": "~0.19.6",
+    "react-native-web": "~0.19.11",
     "react-navigation": "^5.0.0",
     "zod": "^3.23.4"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.0",
+    "@babel/core": "^7.24.4",
     "@babel/plugin-transform-class-static-block": "^7.24.4",
     "@tanstack/eslint-plugin-query": "^5.28.11",
     "@tsconfig/react-native": "^3.0.5",