Basic setup of screens. No connection with backend
This commit is contained in:
Maarten
parent
8e0a267423
commit
e49de778c3
17 changed files with 9977 additions and 237 deletions
|
|
@ -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,
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue