168 lines
3.8 KiB
TypeScript
168 lines
3.8 KiB
TypeScript
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,
|
|
}
|
|
});
|