Basic setup of screens. No connection with backend

app/(tabs)/_layout.tsx

@@ -12,14 +12,29 @@ export default function TabLayout() {
     <Tabs
       screenOptions={{
         tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
+        tabBarShowLabel: false,
         headerShown: false,
+        tabBarStyle: {
+          paddingTop: 20,
+          paddingBottom: 50,
+          borderTopColor: '#f2f2f2',
+        }
       }}>
       <Tabs.Screen
         name="index"
         options={{
           title: 'Home',
           tabBarIcon: ({ color, focused }) => (
-            <TabBarIcon name={focused ? 'home' : 'home-outline'} color={color} />
+            <TabBarIcon name={focused ? 'calendar' : 'calendar-outline'} color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="map"
+        options={{
+          title: 'Map',
+          tabBarIcon: ({ color, focused }) => (
+            <TabBarIcon name={focused ? 'map' : 'map-outline'} color={color} />
           ),
         }}
       />
@@ -28,7 +43,16 @@ export default function TabLayout() {
         options={{
           title: 'Explore',
           tabBarIcon: ({ color, focused }) => (
-            <TabBarIcon name={focused ? 'code-slash' : 'code-slash-outline'} color={color} />
+            <TabBarIcon name={focused ? 'trash' : 'trash-outline'} color={color} />
+          ),
+        }}
+      />
+      <Tabs.Screen
+        name="settings"
+        options={{
+          title: 'Settings',
+          tabBarIcon: ({ color, focused }) => (
+            <TabBarIcon name={focused ? 'settings' : 'settings-outline'} color={color} />
           ),
         }}
       />

app/(tabs)/explore.tsx

@@ -1,102 +1,109 @@
-import Ionicons from '@expo/vector-icons/Ionicons';
-import { StyleSheet, Image, Platform } from 'react-native';
+import {
+  StyleSheet,
+  ScrollView,
+  SafeAreaView,
+  View,
+  StatusBar,
+  Image,
+  TouchableOpacity
+} from 'react-native';
+import { AutocompleteDropdown } from 'react-native-autocomplete-dropdown';
 
-import { Collapsible } from '@/components/Collapsible';
-import { ExternalLink } from '@/components/ExternalLink';
-import ParallaxScrollView from '@/components/ParallaxScrollView';
-import { ThemedText } from '@/components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
+import {ThemedText} from '@/components/ThemedText';
+import {ThemedView} from '@/components/ThemedView';
+import {Colors} from '@/constants/Colors';
+import {useColorScheme} from '@/hooks/useColorScheme';
+import React from 'react';
+
+export default function ExploreScreen() {
+  const colorScheme = useColorScheme() ?? 'light';
 
-export default function TabTwoScreen() {
   return (
-    <ParallaxScrollView
-      headerBackgroundColor={{ light: '#D0D0D0', dark: '#353636' }}
-      headerImage={<Ionicons size={310} name="code-slash" style={styles.headerImage} />}>
-      <ThemedView style={styles.titleContainer}>
-        <ThemedText type="title">Explore</ThemedText>
-      </ThemedView>
-      <ThemedText>This app includes example code to help you get started.</ThemedText>
-      <Collapsible title="File-based routing">
-        <ThemedText>
-          This app has two screens:{' '}
-          <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> and{' '}
-          <ThemedText type="defaultSemiBold">app/(tabs)/explore.tsx</ThemedText>
-        </ThemedText>
-        <ThemedText>
-          The layout file in <ThemedText type="defaultSemiBold">app/(tabs)/_layout.tsx</ThemedText>{' '}
-          sets up the tab navigator.
-        </ThemedText>
-        <ExternalLink href="https://docs.expo.dev/router/introduction">
-          <ThemedText type="link">Learn more</ThemedText>
-        </ExternalLink>
-      </Collapsible>
-      <Collapsible title="Android, iOS, and web support">
-        <ThemedText>
-          You can open this project on Android, iOS, and the web. To open the web version, press{' '}
-          <ThemedText type="defaultSemiBold">w</ThemedText> in the terminal running this project.
-        </ThemedText>
-      </Collapsible>
-      <Collapsible title="Images">
-        <ThemedText>
-          For static images, you can use the <ThemedText type="defaultSemiBold">@2x</ThemedText> and{' '}
-          <ThemedText type="defaultSemiBold">@3x</ThemedText> suffixes to provide files for
-          different screen densities
-        </ThemedText>
-        <Image source={require('@/assets/images/react-logo.png')} style={{ alignSelf: 'center' }} />
-        <ExternalLink href="https://reactnative.dev/docs/images">
-          <ThemedText type="link">Learn more</ThemedText>
-        </ExternalLink>
-      </Collapsible>
-      <Collapsible title="Custom fonts">
-        <ThemedText>
-          Open <ThemedText type="defaultSemiBold">app/_layout.tsx</ThemedText> to see how to load{' '}
-          <ThemedText style={{ fontFamily: 'SpaceMono' }}>
-            custom fonts such as this one.
-          </ThemedText>
-        </ThemedText>
-        <ExternalLink href="https://docs.expo.dev/versions/latest/sdk/font">
-          <ThemedText type="link">Learn more</ThemedText>
-        </ExternalLink>
-      </Collapsible>
-      <Collapsible title="Light and dark mode components">
-        <ThemedText>
-          This template has light and dark mode support. The{' '}
-          <ThemedText type="defaultSemiBold">useColorScheme()</ThemedText> hook lets you inspect
-          what the user's current color scheme is, and so you can adjust UI colors accordingly.
-        </ThemedText>
-        <ExternalLink href="https://docs.expo.dev/develop/user-interface/color-themes/">
-          <ThemedText type="link">Learn more</ThemedText>
-        </ExternalLink>
-      </Collapsible>
-      <Collapsible title="Animations">
-        <ThemedText>
-          This template includes an example of an animated component. The{' '}
-          <ThemedText type="defaultSemiBold">components/HelloWave.tsx</ThemedText> component uses
-          the powerful <ThemedText type="defaultSemiBold">react-native-reanimated</ThemedText> library
-          to create a waving hand animation.
-        </ThemedText>
-        {Platform.select({
-          ios: (
-            <ThemedText>
-              The <ThemedText type="defaultSemiBold">components/ParallaxScrollView.tsx</ThemedText>{' '}
-              component provides a parallax effect for the header image.
-            </ThemedText>
-          ),
-        })}
-      </Collapsible>
-    </ParallaxScrollView>
+    <SafeAreaView style={{flex: 1, backgroundColor: Colors[colorScheme].background,}}>
+      <View style={styles.container}>
+        <ScrollView>
+          <ThemedView style={styles.titleContainer}>
+            <ThemedText type="title">Wat moet waar?</ThemedText>
+          </ThemedView>
+
+          <ThemedView style={styles.titleContainer}>
+            <ThemedText type="title" style={{color: Colors[colorScheme].tint}}>en waarom?</ThemedText>
+          </ThemedView>
+
+          <ThemedView style={styles.searchContainer}>
+            <ThemedText type="defaultSemiBold">Wat wilt u scheiden?</ThemedText>
+            <AutocompleteDropdown
+              clearOnFocus={false}
+              closeOnBlur={true}
+              closeOnSubmit={false}
+              emptyResultText={'Niks gevonden'}
+              dataSet={[
+                { id: '1', title: 'Alpha' },
+                { id: '2', title: 'Beta' },
+                { id: '3', title: 'Gamma' },
+              ]}
+            />
+          </ThemedView>
+
+          <ThemedView style={styles.categoriesContainer}>
+            <ThemedText type="defaultSemiBold">Of kies een categorie:</ThemedText>
+          </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>
+          </ThemedView>
+        </ScrollView>
+      </View>
+    </SafeAreaView>
   );
 }
 
 const styles = StyleSheet.create({
-  headerImage: {
-    color: '#808080',
-    bottom: -90,
-    left: -35,
-    position: 'absolute',
+  container: {
+    padding: 25,
+    marginTop: StatusBar.currentHeight,
   },
   titleContainer: {
     flexDirection: 'row',
+    alignItems: 'center',
     gap: 8,
+    paddingBottom: 8,
   },
+  searchContainer: {
+    marginTop: 10,
+  },
+  categoriesContainer: {
+    marginTop: 25,
+  },
+  listContainer: {
+    marginTop: 10,
+  },
+  listItem: {
+    flex: 1,
+    display: 'flex',
+    gap: 8,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingBottom: 10,
+    marginBottom: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: '#f2f2f2',
+  },
+  listImage: {
+    width: 30,
+    height: 30,
+    borderRadius: 5,
+    marginRight: 8,
+  }
 });

app/(tabs)/index.tsx

@@ -1,70 +1,127 @@
-import { Image, StyleSheet, Platform } from 'react-native';
+import {StyleSheet, Platform, ScrollView, SafeAreaView, View, StatusBar, Text} from 'react-native';
+// @ts-ignore
+import CalendarPicker from 'react-native-calendar-picker';
 
-import { HelloWave } from '@/components/HelloWave';
-import ParallaxScrollView from '@/components/ParallaxScrollView';
-import { ThemedText } from '@/components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
+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 Ionicons from '@expo/vector-icons/Ionicons';
 
 export default function HomeScreen() {
+  const colorScheme = useColorScheme() ?? 'light';
+
   return (
-    <ParallaxScrollView
-      headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
-      headerImage={
-        <Image
-          source={require('@/assets/images/partial-react-logo.png')}
-          style={styles.reactLogo}
-        />
-      }>
-      <ThemedView style={styles.titleContainer}>
-        <ThemedText type="title">Welcome!</ThemedText>
-        <HelloWave />
-      </ThemedView>
-      <ThemedView style={styles.stepContainer}>
-        <ThemedText type="subtitle">Step 1: Try it</ThemedText>
-        <ThemedText>
-          Edit <ThemedText type="defaultSemiBold">app/(tabs)/index.tsx</ThemedText> to see changes.
-          Press{' '}
-          <ThemedText type="defaultSemiBold">
-            {Platform.select({ ios: 'cmd + d', android: 'cmd + m' })}
-          </ThemedText>{' '}
-          to open developer tools.
-        </ThemedText>
-      </ThemedView>
-      <ThemedView style={styles.stepContainer}>
-        <ThemedText type="subtitle">Step 2: Explore</ThemedText>
-        <ThemedText>
-          Tap the Explore tab to learn more about what's included in this starter app.
-        </ThemedText>
-      </ThemedView>
-      <ThemedView style={styles.stepContainer}>
-        <ThemedText type="subtitle">Step 3: Get a fresh start</ThemedText>
-        <ThemedText>
-          When you're ready, run{' '}
-          <ThemedText type="defaultSemiBold">npm run reset-project</ThemedText> to get a fresh{' '}
-          <ThemedText type="defaultSemiBold">app</ThemedText> directory. This will move the current{' '}
-          <ThemedText type="defaultSemiBold">app</ThemedText> to{' '}
-          <ThemedText type="defaultSemiBold">app-example</ThemedText>.
-        </ThemedText>
-      </ThemedView>
-    </ParallaxScrollView>
+    <SafeAreaView style={{flex: 1, backgroundColor: Colors[colorScheme].background,}}>
+      <View style={styles.container}>
+        <ScrollView>
+          <ThemedView style={styles.titleContainer}>
+            <ThemedText type="title">{ getGreeting() },</ThemedText>
+          </ThemedView>
+
+          <ThemedView style={styles.titleContainer}>
+            <ThemedText type="title" style={{color: Colors[colorScheme].tint}}>Maarten</ThemedText>
+          </ThemedView>
+
+          <ThemedView style={styles.calendarContainer}>
+            <CalendarPicker
+              showDayStragglers={true}
+              enableDateChange={false}
+              previousComponent={
+                <Ionicons size={28} name="chevron-back" />
+              }
+              nextComponent={
+                <Ionicons size={28} name="chevron-forward" />
+              }
+              weekdays={["Zo", "Ma", "Di", "Woe", "Do", "Vrij", "Zat"]}
+              months={[
+                "Januari",
+                "Februari",
+                "Maart",
+                "April",
+                "Mei",
+                "Juni",
+                "Juli",
+                "Augustus",
+                "September",
+                "Oktober",
+                "November",
+                "December",
+              ]}
+            />
+          </ThemedView>
+
+          <ThemedView style={styles.legendaContainer}>
+            <View style={styles.legendaItem}>
+              <View style={{...styles.circle, backgroundColor: Colors[colorScheme].green}}/>
+              <ThemedText type="default">GFT+e</ThemedText>
+            </View>
+            <View style={styles.legendaItem}>
+              <View style={{...styles.circle, backgroundColor: Colors[colorScheme].paper}}/>
+              <ThemedText type="default">Papier</ThemedText>
+            </View>
+            <View style={styles.legendaItem}>
+              <View style={{...styles.circle, backgroundColor: Colors[colorScheme].packages}}/>
+              <ThemedText type="default">PMD</ThemedText>
+            </View>
+            <View style={styles.legendaItem}>
+              <View style={{...styles.circle, backgroundColor: Colors[colorScheme].grey}}/>
+              <ThemedText type="default">Restafval</ThemedText>
+            </View>
+          </ThemedView>
+        </ScrollView>
+      </View>
+    </SafeAreaView>
   );
 }
 
+function getGreeting() {
+  const myDate = new Date();
+  const hours = myDate.getHours();
+
+  if (hours < 12) {
+    return 'Goedemorgen';
+  } else if (hours >= 12 && hours <= 17) {
+    return 'Goedemiddag';
+  } else if (hours >= 17 && hours <= 24) {
+    return 'Goedenavond';
+  }
+
+  return 'Hallo';
+}
+
 const styles = StyleSheet.create({
+  container: {
+    padding: 25,
+    marginTop: StatusBar.currentHeight,
+  },
   titleContainer: {
     flexDirection: 'row',
     alignItems: 'center',
     gap: 8,
+    paddingBottom: 8,
   },
-  stepContainer: {
+  calendarContainer: {
+    marginTop: 15,
+  },
+  legendaContainer: {
+    marginTop: 25,
+    flex: 1,
+    flexDirection: 'row',
+    alignContent: 'center',
+    gap: 10,
+  },
+  legendaItem: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
     gap: 8,
-    marginBottom: 8,
+    flexGrow: 1,
   },
-  reactLogo: {
-    height: 178,
-    width: 290,
-    bottom: 0,
-    left: 0,
-    position: 'absolute',
+  circle: {
+    width: 25,
+    height: 25,
+    borderRadius: 50,
   },
 });

app/(tabs)/map.tsx

@@ -0,0 +1,168 @@
+import React, {useState} from 'react';
+import {
+  StyleSheet,
+  ScrollView,
+  SafeAreaView,
+  View,
+  StatusBar,
+  Image,
+  FlatList,
+  Switch
+} from 'react-native';
+
+import {ThemedText} from '@/components/ThemedText';
+import {ThemedView} from '@/components/ThemedView';
+import {Colors} from '@/constants/Colors';
+import {useColorScheme} from '@/hooks/useColorScheme';
+import MapView from '@/components/map/map';
+
+export default function MapScreen() {
+  const colorScheme = useColorScheme() ?? 'light';
+
+  const [types, setTypes] = useState([
+    {
+      image: require('@/assets/images/paper.png'),
+      name: 'Papier',
+      isEnabled: false,
+    },
+    {
+      image: require('@/assets/images/paper.png'),
+      name: 'Glas',
+      isEnabled: false,
+    },
+    {
+      image: require('@/assets/images/paper.png'),
+      name: 'Textiel',
+      isEnabled: false,
+    },
+    {
+      image: require('@/assets/images/paper.png'),
+      name: 'GFT+e',
+      isEnabled: false,
+    },
+    {
+      image: require('@/assets/images/paper.png'),
+      name: 'Luiers',
+      isEnabled: false,
+    },
+  ]);
+
+  const renderListItem = (item: any, index: any) => {
+    return (
+      <View 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)}
+        />
+      </View>
+    );
+  };
+
+  const toggleSwitch = (index: any) => {
+    const newData = types.map((item, key) =>
+     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}}>
+      <View style={styles.container}>
+        <ScrollView>
+          <ThemedView style={styles.titleContainer}>
+            <ThemedText type="title">Afvalcontainers</ThemedText>
+          </ThemedView>
+
+          <ThemedView style={styles.titleContainer}>
+            <ThemedText type="title" style={{color: Colors[colorScheme].tint}}>in de buurt</ThemedText>
+          </ThemedView>
+
+          <ThemedView style={styles.mapContainer}>
+            <MapView
+              style={styles.map}
+              initialRegion={{
+                latitude: 52.043420,
+                longitude: 5.630960,
+                latitudeDelta: 0.03,
+                longitudeDelta: 0.0421,
+              }}
+            />
+          </ThemedView>
+
+          <ThemedView style={styles.listContainer}>
+            { renderList() }
+          </ThemedView>
+        </ScrollView>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: StatusBar.currentHeight,
+    paddingTop: 25,
+  },
+  titleContainer: {
+    paddingLeft: 25,
+    paddingRight: 25,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    paddingBottom: 8,
+  },
+  mapContainer: {
+    marginTop: 15,
+  },
+  map: {
+    width: '100%',
+    height: 500,
+  },
+  listContainer: {
+    marginTop: 10,
+  },
+  listItem: {
+    flex: 1,
+    display: 'flex',
+    justifyContent: 'space-between',
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: 25,
+    paddingRight: 25,
+    paddingBottom: 10,
+    marginBottom: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: '#f2f2f2',
+  },
+  listItemTitle: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  listImage: {
+    width: 30,
+    height: 30,
+    borderRadius: 5,
+    marginRight: 8,
+  }
+});

app/(tabs)/settings.tsx

@@ -0,0 +1,36 @@
+import {StyleSheet, ScrollView, SafeAreaView, View, StatusBar} from 'react-native';
+
+import {ThemedText} from '@/components/ThemedText';
+import {ThemedView} from '@/components/ThemedView';
+import {Colors} from '@/constants/Colors';
+import {useColorScheme} from '@/hooks/useColorScheme';
+import React from 'react';
+
+export default function SettingsScreen() {
+  const colorScheme = useColorScheme() ?? 'light';
+
+  return (
+    <SafeAreaView style={{flex: 1, backgroundColor: Colors[colorScheme].background,}}>
+      <View style={styles.container}>
+        <ScrollView>
+          <ThemedView style={styles.titleContainer}>
+            <ThemedText type="title">Instellingen</ThemedText>
+          </ThemedView>
+        </ScrollView>
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 25,
+    marginTop: StatusBar.currentHeight,
+  },
+  titleContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    paddingBottom: 8,
+  },
+});