Upgraded outdated dependencies

.github/workflows/build.yml

@@ -12,7 +12,7 @@ jobs:
       - name: 🏗 Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: 18.x
+          node-version: 20.x
           cache: yarn
 
       - name: 🏗 Setup EAS

.github/workflows/lint.yml

@@ -12,7 +12,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: '20'
       - name: Install Dependencies
         run: yarn install --frozen-lockfile
       - name: Run lint
@@ -27,7 +27,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: '20'
       - name: Install Dependencies
         run: yarn install --frozen-lockfile
       - name: Run typecheck
@@ -42,7 +42,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: '20'
       - name: Install Dependencies
         run: yarn install --frozen-lockfile
       - name: Run Prettier through format

.gitignore

@@ -45,4 +45,5 @@ android/
 # The following patterns were generated by expo-cli
 
 expo-env.d.ts
-# @end expo-cli
+# @end expo-cli
+.env.local

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-4.9.2.cjs

README.md

@@ -53,7 +53,7 @@ yarn
 
 ## Project Structure 🏗️
 
-This template provides a well-organized directory structure with a set of pre-configured files to streamline your development process. Here's an overview of the essential components:
+This template provides a well-organized directory structure with a set of preconfigured files to streamline your development process. Here's an overview of the essential components:
 
 - `.github`: Contains GitHub Actions workflows for CI/CD.
 - `app`: Contains the screens (utilizing expo-router file naming).
