Categories select + modal

app/(tabs)/explore.tsx

@@ -4,12 +4,14 @@ import {
   SafeAreaView,
   StatusBar,
   Image,
-  TouchableOpacity,
+  TouchableOpacity, View,
 } from 'react-native';
 
-import React, {useState} from 'react';
+import React, {useState, useEffect, useRef} from 'react';
 import {router} from 'expo-router';
+import type {AutocompleteDropdownRef} from 'react-native-autocomplete-dropdown'
 import {AutocompleteDropdown} from 'react-native-autocomplete-dropdown';
+import Modal from "react-native-modal";
 import AsyncStorage from '@react-native-async-storage/async-storage';
 
 import {ThemedText} from '@/components/ThemedText';
@@ -21,14 +23,46 @@ import List from '@/components/List';
 
 export default function ExploreScreen() {
   const colorScheme = useColorScheme() ?? 'light';
+  const [categories, setCategories] = useState([]);
   const [types, setTypes] = useState([]);
+  const [activeCategory, setActiveCategory] = useState<any | null>(null);
+  const searchRef = useRef(null);
+  const dropdownController = useRef<AutocompleteDropdownRef | null>(null)
 
-  // Load waste types
-  Request.get('waste-types').then((responseData) => {
-    const response = responseData.data;
+  useEffect(() => {
+    // Load categories
+    Request.get('categories').then((response) => {
+      const list: any = [];
 
-    setTypes(response);
-  });
+      response.forEach((category: any, index: any) => {
+        list.push({
+          id: index,
+          title: category.name,
+          category: category,
+        })
+      });
+
+      setCategories(list);
+    })
+
+    // Load waste types
+    Request.get('waste-types').then((response) => {
+      setTypes(response);
+    });
+  }, []);
+
+  // View selected item in modal
+  const selectItem = (item: any | null) => {
+    if (item == null) {
+      return;
+    }
+
+    // Clear select
+    dropdownController.current?.clear()
+
+    const {category} = item;
+    setActiveCategory(category);
+  }
 
   // View item in sub screen
   const viewItem = async (item: any) => {
@@ -52,15 +86,22 @@ export default function ExploreScreen() {
           <ThemedView style={styles.searchContainer}>
             <ThemedText type="defaultSemiBold">Wat wilt u scheiden?</ThemedText>
             <AutocompleteDropdown
+              ref={searchRef}
+              controller={controller => {
+                dropdownController.current = controller
+              }}
+              textInputProps={{
+                placeholder: 'Wat wilt u scheiden?',
+                autoCorrect: false,
+                autoCapitalize: 'none',
+              }}
               clearOnFocus={false}
-              closeOnBlur={true}
+              closeOnBlur={false}
               closeOnSubmit={false}
               emptyResultText={'Niks gevonden'}
-              dataSet={[
-                {id: '1', title: 'Alpha'},
-                {id: '2', title: 'Beta'},
-                {id: '3', title: 'Gamma'},
-              ]}
+              onSelectItem={selectItem}
+              dataSet={categories}
+              showClear={false}
             />
           </ThemedView>
 
@@ -81,6 +122,28 @@ export default function ExploreScreen() {
           </ThemedView>
         </ThemedView>
       </ScrollView>
+
+      <Modal isVisible={activeCategory !== null}>
+        <ThemedView style={{...styles.modalView, backgroundColor: Colors[colorScheme].background}}>
+          <ThemedText type="subtitle" style={{marginBottom: 30, textAlign: 'center'}}>{activeCategory?.name}</ThemedText>
+
+          <View style={styles.modalType}>
+            <Image source={require('@/assets/images/paper.png')} style={styles.modalTypeImage}/>
+            <ThemedText>{activeCategory?.type?.name}</ThemedText>
+          </View>
+
+          <View style={{alignItems: 'center'}}>
+            <ThemedText type="defaultSemiBold">Opmerking:</ThemedText>
+            <ThemedText>{activeCategory?.description}</ThemedText>
+          </View>
+
+          <TouchableOpacity
+            onPress={() => setActiveCategory(null)}
+            style={{...styles.modalClose, backgroundColor: Colors[colorScheme].tint}}>
+            <ThemedText style={{color: '#fff'}}>Sluiten</ThemedText>
+          </TouchableOpacity>
+        </ThemedView>
+      </Modal>
     </SafeAreaView>
   );
 }
@@ -121,5 +184,35 @@ const styles = StyleSheet.create({
     height: 30,
     borderRadius: 5,
     marginRight: 8,
-  }
+  },
+  modalView: {
+    margin: 20,
+    borderRadius: 5,
+    padding: 35,
+    alignItems: 'center',
+    textAlign: 'center',
+  },
+  modalType: {
+    flex: 1,
+    display: 'flex',
+    gap: 8,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingBottom: 10,
+    marginBottom: 30,
+  },
+  modalTypeImage: {
+    width: 40,
+    height: 40,
+    borderRadius: 5,
+    marginRight: 8,
+  },
+  modalClose: {
+    borderRadius: 5,
+    paddingTop: 10,
+    paddingBottom: 10,
+    paddingLeft: 40,
+    paddingRight: 40,
+    marginTop: 30,
+  },
 });