108 lines
3.2 KiB
TypeScript
108 lines
3.2 KiB
TypeScript
import {
|
|
StyleSheet,
|
|
ScrollView,
|
|
SafeAreaView,
|
|
StatusBar,
|
|
Image,
|
|
TouchableOpacity
|
|
} from 'react-native';
|
|
import { AutocompleteDropdown } from 'react-native-autocomplete-dropdown';
|
|
|
|
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';
|
|
|
|
return (
|
|
<SafeAreaView style={{flex: 1, backgroundColor: Colors[colorScheme].background,}}>
|
|
<ThemedView 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>
|
|
</ThemedView>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
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,
|
|
}
|
|
});
|