Set up app providers and config

App.js

@@ -1,20 +1,84 @@
-import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import React, { useEffect, useState } from "react";
+import { NavigationContainer } from "@react-navigation/native";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import * as SplashScreen from "expo-splash-screen";
+import * as Font from "expo-font";
+
+import { StyleSheet, Text, View } from "react-native";
+
+import { useAppTheme } from "./providers/hooks.js";
+import { AxiosProvider } from "./providers/AxiosProvider";
+import { NotificationProvider } from "./providers/NotificationProvider.js";
+import { ThemeProvider } from "./providers/ThemeProvider";
+import { QueryProvider } from "./providers/QueryProvider.js";
+import { BottomNav } from "./components/BottomNav.js";
+
+async function cacheFonts(fonts) {
+  for (let i = 0; i < fonts.length; i++) {
+    const element = fonts[i];
+    await Font.loadAsync(element);
+  }
+}
+
+const Stack = createNativeStackNavigator();
+function GetRoutes() {
+  const { paperTheme } = useAppTheme();
+
+  return (
+    <NavigationContainer
+      theme={{
+        colors: { background: paperTheme.colors.background },
+      }}
+    >
+      <BottomNav />
+    </NavigationContainer>
+  );
+}
 
 export default function App() {
+  const [appIsReady, setAppIsReady] = useState(false);
+
+  useEffect(() => {
+    async function loadResourcesAndDataAsync() {
+      try {
+        await SplashScreen.preventAutoHideAsync();
+
+        await cacheFonts([
+          { MagazineLetter: require("./assets/fonts/MagazineLetter.otf") },
+        ]);
+      } catch (e) {
+        console.warn(e);
+      } finally {
+        setAppIsReady(true);
+        SplashScreen.hideAsync();
+      }
+    }
+
+    loadResourcesAndDataAsync();
+  }, []);
+
+  if (!appIsReady) {
+    return null;
+  }
+
   return (
-    <View style={styles.container}>
-      <Text>Open up App.js to start working on your app!</Text>
-      <StatusBar style="auto" />
-    </View>
+    <ThemeProvider>
+      <NotificationProvider>
+        <AxiosProvider>
+          <QueryProvider>
+            <GetRoutes />
+          </QueryProvider>
+        </AxiosProvider>
+      </NotificationProvider>
+    </ThemeProvider>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    backgroundColor: '#fff',
-    alignItems: 'center',
-    justifyContent: 'center',
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center",
   },
 });

config/config.js

@@ -0,0 +1,7 @@
+export const API_URL =
+  process.env.NODE_ENV === "development"
+    ? process.env.EXPO_PUBLIC_LOCAL_API_URL
+    : process.env.EXPO_PUBLIC_API_URL;
+
+export const API_KEY = process.env.EXPO_PUBLIC_API_KEY;
+export const FAKE_API = process.env.EXPO_PUBLIC_FAKE_API;

package.json

@@ -9,10 +9,29 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@react-navigation/bottom-tabs": "^6.5.9",
+    "@react-navigation/native": "^6.1.8",
+    "@react-navigation/native-stack": "^6.9.14",
+    "@rneui/base": "^4.0.0-rc.8",
+    "@rneui/themed": "^4.0.0-rc.8",
+    "@tanstack/react-query": "^4.35.7",
+    "axios": "^1.5.1",
     "expo": "~49.0.13",
+    "expo-device": "^5.6.0",
+    "expo-notifications": "^0.23.0",
+    "expo-secure-store": "^12.5.0",
+    "expo-splash-screen": "^0.22.0",
     "expo-status-bar": "~1.6.0",
+    "formik": "^2.4.5",
     "react": "18.2.0",
-    "react-native": "0.72.5"
+    "react-native": "0.72.5",
+    "react-native-gesture-handler": "^2.13.1",
+    "react-native-modal": "^13.0.1",
+    "react-native-notifier": "^1.9.0",
+    "react-native-paper": "^5.10.6",
+    "react-native-safe-area-context": "^4.7.2",
+    "react-native-screens": "^3.25.0",
+    "react-native-webview": "^13.6.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0"

providers/AxiosProvider.js

@@ -0,0 +1,63 @@
+import React, { createContext, useContext } from "react";
+import axios from "axios";
+
+import { NotificationContext } from "./NotificationProvider";
+import { API_URL, API_KEY, FAKE_API } from "../config/config";
+import { fakeData } from "../config/fakeData";
+
+const AxiosContext = createContext();
+const { Provider } = AxiosContext;
+
+function AxiosProvider({ children }) {
+  const { showNotification } = useContext(NotificationContext);
+
+  const publicAxios = axios.create({
+    baseURL: `${API_URL}`,
+  });
+
+  publicAxios.interceptors.request.use(
+    (config) => {
+      if (FAKE_API) {
+        throw { isLocal: true, data: fakeData };
+      } else {
+        config.headers.Accept = "application/json";
+        config.headers["x-api-key"] = API_KEY;
+      }
+      return config;
+    },
+    (error) => {
+      return error?.isLocal ? Promise.resolve(error) : Promise.reject(error);
+    }
+  );
+
+  publicAxios.interceptors.response.use(
+    (response) => {
+      return response.data;
+    },
+    (error) => {
+      if (error?.isLocal) {
+        return Promise.resolve(error.data);
+      }
+
+      showNotification({
+        title: "Request failed",
+        description:
+          error.response?.data?.message || error.message || "Please try again.",
+        type: "error",
+      });
+      return Promise.reject(error);
+    }
+  );
+
+  return (
+    <Provider
+      value={{
+        publicAxios,
+      }}
+    >
+      {children}
+    </Provider>
+  );
+}
+
+export { AxiosContext, AxiosProvider };

providers/NotificationProvider.js

@@ -0,0 +1,114 @@
+import { createContext, useEffect, useState } from "react";
+import { Platform } from "react-native";
+import * as Notifications from "expo-notifications";
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import {
+  Easing,
+  Notifier,
+  NotifierComponents,
+  NotifierWrapper,
+} from "react-native-notifier";
+import * as Device from "expo-device";
+import { LoadingIcon } from "../components/LoadingIcon";
+import {
+  getScheduledNotifications,
+  setScheduledNotifications,
+} from "../storage/securestorage";
+
+const NotificationContext = createContext(null);
+const { Provider } = NotificationContext;
+
+Notifications.setNotificationHandler({
+  handleNotification: async () => ({
+    shouldShowAlert: true,
+    shouldPlaySound: false,
+    shouldSetBadge: false,
+  }),
+});
+
+function NotificationProvider({ children }) {
+  const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    async function registerForPushNotificationsAsync() {
+      if (Platform.OS === "android") {
+        await Notifications.setNotificationChannelAsync("default", {
+          name: "default",
+          importance: Notifications.AndroidImportance.MAX,
+          vibrationPattern: [0, 250, 250, 250],
+          lightColor: "#FF231F7C",
+        });
+      }
+      if (Device.isDevice) await Notifications.getPermissionsAsync();
+      setLoading(false);
+    }
+    registerForPushNotificationsAsync();
+  }, []);
+
+  async function scheduleEventNotification(event) {
+    const scheduledNotifications = await getScheduledNotifications();
+    if (!scheduledNotifications[event.id]) {
+      const reminderDate = new Date(event.date);
+      reminderDate.setDate(reminderDate.getDate() - 1);
+      await Notifications.scheduleNotificationAsync({
+        content: {
+          title: "Event Reminder",
+          body: `Reminder: ${event.name} is due tomorrow!`,
+        },
+        trigger: { date: reminderDate },
+      });
+      scheduledNotifications[event.id] = true;
+      await setScheduledNotifications(scheduledNotifications);
+    }
+  }
+
+  async function schedulePushNotification(content, delay = 2) {
+    await Notifications.scheduleNotificationAsync({
+      content,
+      trigger: { seconds: delay },
+    });
+  }
+
+  async function pushNotification(content) {
+    await Notifications.scheduleNotificationAsync({
+      content,
+      trigger: { seconds: 0 },
+    });
+  }
+
+  function showNotification(content) {
+    Notifier.showNotification({
+      duration: 3000,
+      showAnimationDuration: 800,
+      showEasing: Easing.ease,
+      hideOnPress: true,
+      Component: content.type
+        ? NotifierComponents.Alert
+        : NotifierComponents.Notification,
+      componentProps: {
+        alertType: content.type,
+      },
+      ...content,
+    });
+  }
+
+  if (loading) return <LoadingIcon fullSize={true} />;
+
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <NotifierWrapper queueMode="reset">
+        <Provider
+          value={{
+            schedulePushNotification,
+            pushNotification,
+            showNotification,
+            scheduleEventNotification,
+          }}
+        >
+          {children}
+        </Provider>
+      </NotifierWrapper>
+    </GestureHandlerRootView>
+  );
+}
+
+export { NotificationContext, NotificationProvider };

providers/QueryProvider.js

@@ -0,0 +1,23 @@
+import React, { createContext } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const QueryContext = createContext(null);
+const { Provider } = QueryContext;
+
+const queryClient = new QueryClient();
+
+function QueryProvider({ children }) {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Provider
+        value={{
+          queryClient,
+        }}
+      >
+        {children}
+      </Provider>
+    </QueryClientProvider>
+  );
+}
+
+export { QueryContext, QueryProvider };