upd

components/home/divisionHome.tsx

@@ -1,11 +1,11 @@
 import Styles from "@/constants/Styles";
 import { apiGetDataHome } from "@/lib/api";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { Feather } from "@expo/vector-icons";
 import { router } from "expo-router";
 import React, { useEffect, useState } from "react";
-import { Dimensions, Text, View } from "react-native";
-import Carousel, { ICarouselInstance } from "react-native-reanimated-carousel";
-import PaperGridContent from "../paperGridContent";
+import { Dimensions, Pressable, Text, View } from "react-native";
+import { ICarouselInstance } from "react-native-reanimated-carousel";
 import Skeleton from "../skeleton";
 
 type Props = {
@@ -16,10 +16,11 @@ type Props = {
 
 export default function DivisionHome() {
    const { decryptToken, token } = useAuthSession()
-   const ref = React.useRef<ICarouselInstance>(null);
-   const width = Dimensions.get("window").width;
+   const ref = React.useRef<ICarouselInstance>(null)
+   const width = Dimensions.get("window").width
    const [data, setData] = useState<Props[]>([])
    const [loading, setLoading] = useState(true)
+   const arrSkeleton = Array.from({ length: 2 }, (_, index) => index)
 
    async function handleData() {
       try {
@@ -44,34 +45,47 @@ export default function DivisionHome() {
       <View style={[Styles.mb15]}>
          <Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Divisi Teraktif</Text>
          {
-            loading ? <Skeleton width={100} height={150} borderRadius={10} widthType="percent" />
+            loading ?
+               arrSkeleton.map((item, index) => (
+                  <Skeleton key={index} width={100} height={80} borderRadius={10} widthType="percent" />
+               ))
                :
                data.length > 0 ?
-                  <Carousel
-                     ref={ref}
-                     style={{ width: "100%" }}
-                     width={width * 0.8}
-                     height={235}
-                     data={data}
-                     loop={true}
-                     autoPlay={false}
-                     autoPlayReverse={false}
-                     pagingEnabled={true}
-                     snapEnabled={true}
-                     vertical={false}
-                     renderItem={({ index }) => (
-                        <PaperGridContent titleTail={1} onPress={() => { router.push(`/division/${data[index].id}`) }} content="carousel" title={data[index].name} headerColor="warning">
+                  data.map((item, index) => (
+                     <Pressable style={[Styles.wrapPaper, Styles.mb05,]} key={index} onPress={() => { router.push(`/division/${item.id}`) }}>
+                        <View style={[Styles.rowSpaceBetween, { alignItems: 'center' }]}>
                            <View>
-                              <Text style={{ fontSize: 50, textAlign: "center", fontWeight: 'bold' }}>{data[index].jumlah}</Text>
-                              <Text style={[Styles.textSubtitle, { textAlign: "center" }]}>KEGIATAN</Text>
+                              <Text style={[Styles.textDefaultSemiBold]}>{item.name}</Text>
+                              <Text style={[Styles.textDefault]}>{item.jumlah} Kegiatan</Text>
                            </View>
-                        </PaperGridContent>
-                     )}
-                  />
+                           <Feather name="chevron-right" size={20} color="black" />
+                        </View>
+                     </Pressable>
+                  ))
+                  // <Carousel
+                  //    ref={ref}
+                  //    style={{ width: "100%" }}
+                  //    width={width * 0.8}
+                  //    height={235}
+                  //    data={data}
+                  //    loop={true}
+                  //    autoPlay={false}
+                  //    autoPlayReverse={false}
+                  //    pagingEnabled={true}
+                  //    snapEnabled={true}
+                  //    vertical={false}
+                  //    renderItem={({ index }) => (
+                  //       <PaperGridContent titleTail={1} onPress={() => { router.push(`/division/${data[index].id}`) }} content="carousel" title={data[index].name} headerColor="warning">
+                  //          <View>
+                  //             <Text style={{ fontSize: 50, textAlign: "center", fontWeight: 'bold' }}>{data[index].jumlah}</Text>
+                  //             <Text style={[Styles.textSubtitle, { textAlign: "center" }]}>KEGIATAN</Text>
+                  //          </View>
+                  //       </PaperGridContent>
+                  //    )}
+                  // />
                   :
                   <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
          }
-
       </View>
    )
 }

lib/api.ts

@@ -2,8 +2,8 @@ import axios from 'axios';
 
 const api = axios.create({
    // baseURL: 'http://10.0.2.2:3000/api',
-   baseURL: 'https://stg-darmasaba.wibudev.com/api',
-   // baseURL: 'http://192.168.1.126:3000/api',
+   // baseURL: 'https://stg-darmasaba.wibudev.com/api',
+   baseURL: 'http://192.168.1.135:3000/api',
 });
 
 export const apiCheckPhoneLogin = async (body: { phone: string }) => {