Category view + detail

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,