30 frontend bottom nav (#134)

* 🗑️chore: ah yes
* 📚docs: remove useless stuff
* 💫sketch: the real work start HERE
* 🥑frontend: for the svg that got hands
* 🐛fix: forgor I changed the absolute path
* ✨feature: been a month huh WHAT THE F
* 💫ui: bottom nav got hands?
* 🛌🏽ui: background background background x19
* 🛌🏽ui: the bottom nav finally look like the scidadidu
* 🛌🏽ui: this bottom sheet got hands
ayo wtf, why its not clossin
* 💀ui: tbh good enough animation can be another day
* 💀 xD: great
* 💀 xD: react native probaly not my thing up to date
* 💀 xD: nah I had enough
* ✨feature: time to drop iout
* 🤡 ui: I rated this pr 1/100
* 🐛fix: toggle typed error, and minor styling that annoyned me
ANIMATION ANIMATION ANIMATION, well I can make a parallax but `uno momento por favor`
* 🐛fix: ios shoul work now idk

README.md

@@ -2,15 +2,11 @@
 
 The repository for the Barbell project, Group 3.
 
-Quickstart (Deprecated):
-
-- [Installation](https://scribehow.com/shared/Quickstart_Barbell___I7R2_mESL68FTCAMcbF8w)
-- [Issue Board + Development](https://scribehow.com/shared/Issue_and_start_working_on_Barbell__ibGJtJNdRfqZ1aucOCC0sg)
-- [When you fininishing your issue](#)
+## Resolve Merge Conflicts
 
 There will be merge conflicts, so do check out the resources here of how to resolve them:
 
-- [youtube vid](https://www.youtube.com/watch?v=QmKdodJU-js)
+- [youtube](https://www.youtube.com/watch?v=QmKdodJU-js)
 - [blog](https://leonardomontini.dev/merge-conflict-vscode/)
 - [vscode docs](https://code.visualstudio.com/docs/sourcecontrol/overview)
 
@@ -93,6 +89,8 @@ Tasks are assigned to team members by their first name. For tasks with multiple
 - [ ] [expo-router not found](https://github.com/expo/router/issues/748)
 - [ ] [Unmatched Route with Clerk -- Window only](https://github.com/expo/router/issues/457)
 - [ ] [Ah yes, you can only for android OS on an Apple OS](https://github.com/expo/eas-cli/issues/1726)
+- [ ] [Invarient Violation](https://github.com/JesperLekland/react-native-svg-charts/issues/201)
+- [ ] [svg being funny](https://github.com/software-mansion/react-native-svg/issues/1405)
 
 In case you encountered, Failed to get localhost. Please point to your production server.
 

app.json

@@ -0,0 +1,12 @@
+{
+  "expo": {
+    "name": "barbell",
+    "slug": "barbell",
+    "version": "1.0.0",
+    "sdkVersion": "49.0.0",
+    "platforms": [
+      "ios",
+      "android"
+    ]
+  }
+}

apps/expo/babel.config.js

@@ -1,16 +1,27 @@
 /** @type {import("@babel/core").ConfigFunction} */
 module.exports = (api) => {
-  api.cache.forever()
+  // api.cache.forever()
+  api.cache(true)
 
   return {
     presets: [
-      ['babel-preset-expo', { jsxImportSource: 'nativewind' }],
       'nativewind/babel',
+      ['babel-preset-expo', { jsxImportSource: 'nativewind' }], 
     ],
     plugins: [
       require.resolve('expo-router/babel'),
       ['module:react-native-dotenv'],
       require.resolve('react-native-reanimated/plugin'),
+
+      /* aliases */
+      [
+        'module-resolver',
+        {
+          alias: {
+            '~assets': './assets',
+          },
+        },
+      ],
     ],
   }
 }

apps/expo/eas.json

@@ -1,48 +1,48 @@
-{
-  "cli": {
-    "version": ">= 4.1.2"
-  },
-  "build": {
-    "base": {
-      "node": "18.16.1",
-      "ios": {
-        "resourceClass": "m-medium"
-      }
-    },
-    "development": {
-      "extends": "base",
-      "developmentClient": true,
-      "distribution": "internal",
-      "releaseChannel": "default",
-      "android": {
-        "buildType": "apk"
-      }
-    },
-    "preview": {
-      "extends": "base",
-      "distribution": "internal",
-      "releaseChannel": "preview",
-      "android": {
-        "buildType": "apk"
-      }
+  {
+    "cli": {
+      "version": ">= 5.8.0"
     },
-    "production": {
-      "extends": "base"
-    },
-    "devclient": {
-      "extends": "base",
-      "releaseChannel": "default",
-      "distribution": "internal",
-      "developmentClient": true,
-      "android": {
-        "buildType": "apk"
+    "build": {
+      "base": {
+        "node": "18.16.1",
+        "ios": {
+          "resourceClass": "m-medium"
+        }
+      },
+      "development": {
+        "extends": "base",
+        "developmentClient": true,
+        "distribution": "internal",
+        "releaseChannel": "default",
+        "android": {
+          "buildType": "apk"
+        }
+      },
+      "preview": {
+        "extends": "base",
+        "distribution": "internal",
+        "releaseChannel": "preview",
+        "android": {
+          "buildType": "apk"
+        }
       },
-      "ios": {
-        "simulator": true
+      "production": {
+        "extends": "base"
+      },
+      "devclient": {
+        "extends": "base",
+        "releaseChannel": "default",
+        "distribution": "internal",
+        "developmentClient": true,
+        "android": {
+          "buildType": "apk"
+        },
+        "ios": {
+          "simulator": true
+        }
       }
+    },
+    "submit": {
+      "production": {}
     }
-  },
-  "submit": {
-    "production": {}
   }
-}

apps/expo/metro.config.js

@@ -7,12 +7,15 @@ const path = require('path')
 
 module.exports = withTurborepoManagedCache(
   withMonorepoPaths(
-    withNativeWind(getDefaultConfig(__dirname), {
-      input: './src/styles.css',
-      configPath: './tailwind.config.ts',
-    }),
+    withSvgTransformer(
+      withNativeWind(getDefaultConfig(__dirname), {
+        input: './src/styles.css',
+        configPath: './tailwind.config.ts',
+      }),
+    ),
   ),
-)
+);
+
 
 /**
  * Add the monorepo paths to the Metro config.
@@ -54,3 +57,27 @@ function withTurborepoManagedCache(config) {
   return config
 }
 
+/**
+ * Incorporate SVG support using react-native-svg-transformer
+ *
+ * @param {import('expo/metro-config').MetroConfig} config
+ * @returns {import('expo/metro-config').MetroConfig}
+ */
+function withSvgTransformer(config) {
+  const { transformer, resolver } = config
+
+  // Modify the transformer to use react-native-svg-transformer for SVG files
+  config.transformer = {
+    ...transformer,
+    babelTransformerPath: require.resolve('react-native-svg-transformer'),
+  }
+
+  // Update resolver to properly handle SVG files
+  config.resolver = {
+    ...resolver,
+    assetExts: resolver.assetExts.filter((ext) => ext !== 'svg'),
+    sourceExts: [...resolver.sourceExts, 'svg'],
+  }
+
+  return config
+}

apps/expo/package.json

@@ -28,6 +28,7 @@
     "clsx": "^2.1.0",
     "eas-cli": "^7.3.0",
     "expo": "^49.0.23",
+    "expo-application": "~5.3.0",
     "expo-auth-session": "^5.0.2",
     "expo-constants": "~14.4.2",
     "expo-dev-client": "^2.4.13",
@@ -50,6 +51,7 @@
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.1",
     "react-native-svg": "^13.9.0",
+    "react-native-svg-transformer": "^1.3.0",
     "rn-sliding-up-panel": "^2.4.6",
     "superjson": "2.2.1",
     "tailwind-merge": "^2.2.1"