Add onboarding screen + token check

app/(onboarding)/start.tsx

@@ -0,0 +1,128 @@
+import {Stack} from 'expo-router';
+import {StyleSheet, TextInput, TouchableOpacity} from 'react-native';
+
+import {ThemedText} from '@/components/ThemedText';
+import {ThemedView} from '@/components/ThemedView';
+import {useToken} from '@/context/AppProvider';
+import {Colors} from '@/constants/Colors';
+import React from 'react';
+import {useColorScheme} from '@/hooks/useColorScheme';
+import {Message} from '@/services/message';
+import {Request} from '@/services/request';
+import { router } from 'expo-router';
+
+export default function OnboardStartScreen() {
+  const colorScheme = useColorScheme() ?? 'light';
+  const {setToken} = useToken();
+  const [name, setName] = React.useState('Maarten');
+  const [zipcode, setZipcode] = React.useState('6715GA');
+  const [houseNumber, setHouseNumber] = React.useState('3');
+
+  const start = () => {
+    if (name === '' || zipcode === '' || houseNumber === '') {
+      Message.error('Niet alle gegevens zijn ingevuld!');
+
+      return;
+    }
+
+    // TODO: Get device name
+    const deviceName = 'Test';
+
+    Request
+      .post('sessions/create', {
+        name: name,
+        zipcode: zipcode,
+        houseNumber: houseNumber,
+        device: deviceName,
+      })
+      .then((response) => {
+        if (!response.success) {
+          Message.error(response.message);
+        } else {
+          const token = response.token;
+
+          setToken(token);
+          router.replace("/(tabs)");
+
+          Message.success(response.message);
+        }
+      });
+  }
+
+  return (
+    <>
+      <Stack.Screen options={{title: 'Welkom'}}/>
+      <ThemedView style={styles.container}>
+        <ThemedView style={styles.heading}>
+          <ThemedText type="title">Welkom bij </ThemedText>
+          <ThemedText type="title" style={{color: Colors[colorScheme].tint}}>Kliko</ThemedText>
+        </ThemedView>
+
+        <ThemedView style={styles.inputContainer}>
+          <ThemedText>Wat is je naam?</ThemedText>
+          <TextInput
+            style={styles.input}
+            onChangeText={setName}
+            placeholder={'Je naam'}
+            value={name}
+          />
+        </ThemedView>
+
+        <ThemedView style={styles.inputContainer}>
+          <ThemedText>Wat is je postcode en huisnummer?</ThemedText>
+          <TextInput
+            style={styles.input}
+            onChangeText={setZipcode}
+            placeholder={'Postcode'}
+            value={zipcode}
+          />
+          <TextInput
+            style={styles.input}
+            onChangeText={setHouseNumber}
+            placeholder={'Huisnummer'}
+            value={houseNumber}
+            keyboardType="numeric"
+          />
+        </ThemedView>
+
+
+        <TouchableOpacity style={{...styles.button, backgroundColor: Colors[colorScheme].tint}} onPress={start}>
+          <ThemedText style={{color: '#fff'}}>Start</ThemedText>
+        </TouchableOpacity>
+      </ThemedView>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 20,
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  heading: {
+    marginBottom: 30,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  inputContainer: {
+    paddingTop: 20,
+  },
+  input: {
+    width: 250,
+    borderWidth: 1,
+    padding: 10,
+    paddingLeft: 20,
+    borderRadius: 3,
+    marginBottom: 10,
+  },
+  button: {
+    borderRadius: 5,
+    paddingTop: 10,
+    paddingBottom: 10,
+    paddingLeft: 40,
+    paddingRight: 40,
+    marginTop: 30,
+  },
+});