added zodios with examples + use-custom-fonts hook

api/api-error-plugin.ts

@@ -0,0 +1,22 @@
+import { ZodiosPlugin } from '@zodios/core';
+import { AxiosError } from 'axios';
+
+const SKIP_ERROR_HANDLING_URLS = ['/example/skip-error-handling'];
+
+const errorErrorPlugin: ZodiosPlugin = {
+  name: 'errorErrorPlugin',
+  error: async (api, config, err) => {
+    if (SKIP_ERROR_HANDLING_URLS.includes(config.url)) {
+      console.log('Skipping error handling for', config.url);
+      throw err;
+    }
+
+    if (err instanceof AxiosError) {
+      console.error('AxiosError', err);
+    }
+
+    throw err;
+  },
+};
+
+export default errorErrorPlugin;

api/api.ts

@@ -0,0 +1,14 @@
+import { Zodios } from '@zodios/core';
+import { ZodiosHooks } from '@zodios/react';
+import apiErrorPlugin from './api-error-plugin';
+import exampleApi from './example';
+
+const API_URL = process.env.EXPO_PUBLIC_API_URL || '';
+
+// Zodios API client
+const apiClient = new Zodios(API_URL, [...exampleApi]);
+
+apiClient.use(apiErrorPlugin);
+const api = new ZodiosHooks('exampleApi', apiClient);
+
+export { api, apiClient };

api/example/index.ts

@@ -0,0 +1,47 @@
+import { apiBuilder } from '@zodios/core';
+import { z } from 'zod';
+
+// Endpoints for Example API - Example Endpoints.
+const exampleApi = apiBuilder({
+  method: 'get',
+  path: '/example',
+  alias: 'getExample',
+  description: 'Get example',
+  response: z.object({
+    text: z.string(),
+  }),
+  parameters: [
+    {
+      type: 'Query',
+      name: 'name',
+      description: 'User name',
+      schema: z.string().optional(),
+    },
+  ],
+  errors: [{ status: 'default', schema: z.object({ message: z.string() }) }],
+})
+  .addEndpoint({
+    method: 'post',
+    path: '/example/:exampleId',
+    description: 'Add example',
+    alias: 'addExample',
+    response: z.object({}),
+    parameters: [
+      {
+        name: 'exampleId',
+        type: 'Path',
+        schema: z.string(),
+      },
+      {
+        name: 'body',
+        type: 'Body',
+        schema: z.object({
+          name: z.string(),
+        }),
+      },
+    ],
+    errors: [{ status: 'default', schema: z.object({ message: z.string() }) }],
+  })
+  .build();
+
+export default exampleApi;

app/(authenticated)/index.tsx

@@ -1,7 +1,10 @@
+import { useExampleStore } from '@utils/stores/example-store';
 import { router } from 'expo-router';
 import { Button, Text, View } from 'react-native';
 
 const AuthHomeScreen = () => {
+  const { value, increment, decrement } = useExampleStore();
+
   return (
     <View
       style={{
@@ -10,6 +13,9 @@ const AuthHomeScreen = () => {
         alignItems: 'center',
       }}>
       <Text>Authenticated Home</Text>
+      <Text>{value}</Text>
+      <Button title="Increment" onPress={() => increment()} />
+      <Button title="Decrement" onPress={() => decrement()} />
       <Button title="Logout" onPress={() => router.navigate('(guest)')} />
     </View>
   );

app/_layout.tsx

@@ -4,40 +4,33 @@
 //   environment: process.env.EXPO_PUBLIC_SENTRY_ENV,
 // });
 
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import useCustomFonts from '@utils/hooks/use-custom-fonts';
 import '@utils/i18n/config';
-import { FontSource, useFonts } from 'expo-font';
 import { Slot, SplashScreen } from 'expo-router';
-import { useEffect } from 'react';
 import '../global.css';
 
+const queryClient = new QueryClient();
+
 // Keep splash screen visible while we fetch fonts and other assets
 SplashScreen.preventAutoHideAsync();
 
 const RootLayout = () => {
-  const [loaded] = useFonts({
-    thin: require('../assets/fonts/Inter-Thin.ttf') as FontSource,
-    light: require('../assets/fonts/Inter-Light.ttf') as FontSource,
-    regular: require('../assets/fonts/Inter-Regular.ttf') as FontSource,
-    medium: require('../assets/fonts/Inter-Medium.ttf') as FontSource,
-    bold: require('../assets/fonts/Inter-Bold.ttf') as FontSource,
-    black: require('../assets/fonts/Inter-Black.ttf') as FontSource,
-    semibold: require('../assets/fonts/Inter-SemiBold.ttf') as FontSource,
-    extrabold: require('../assets/fonts/Inter-ExtraBold.ttf') as FontSource,
-    extralight: require('../assets/fonts/Inter-ExtraLight.ttf') as FontSource,
+  const [fontsLoaded, fontError] = useCustomFonts({
+    callback: async () => {
+      await SplashScreen.hideAsync();
+    },
   });
 
-  useEffect(() => {
-    if (loaded) {
-      // Hide splash when fonts are loaded
-      SplashScreen.hideAsync();
-    }
-  }, [loaded]);
-
-  if (!loaded) {
+  if (!fontsLoaded && !fontError) {
     return null;
   }
 
-  return <Slot />;
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Slot />
+    </QueryClientProvider>
+  );
 };
 
 export default RootLayout;

package.json

@@ -13,6 +13,10 @@
   },
   "dependencies": {
     "@react-native-async-storage/async-storage": "^1.23.1",
+    "@tanstack/react-query": "^5.29.2",
+    "@zodios/core": "^10.9.6",
+    "@zodios/react": "^10.4.5",
+    "axios": "^1.6.8",
     "expo": "~50.0.14",
     "expo-constants": "~15.4.5",
     "expo-font": "~11.10.3",
@@ -24,18 +28,21 @@
     "i18next": "^23.10.1",
     "intl-pluralrules": "^2.0.1",
     "nativewind": "^4.0.1",
-    "react": "18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-i18next": "^14.1.0",
     "react-native": "0.73.6",
     "react-native-reanimated": "~3.6.2",
     "react-native-safe-area-context": "4.8.2",
     "react-native-screens": "~3.29.0",
     "tailwindcss": "^3.4.3",
+    "zod": "^3.22.4",
     "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "@types/react": "^18.2.77",
+    "@types/react": "^18.2.78",
+    "@types/react-dom": "^18.2.25",
     "@types/react-native": "^0.73.0",
     "eslint": "8",
     "eslint-config-universe": "^12.0.0",

tsconfig.json

@@ -4,20 +4,11 @@
     "strict": true,
     "baseUrl": ".",
     "paths": {
-      "@components/*": [
-        "components/*"
-      ],
-      "@features/*": [
-        "features/*"
-      ],
-      "@utils/*": [
-        "utils/*"
-      ]
+      "@assets/*": ["assets/*"],
+      "@components/*": ["components/*"],
+      "@features/*": ["features/*"],
+      "@utils/*": ["utils/*"]
     }
   },
-  "include": [
-    "**/*.ts",
-    "**/*.tsx",
-    "**/*.js"
-  ]
+  "include": ["**/*.ts", "**/*.tsx", "**/*.js"]
 }

utils/hooks/use-custom-fonts.ts

@@ -0,0 +1,40 @@
+import { FontSource, loadAsync } from 'expo-font';
+import { useEffect, useState } from 'react';
+
+const fontsToLoad = {
+  thin: require('@assets/fonts/Inter-Thin.ttf'),
+  light: require('@assets/fonts/Inter-Light.ttf'),
+  regular: require('@assets/fonts/Inter-Regular.ttf'),
+  medium: require('@assets/fonts/Inter-Medium.ttf'),
+  bold: require('@assets/fonts/Inter-Bold.ttf'),
+  black: require('@assets/fonts/Inter-Black.ttf'),
+  semibold: require('@assets/fonts/Inter-SemiBold.ttf'),
+  extrabold: require('@assets/fonts/Inter-ExtraBold.ttf'),
+  extralight: require('@assets/fonts/Inter-ExtraLight.ttf'),
+} as Record<string, FontSource>;
+
+export default function useSfFonts({
+  callback,
+}: {
+  callback?: () => void;
+}): [boolean, Error | undefined] {
+  const [loaded, setLoaded] = useState(false);
+  const [error, setError] = useState<Error | undefined>();
+
+  useEffect(() => {
+    loadAsync(fontsToLoad)
+      .then(() => {
+        // Change the state.
+        setLoaded(true);
+
+        // Call the parent's callback.
+        callback?.();
+      })
+      .catch((e) => {
+        setError(e);
+        console.error('Fonts not loaded.', e);
+      });
+  }, [callback]);
+
+  return [loaded, error];
+}