Category view + detail

app/(tabs)/explore.tsx

@@ -4,23 +4,43 @@ import {
   SafeAreaView,
   StatusBar,
   Image,
-  TouchableOpacity
+  TouchableOpacity,
 } from 'react-native';
-import { AutocompleteDropdown } from 'react-native-autocomplete-dropdown';
+
+import React, {useState} from 'react';
+import {router} from 'expo-router';
+import {AutocompleteDropdown} from 'react-native-autocomplete-dropdown';
+import AsyncStorage from '@react-native-async-storage/async-storage';
 
 import {ThemedText} from '@/components/ThemedText';
 import {ThemedView} from '@/components/ThemedView';
 import {Colors} from '@/constants/Colors';
 import {useColorScheme} from '@/hooks/useColorScheme';
-import React from 'react';
+import {Request} from '@/services/request';
+import List from '@/components/List';
 
 export default function ExploreScreen() {
   const colorScheme = useColorScheme() ?? 'light';
+  const [types, setTypes] = useState([]);
+
+  // Load waste types
+  Request.get('waste-types').then((responseData) => {
+    const response = responseData.data;
+
+    setTypes(response);
+  });
+
+  // View item in sub screen
+  const viewItem = async (item: any) => {
+    await AsyncStorage.setItem('activeCategory', JSON.stringify(item));
+
+    router.push('/explore/category');
+  };
 
   return (
     <SafeAreaView style={{flex: 1, backgroundColor: Colors[colorScheme].background,}}>
-      <ThemedView style={styles.container}>
-        <ScrollView>
+      <ScrollView>
+        <ThemedView style={styles.container}>
           <ThemedView style={styles.titleContainer}>
             <ThemedText type="title">Wat moet waar?</ThemedText>
           </ThemedView>
@@ -37,9 +57,9 @@ export default function ExploreScreen() {
               closeOnSubmit={false}
               emptyResultText={'Niks gevonden'}
               dataSet={[
-                { id: '1', title: 'Alpha' },
-                { id: '2', title: 'Beta' },
-                { id: '3', title: 'Gamma' },
+                {id: '1', title: 'Alpha'},
+                {id: '2', title: 'Beta'},
+                {id: '3', title: 'Gamma'},
               ]}
             />
           </ThemedView>
@@ -49,21 +69,18 @@ export default function ExploreScreen() {
           </ThemedView>
 
           <ThemedView style={styles.listContainer}>
-            <TouchableOpacity style={styles.listItem}>
-              <Image source={require('@/assets/images/paper.png')} style={styles.listImage} />
-              <ThemedText type="default">Categorie 1</ThemedText>
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.listItem}>
-              <Image source={require('@/assets/images/paper.png')} style={styles.listImage} />
-              <ThemedText type="default">Categorie 2</ThemedText>
-            </TouchableOpacity>
-            <TouchableOpacity style={styles.listItem}>
-              <Image source={require('@/assets/images/paper.png')} style={styles.listImage} />
-              <ThemedText type="default">Categorie 3</ThemedText>
-            </TouchableOpacity>
+            <List
+              data={types}
+              renderItem={(item: any, index: any) => (
+                <TouchableOpacity style={styles.listItem} key={index} onPress={() => viewItem(item)}>
+                  <Image source={require('@/assets/images/paper.png')} style={styles.listImage}/>
+                  <ThemedText type="default">{item.name}</ThemedText>
+                </TouchableOpacity>
+              )}
+            />
           </ThemedView>
-        </ScrollView>
-      </ThemedView>
+        </ThemedView>
+      </ScrollView>
     </SafeAreaView>
   );
 }

app/(tabs)/map.tsx

@@ -15,6 +15,7 @@ import {ThemedView} from '@/components/ThemedView';
 import {Colors} from '@/constants/Colors';
 import {useColorScheme} from '@/hooks/useColorScheme';
 import MapView from '@/components/map/map';
+import List from '@/components/List';
 
 export default function MapScreen() {
   const colorScheme = useColorScheme() ?? 'light';
@@ -47,44 +48,14 @@ export default function MapScreen() {
     },
   ]);
 
-  const renderListItem = (item: any, index: any) => {
-    return (
-      <ThemedView style={styles.listItem} key={index}>
-        <View style={styles.listItemTitle}>
-          <Image source={item.image} style={styles.listImage}/>
-          <ThemedText type="default">{item.name}</ThemedText>
-        </View>
-
-        <Switch
-          trackColor={{false: '#767577', true: Colors.light.tint}}
-          thumbColor={'#fff'}
-          value={item.isEnabled}
-          onValueChange={() => toggleSwitch(index)}
-        />
-      </ThemedView>
-    );
-  };
-
   const toggleSwitch = (index: any) => {
     const newData = types.map((item, key) =>
-     key === index ? { ...item, isEnabled: !item.isEnabled } : item
+      key === index ? {...item, isEnabled: !item.isEnabled} : item
     );
 
     setTypes(newData);
   };
 
-  const renderList = () => {
-    let list: any[] = [];
-
-    for (let i = 0; i < types.length; i++) {
-      const type = types[i];
-
-      list[i] = renderListItem(type, i);
-    }
-
-    return list;
-  }
-
   return (
     <SafeAreaView style={{flex: 1, backgroundColor: Colors[colorScheme].background}}>
       <ThemedView style={styles.container}>
@@ -110,7 +81,23 @@ export default function MapScreen() {
           </ThemedView>
 
           <ThemedView style={styles.listContainer}>
-            { renderList() }
+            <List
+              data={types}
+              renderItem={(item: any, index: any) => (
+                <ThemedView style={styles.listItem} key={index}>
+                  <View style={styles.listItemTitle}>
+                    <Image source={item.image} style={styles.listImage}/>
+                    <ThemedText type="default">{item.name}</ThemedText>
+                  </View>
+
+                  <Switch
+                    trackColor={{false: '#767577', true: Colors.light.tint}}
+                    thumbColor={'#fff'}
+                    value={item.isEnabled}
+                    onValueChange={() => toggleSwitch(index)}
+                  />
+                </ThemedView>
+              )}/>
           </ThemedView>
         </ScrollView>
       </ThemedView>
@@ -140,6 +127,8 @@ const styles = StyleSheet.create({
   },
   listContainer: {
     marginTop: 10,
+    paddingLeft: 25,
+    paddingRight: 25,
   },
   listItem: {
     flex: 1,
@@ -147,8 +136,6 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     flexDirection: 'row',
     alignItems: 'center',
-    paddingLeft: 25,
-    paddingRight: 25,
     paddingBottom: 10,
     marginBottom: 10,
     borderBottomWidth: 1,