fix: list data

Deskripsi:
- perbaikan list data pada jabatan dan group menggunakan virtualized

No Issues

app/(application)/group/index.tsx

@@ -15,7 +15,7 @@ import { setUpdateGroup } from "@/lib/groupSlice";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { AntDesign, Feather, MaterialCommunityIcons } from "@expo/vector-icons";
 import { useEffect, useState } from "react";
-import { RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
+import { RefreshControl, View, VirtualizedList } from "react-native";
 import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
@@ -116,9 +116,17 @@ export default function Index() {
    }
 
 
+   const getItem = (_data: unknown, index: number): Props => ({
+      id: data[index].id,
+      name: data[index].name,
+      isActive: data[index].isActive,
+   });
+
+
+
    return (
-      <SafeAreaView>
+      <View style={[Styles.p15, { flex: 1 }]}>
-         <View style={[Styles.p15]}>
+         <View>
             <View style={[Styles.wrapBtnTab]}>
                <ButtonTab
                   active={status == "false" ? "false" : "true"}
@@ -136,18 +144,9 @@ export default function Index() {
                   n={2} />
             </View>
             <InputSearch onChange={setSearch} />
-            <ScrollView
+         </View>
-               refreshControl={
+         <View style={{ flex: 2 }}>
-                  <RefreshControl
-                     refreshing={refreshing}
-                     onRefresh={handleRefresh}
-                  />
-               }
-               style={[Styles.h100]}
-            >
-               <View>
             {
-
                loading ?
                   arrSkeleton.map((item, index) => {
                      return (
@@ -156,7 +155,11 @@ export default function Index() {
                   })
                   :
                   data.length > 0 ?
-                           data.map((item, index) => {
+                     <VirtualizedList
+                        data={data}
+                        getItemCount={() => data.length}
+                        getItem={getItem}
+                        renderItem={({ item, index }: { item: Props, index: number }) => {
                            return (
                               <BorderBottomItem
                                  key={index}
@@ -175,13 +178,20 @@ export default function Index() {
                                  title={item.name}
                               />
                            )
-                           })
+                        }}
+                        keyExtractor={(item, index) => String(index)}
+                        showsVerticalScrollIndicator={false}
+                        refreshControl={
+                           <RefreshControl
+                              refreshing={refreshing}
+                              onRefresh={handleRefresh}
+                           />
+                        }
+                     />
                      :
                      <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
             }
          </View>
-            </ScrollView>
-         </View>
 
          <DrawerBottom animation="slide" isVisible={isModal} setVisible={() => setModal(false)} title={titleChoose}>
             <View style={Styles.rowItemsCenter}>
@@ -228,8 +238,7 @@ export default function Index() {
                </View>
             </View>
          </DrawerBottom>
+      </View >
 
-
-      </SafeAreaView>
    )
 }

app/(application)/position/index.tsx

@@ -16,7 +16,7 @@ import { useAuthSession } from "@/providers/AuthProvider";
 import { AntDesign, Feather, MaterialCommunityIcons } from "@expo/vector-icons";
 import { useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
-import { RefreshControl, SafeAreaView, ScrollView, View } from "react-native";
+import { RefreshControl, View, VirtualizedList } from "react-native";
 import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
 
@@ -129,9 +129,18 @@ export default function Index() {
       setRefreshing(false)
    };
 
+
+   const getItem = (_data: unknown, index: number): Props => ({
+      id: data[index].id,
+      name: data[index].name,
+      idGroup: data[index].idGroup,
+      group: data[index].group,
+      isActive: data[index].isActive,
+   });
+
    return (
-      <SafeAreaView>
+      <View style={[Styles.p15, { flex: 1 }]}>
-         <View style={[Styles.p15]}>
+         <View>
             <View style={[Styles.wrapBtnTab]}>
                <ButtonTab
                   active={status == "false" ? "false" : "true"}
@@ -155,15 +164,8 @@ export default function Index() {
                   <Text>Filter : {nameGroup}</Text>
                </View>
             }
-            <ScrollView
+         </View>
-               style={[Styles.h100]}
+         <View style={[{ flex: 2 }]}>
-               refreshControl={
-                  <RefreshControl
-                     refreshing={refreshing}
-                     onRefresh={handleRefresh}
-                  />
-               }>
-               <View>
             {
                loading ?
                   arrSkeleton.map((item, index) => {
@@ -173,7 +175,11 @@ export default function Index() {
                   })
                   :
                   data.length > 0 ?
-                           data.map((item, index) => {
+                     <VirtualizedList
+                        data={data}
+                        getItemCount={() => data.length}
+                        getItem={getItem}
+                        renderItem={({ item, index }: { item: Props, index: number }) => {
                            return (
                               <BorderBottomItem
                                  key={index}
@@ -188,14 +194,20 @@ export default function Index() {
                                  subtitle={item.group}
                               />
                            )
-                           })
+                        }}
+                        keyExtractor={(item, index) => String(index)}
+                        showsVerticalScrollIndicator={false}
+                        refreshControl={
+                           <RefreshControl
+                              refreshing={refreshing}
+                              onRefresh={handleRefresh}
+                           />
+                        }
+                     />
                      :
                      <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
             }
          </View>
-            </ScrollView>
-         </View>
-
          <DrawerBottom animation="slide" isVisible={isModal} setVisible={() => setModal(false)} title={chooseData.name}>
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
@@ -243,7 +255,6 @@ export default function Index() {
                </View>
             </View>
          </DrawerBottom>
-
+      </View>
-      </SafeAreaView>
    )
 }