@@ -166,7 +166,7 @@ Pre-configured routing structure for authenticated and guest users. Routes are t
 ```typescript
 import { Href } from 'expo-router';
 
-type RouteConstructor = <T>(href: Href<T>) => Href<T>;
+type RouteConstructor = (href: Href) => Href;
 const Route: RouteConstructor = (href) => href;
 
 const Routes = {
@@ -281,7 +281,7 @@ These environment variables are injected into the build process using the Infisi
 
 ### Included Packages and Their Benefits 📦
 
-The `react-native-template` includes several packages that extend its capabilities and enrich the development experience. Here’s a brief overview of these packages and what they offer:
+The `react-native-template` includes several packages that extend its capabilities and enrich the development experience. Here's a brief overview of these packages and what they offer:
 
 <a name="zod"></a>
 
@@ -299,7 +299,7 @@ The `react-native-template` includes several packages that extend its capabiliti
 
 #### Lucide-React-Native
 
-[Lucide-React-Native](https://github.com/lucide-icons/lucide-react-native) is a fork of the Feather Icons project, specifically tailored for React Native applications. It provides a collection of beautifully crafted, customizable icons which are easy to use in UI development. Using Lucide icons helps maintain consistency and clarity in the app’s design, making the interface more intuitive and visually appealing.
+[Lucide-React-Native](https://github.com/lucide-icons/lucide-react-native) is a fork of the Feather Icons project, specifically tailored for React Native applications. It provides a collection of beautifully crafted, customizable icons which are easy to use in UI development. Using Lucide icons helps maintain consistency and clarity in the app's design, making the interface more intuitive and visually appealing.
 
 <a name="react-hook-form"></a>
 

app.json

@@ -37,6 +37,7 @@
       [
         "@sentry/react-native/expo",
         {
+          "url": "https://sentry.io/",
           "organization": "sentry org slug, or use the `SENTRY_ORG` environment variable",
           "project": "sentry project name, or use the `SENTRY_PROJECT` environment variable"
         }

app/(authenticated)/index.tsx

@@ -1,6 +1,7 @@
 import Button from '@components/ui/button';
 import { Loading } from '@components/ui/loading';
 import { cn } from '@utils/cn';
+import Routes from '@utils/routes';
 import { useExampleStore } from '@utils/stores/example-store';
 import useToastStore from '@utils/stores/toast-store';
 import theme from '@utils/theme';
@@ -31,7 +32,9 @@ const AuthHomeScreen = () => {
       <Button asChild onPress={() => decrement()}>
         <MinusIcon color={theme.black} />
       </Button>
-      <Button onPress={() => router.navigate('(guest)')}>Logout</Button>
+      <Button onPress={() => router.navigate(Routes.guest.index)}>
+        Logout
+      </Button>
       <Loading />
       <Button onPress={() => setToast({ type: 'success', message: 'Hello!' })}>
         Show Toast

app/(guest)/index.tsx

@@ -1,4 +1,5 @@
 import Button from '@components/ui/button';
+import Routes from '@utils/routes';
 import theme from '@utils/theme';
 import { router } from 'expo-router';
 import { useTranslation } from 'react-i18next';
@@ -22,7 +23,7 @@ const GuestHomeScreen = () => {
       <Text>{t('helloWorld')}</Text>
       <Button
         variant="default"
-        onPress={() => router.navigate('(authenticated)')}>
+        onPress={() => router.navigate(Routes.auth.index)}>
         Login
       </Button>
 

app/_layout.tsx

@@ -3,24 +3,21 @@ import * as Sentry from '@sentry/react-native';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import useCustomFonts from '@utils/hooks/use-custom-fonts';
 import '@utils/i18n/config';
-import Constants from 'expo-constants';
+import { isRunningInExpoGo } from 'expo';
 import { Slot, SplashScreen, useNavigationContainerRef } from 'expo-router';
 import { useEffect } from 'react';
 import '../global.css';
 
-// Construct a new instrumentation instance. This is needed to communicate between the integration and React
-const routingInstrumentation = new Sentry.ReactNavigationInstrumentation();
+const navigationIntegration = Sentry.reactNavigationIntegration({
+  enableTimeToInitialDisplay: !isRunningInExpoGo(),
+});
 
 Sentry.init({
   debug: true,
   dsn: process.env.EXPO_PUBLIC_SENTRY_DSN,
   environment: process.env.EXPO_PUBLIC_SENTRY_ENV,
-  integrations: [
-    new Sentry.ReactNativeTracing({
-      routingInstrumentation,
-      enableNativeFramesTracking: Constants.appOwnership !== 'expo', // Only in native builds, not in Expo Go.
-    }),
-  ],
+  integrations: [navigationIntegration],
+  enableNativeFramesTracking: !isRunningInExpoGo(),
 });
 
 const queryClient = new QueryClient();
@@ -40,7 +37,7 @@ const RootLayout = () => {
 
   useEffect(() => {
     if (ref) {
-      routingInstrumentation.registerNavigationContainer(ref);
+      navigationIntegration.registerNavigationContainer(ref);
     }
   }, [ref]);
 

components/ui/inputs/text.tsx

@@ -1,5 +1,5 @@
 import type { FieldValues, Path } from 'react-hook-form';
-import type { TextInputProps } from 'react-native';
+import type { StyleProp, TextInputProps, ViewStyle } from 'react-native';
 
 import clsx from 'clsx';
 import type { LucideIcon } from 'lucide-react-native';
@@ -12,12 +12,13 @@ type TextInputParams = {
 };
 
 interface FormTextInputProps<TFieldValues extends FieldValues>
-  extends Omit<TextInputProps, 'onBlur' | 'onChangeText' | 'value'> {
+  extends Omit<TextInputProps, 'style'> {
   name: Path<TFieldValues>;
   label?: string;
   icon?: LucideIcon;
   params?: TextInputParams;
   displayMode?: boolean;
+  style?: StyleProp<ViewStyle>;
 }
 
 /**

env.ts

@@ -0,0 +1,20 @@
+import { createEnv } from '@t3-oss/env-core';
+import { z } from 'zod';
+
+const env = createEnv({
+  clientPrefix: 'EXPO_PUBLIC_',
+
+  client: {
+    // API URL for the backend service
+    // This is used for generating the API client with the "gen-api" command
+    EXPO_PUBLIC_API_URL: z.string().url('API_URL must be a valid URL'),
+  },
+
+  /**
+   * What object holds the environment variables at runtime. This is usually
+   * `process.env` or `import.meta.env`.
+   */
+  runtimeEnv: process.env,
+});
+
+export default env;

orval.config.ts

@@ -0,0 +1,25 @@
+import { defineConfig } from 'orval';
+
+export default defineConfig({
+  api: {
+    output: {
+      mode: 'split',
+      target: 'api/generated/endpoints.ts',
+      schemas: 'api/generated/model',
+      client: 'react-query',
+      clean: true,
+      mock: true,
+      prettier: true,
+      override: {
+        mutator: {
+          path: './api/axios-instance.ts',
+          name: 'customAxios',
+        },
+      },
+    },
+    input: {
+      // This will get overridden by /scripts/generate-api.ts
+      target: './placeholder.yaml',
+    },
+  },
+});

package.json

@@ -7,68 +7,73 @@
     "android": "infisical run -- expo start --android",
     "ios": "infisical run -- expo start --ios",
     "web": "infisical run -- expo start --web -c",
-    "gen-api": "infisical run --path='/frontend' --command 'openapi-zod-client \"$EXPO_PUBLIC_API_URL/docs/bundle.yml\" -o './api/index.ts' -t ./scripts/zodios-client-template.hbs' && prettier --write ./api/index.ts",
+    "gen-api": "infisical run --command 'tsx ./scripts/generate-api.ts'",
     "lint": "eslint .",
     "format-check": "prettier --check .",
     "format-fix": "prettier --write .",
     "prepare": "husky",
     "eas-build-pre-install": "./scripts/infisical.sh"
   },
   "dependencies": {
-    "@react-native-async-storage/async-storage": "^1.23.1",
-    "@sentry/react-native": "~5.22.0",
+    "@react-native-async-storage/async-storage": "2.1.2",
+    "@sentry/react-native": "~6.14.0",
+    "@t3-oss/env-core": "^0.13.8",
     "@tanstack/react-query": "^5.29.2",
     "@zodios/core": "^10.9.6",
     "@zodios/react": "^10.4.5",
     "axios": "^1.6.8",
     "clsx": "^2.1.0",
-    "expo": "~51.0.9",
-    "expo-constants": "~16.0.2",
-    "expo-font": "~12.0.6",
-    "expo-linear-gradient": "~13.0.2",
-    "expo-linking": "~6.3.1",
-    "expo-localization": "~15.0.3",
-    "expo-network": "~6.0.1",
-    "expo-router": "~3.5.14",
-    "expo-status-bar": "~1.12.1",
+    "exp": "^57.2.1",
+    "expo": "^53.0.13",
+    "expo-constants": "~17.1.6",
+    "expo-font": "~13.3.1",
+    "expo-linear-gradient": "~14.1.5",
+    "expo-linking": "~7.1.5",
+    "expo-localization": "~16.1.5",
+    "expo-network": "~7.1.5",
+    "expo-router": "~5.1.1",
+    "expo-status-bar": "~2.2.3",
     "i18next": "^23.10.1",
     "intl-pluralrules": "^2.0.1",
-    "lottie-react-native": "6.7.0",
+    "lottie-react-native": "7.2.2",
     "lucide-react-native": "^0.368.0",
-    "nativewind": "^4.0.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "nativewind": "^4.1.23",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
     "react-hook-form": "^7.51.3",
     "react-i18next": "^14.1.0",
-    "react-native": "0.74.1",
-    "react-native-gesture-handler": "~2.16.1",
-    "react-native-reanimated": "~3.10.1",
-    "react-native-safe-area-context": "4.10.1",
-    "react-native-screens": "3.31.1",
-    "react-native-svg": "15.2.0",
+    "react-native": "0.79.4",
+    "react-native-gesture-handler": "~2.24.0",
+    "react-native-reanimated": "~3.17.4",
+    "react-native-safe-area-context": "5.4.0",
+    "react-native-screens": "~4.11.1",
+    "react-native-svg": "15.11.2",
     "tailwind-merge": "^2.2.2",
     "tailwindcss": "^3.4.3",
-    "zod": "^3.22.4",
-    "zustand": "^4.5.2"
+    "zod": "^3.25.67",
+    "zustand": "^5.0.6"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@commitlint/cli": "^19.3.0",
     "@commitlint/config-conventional": "^19.2.2",
     "@eslint/js": "^9.2.0",
     "@types/aes-js": "^3.1.4",
-    "@types/react": "~18.2.79",
+    "@types/react": "~19.0.10",
     "@types/react-dom": "~18.2.25",
     "eslint": "8",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-sonarjs": "^1.0.3",
     "husky": "^9.0.11",
     "openapi-zod-client": "^1.18.1",
-    "prettier": "^3.2.5",
+    "orval": "^7.10.0",
+    "prettier": "^3.6.2",
     "prettier-plugin-organize-imports": "^3.2.4",
     "prettier-plugin-tailwindcss": "^0.5.13",
-    "typescript": "~5.3.3",
+    "tsx": "^4.20.3",
+    "typescript": "~5.8.3",
     "typescript-eslint": "^7.9.0"
   },
-  "private": true
+  "private": true,
+  "packageManager": "yarn@4.9.2"
 }

tsconfig.json

@@ -3,6 +3,7 @@
   "compilerOptions": {
     "strict": true,
     "baseUrl": ".",
+    "moduleResolution": "bundler",
     "paths": {
       "@assets/*": ["assets/*"],
       "@components/*": ["components/*"],
@@ -15,6 +16,7 @@
     "**/*.tsx",
     "**/*.js",
     ".expo/types/**/*.ts",
-    "expo-env.d.ts"
+    "expo-env.d.ts",
+    "nativewind-env.d.ts"
   ]
 }

utils/credentials/README.md

@@ -1,7 +1,6 @@
 This folder should contain credential files (e.g. provided by Google):
 
 1. Firebase files (if this app uses Firebase Cloud Messaging and Firebase Crashlytics atm):
-
    - `google-services.json` for android
    - `GoogleService-Info.plist` for iOS
 

utils/routes.ts

@@ -1,17 +1,9 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import { Href } from 'expo-router';
-
-// This is a helper function to create a route object with type safety
-type RouteConstructor = <T>(href: Href<T>) => Href<T>;
-const Route: RouteConstructor = (href) => href;
-
 const Routes = {
   guest: {
-    index: Route('/(guest)/'),
+    index: '/(guest)',
   },
   auth: {
-    index: Route('/(authenticated)/'),
+    index: '/(authenticated)',
   },
 } as const;