initial version (beta)

Author: bagusok

.gitignore

@@ -12,3 +12,13 @@ web-build/
 
 # macOS
 .DS_Store
+
+# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
+# The following patterns were generated by expo-cli
+
+expo-env.d.ts
+# @end expo-cli
+
+.env
+android
+android/*

app.json

@@ -19,18 +19,35 @@
       "adaptiveIcon": {
         "foregroundImage": "./assets/images/adaptive-icon.png",
         "backgroundColor": "#ffffff"
-      }
+      },
+      "package": "com.bagusok.animestream"
     },
     "web": {
       "bundler": "metro",
       "output": "static",
       "favicon": "./assets/images/favicon.png"
     },
     "plugins": [
-      "expo-router"
+      "expo-router",
+      "expo-font",
+      "expo-secure-store",
+      [
+        "expo-screen-orientation",
+        {
+          "initialOrientation": "DEFAULT"
+        }
+      ]
     ],
     "experiments": {
       "typedRoutes": true
+    },
+    "extra": {
+      "router": {
+        "origin": false
+      },
+      "eas": {
+        "projectId": "b5f26acf-eff2-492d-8062-7e3d7e82b6b7"
+      }
     }
   }
 }

app/(home)/_layout.tsx

@@ -0,0 +1,70 @@
+import { Tabs } from "expo-router";
+import React from "react";
+
+import { TabBarIcon } from "@/components/navigation/TabBarIcon";
+import { Colors } from "@/constants/Colors";
+import { useColors } from "@/hooks/useColors";
+import { AntDesign, Feather } from "@expo/vector-icons";
+
+export default function TabLayout() {
+  const colors = useColors();
+
+  return (
+    <Tabs
+      screenOptions={{
+        tabBarActiveTintColor: colors.primary,
+        headerShown: false,
+        tabBarStyle: {
+          backgroundColor: colors.background,
+          borderTopColor: colors.border,
+        },
+      }}
+    >
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: "Home",
+          tabBarIcon: ({ color, focused }) => (
+            <Feather name="home" size={24} color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="all-anime"
+        options={{
+          title: "All",
+          tabBarIcon: ({ color, focused }) => (
+            <Feather name="list" size={24} color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="schedule"
+        options={{
+          title: "Schedule",
+          tabBarIcon: ({ color, focused }) => (
+            <Feather name="calendar" size={24} color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="history"
+        options={{
+          title: "History",
+          tabBarIcon: ({ color, focused }) => (
+            <Feather name="clock" size={24} color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="user"
+        options={{
+          title: "User",
+          tabBarIcon: ({ color, focused }) => (
+            <Feather name="user" size={24} color={color} />
+          ),
+        }}
+      />
+    </Tabs>
+  );
+}

app/(home)/all-anime.tsx

@@ -0,0 +1,97 @@
+import LoadingPage from "@/components/LoadingPage";
+import SafeAreaWrapper from "@/components/SafeAreaWrapper";
+import { CustomText } from "@/components/ui";
+import CardAllAnime from "@/components/ui/card-anime/CardAllAnime";
+import { ThemeColors } from "@/constants/Colors";
+import { API_URL } from "@/constants/Strings";
+import { useColors } from "@/hooks/useColors";
+import { axiosIn } from "@/utils/axios";
+
+import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
+import { useMemo } from "react";
+import { ActivityIndicator, Pressable, StyleSheet, View } from "react-native";
+import { FlatList } from "react-native-gesture-handler";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+export default function AllAnime() {
+  const colors = useColors();
+  const style = createStyles(colors);
+
+  const allAnime = useInfiniteQuery({
+    initialPageParam: 1,
+    queryKey: ["allAnime"],
+    queryFn: async ({ pageParam }) =>
+      axiosIn
+        .get(`${API_URL}/anime?page=${pageParam}`)
+        .then((res) => res.data)
+        .catch((err) => err),
+    getNextPageParam: (lastPage) => {
+      const nextPage = lastPage.pagination.page + 1;
+      return nextPage <= lastPage.pagination.totalPage ? nextPage : null;
+    },
+  });
+
+  const flatData = useMemo(
+    () => allAnime.data?.pages.flatMap((page) => page.data) ?? [],
+    [allAnime.data]
+  );
+
+  if (allAnime.isLoading) {
+    return <LoadingPage />;
+  }
+
+  return (
+    <SafeAreaView>
+      <View style={style.header}>
+        <CustomText fontStyle="semibold" size={16}>
+          All Anime
+        </CustomText>
+      </View>
+      <View style={style.container}>
+        <FlatList
+          data={flatData}
+          keyExtractor={(item) => item.id}
+          renderItem={({ item }) => <CardAllAnime key={item.id} item={item} />}
+          ItemSeparatorComponent={() => <View style={{ height: 16 }} />}
+          onEndReached={() => {
+            if (allAnime.hasNextPage) {
+              allAnime.fetchNextPage();
+            }
+          }}
+          onEndReachedThreshold={0.5}
+          initialNumToRender={10}
+          maxToRenderPerBatch={10}
+          windowSize={10}
+          removeClippedSubviews={true}
+          ListFooterComponent={
+            allAnime.isFetchingNextPage ? (
+              <ActivityIndicator color={colors.primary} />
+            ) : null
+          }
+        />
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const createStyles = (colors: ThemeColors) =>
+  StyleSheet.create({
+    header: {
+      height: 50,
+      paddingHorizontal: 14,
+      flexDirection: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      backgroundColor: colors.background,
+    },
+    container: {
+      gap: 14,
+      paddingHorizontal: 14,
+      paddingBottom: 100,
+      backgroundColor: colors.background,
+    },
+    cardAnime: {
+      flexDirection: "row",
+      gap: 14,
+    },
+  });

app/(home)/history.tsx

@@ -0,0 +1,10 @@
+import SafeAreaWrapper from "@/components/SafeAreaWrapper";
+import { CustomText } from "@/components/ui";
+
+export default function AllAnime() {
+  return (
+    <SafeAreaWrapper>
+      <CustomText>All Anime</CustomText>
+    </SafeAreaWrapper>
+  );
+}