maartenvr98/Kliko
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Basic setup of screens. No connection with backend

Browse source
This commit is contained in:
Maarten 2024-07-31 16:38:56 +02:00
parent 8e0a267423
commit e49de778c3
17 changed files with 9977 additions and 237 deletions
Download patch file Download diff file Expand all files Collapse all files

163
app/(tabs)/index.tsx
View file

@ -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,
},
});