feat: use react query for fetching data & add navigate animation

app.json

@@ -29,7 +29,7 @@
       "output": "static",
       "favicon": "./assets/images/favicon.png"
     },
-    "plugins": ["expo-router"],
+    "plugins": ["expo-router", "expo-localization"],
     "experiments": {
       "typedRoutes": true,
       "tsconfigPaths": true
@@ -41,7 +41,8 @@
       },
       "eas": {
         "projectId": "6cf4cd2b-c02b-4f3d-bfe3-ff03fa5b2f4a"
-      }
+      },
+      "supportsRTL": true
     }
   }
 }

app/_layout.tsx

@@ -1,9 +1,10 @@
 import { useCallback, type ReactNode } from "react";
-import { Slot, SplashScreen } from "expo-router";
+import { SplashScreen, Stack } from "expo-router";
 import { SafeAreaView, StatusBar, StyleSheet, I18nManager } from "react-native";
 import { useFonts } from "expo-font";
 import * as Updates from "expo-updates";
 import { openDatabase } from "@/db/utils";
+import { QueryClient, QueryClientProvider } from "react-query";
 
 SplashScreen.preventAutoHideAsync();
 
@@ -16,11 +17,11 @@ export default function RootLayout(): ReactNode {
   });
   openDatabase();
 
-  const onLayoutRootView = useCallback(async () => {
-    I18nManager.allowRTL(true);
-    I18nManager.forceRTL(true);
-    if (!I18nManager.isRTL) Updates.reloadAsync();
+  I18nManager.allowRTL(true);
+  I18nManager.forceRTL(true);
+  if (!I18nManager.isRTL) Updates.reloadAsync();
 
+  const onLayoutRootView = useCallback(async () => {
     if (fontsLoaded || fontError) {
       SplashScreen.hideAsync();
     }
@@ -30,15 +31,25 @@ export default function RootLayout(): ReactNode {
     return null;
   }
 
+  const queryClient = new QueryClient();
+
   return (
-    <SafeAreaView
-      onLayout={() => {
-        onLayoutRootView();
-      }}
-      style={styles.container}
-    >
-      <Slot />
-    </SafeAreaView>
+    <QueryClientProvider client={queryClient}>
+      <SafeAreaView
+        onLayout={() => {
+          onLayoutRootView();
+        }}
+        style={styles.container}
+      >
+        <Stack
+          screenOptions={{
+            headerShown: false,
+            contentStyle: { padding: 0, margin: 0, backgroundColor: "white" },
+            animation: "slide_from_left",
+          }}
+        />
+      </SafeAreaView>
+    </QueryClientProvider>
   );
 }
 

components/Tabs/index.tsx

@@ -10,19 +10,17 @@ interface Props {
 const Tabs = ({ tabs, activeTab, setTab, vertical = false }: Props) => {
   return (
     <View className={`w-full h-10 `}>
-      <View
-        className={`w-full flex-1 flex-row border-b-2 border-lotion/50 justify-between `}
-      >
+      <View className={`w-full flex-1 flex-row  justify-between `}>
         {tabs.map((item, index) => (
           <Pressable
-            className={`${vertical && ` w-24 `}   cursor-pointer  w-12  `}
+            className={`${vertical && ` w-24 `}   cursor-pointer  w-20  `}
             onPress={() => setTab(item.name)}
             key={index}
           >
             <Text
-              className={`text-base text-center  ${
+              className={`text-base text-center w-full  p-2 ${
                 item.name === activeTab
-                  ? "font-HelveticaBold border-b-[3px] border-primary pb-4 text-primary"
+                  ? "font-HelveticaBold rounded-xl bg-lotion text-primary"
                   : " font-HelveticaRoman text-primary/20"
               } `}
             >

db/repos/AyatRepo.ts

@@ -0,0 +1,6 @@
+import AyahModal from "@/models/Ayah";
+import { Repository } from "expo-sqlite-orm";
+
+const AyatRepo = new Repository("quran.db", "ayat", AyahModal);
+
+export default AyatRepo;

db/repos/SurahsRepo.ts

@@ -0,0 +1,19 @@
+import SurahModal from "@/models/Surah";
+import { Repository } from "expo-sqlite-orm";
+import AyatRepo from "./AyatRepo";
+
+const SurahsRepo = new Repository("quran.db", "surahs", SurahModal);
+
+export default SurahsRepo;
+
+export const getSuraWithAyat = async (id: number) => {
+  return await SurahsRepo.find(id).then(async (value) => {
+    if (value) {
+      let ayat = await AyatRepo.query({
+        where: { sora: { equals: id } },
+        order: { aya_no: "ASC" },
+      });
+      return { ...value, ayat: ayat };
+    }
+  });
+};