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

app/(tabs)/_layout.tsx

@@ -8,6 +8,8 @@ import { useColorScheme } from '@/hooks/useColorScheme';
 export default function TabLayout() {
   const colorScheme = useColorScheme();
 
+  console.log('is layout rendering?');
+
   return (
     <Tabs
       screenOptions={{

app/(tabs)/explore.tsx

@@ -69,7 +69,7 @@ export default function ExploreScreen() {
   const viewItem = async (item: any) => {
     await AsyncStorage.setItem('activeCategory', JSON.stringify(item));
 
-    router.push('/explore/category');
+    router.push('/(explore)/category');
   };
 
   return (

app/(tabs)/index.tsx

@@ -1,4 +1,4 @@
-import {StyleSheet, Platform, ScrollView, SafeAreaView, View, StatusBar, Text} from 'react-native';
+import {StyleSheet, ScrollView, SafeAreaView, View, StatusBar} from 'react-native';
 // @ts-ignore
 import CalendarPicker from 'react-native-calendar-picker';
 
@@ -6,11 +6,19 @@ 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 React, {useEffect} from 'react';
 import Ionicons from '@expo/vector-icons/Ionicons';
+import {useToken} from '@/context/AppProvider';
 
 export default function HomeScreen() {
   const colorScheme = useColorScheme() ?? 'light';
+  const {token, isLoading} = useToken();
+
+  console.log('app token', token);
+
+  useEffect(() => {
+    console.log('token found', token);
+  }, [token]);
 
   return (
     <SafeAreaView style={{flex: 1, backgroundColor: Colors[colorScheme].background,}}>

app/+not-found.tsx

@@ -1,32 +0,0 @@
-import { Link, Stack } from 'expo-router';
-import { StyleSheet } from 'react-native';
-
-import { ThemedText } from '@/components/ThemedText';
-import { ThemedView } from '@/components/ThemedView';
-
-export default function NotFoundScreen() {
-  return (
-    <>
-      <Stack.Screen options={{ title: 'Oops!' }} />
-      <ThemedView style={styles.container}>
-        <ThemedText type="title">This screen doesn't exist.</ThemedText>
-        <Link href="/" style={styles.link}>
-          <ThemedText type="link">Go to home screen!</ThemedText>
-        </Link>
-      </ThemedView>
-    </>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 20,
-  },
-  link: {
-    marginTop: 15,
-    paddingVertical: 15,
-  },
-});

app/_layout.tsx

@@ -1,25 +1,28 @@
-import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
-import { useFonts } from 'expo-font';
-import { Stack } from 'expo-router';
+import {useFonts} from 'expo-font';
+import {Slot, Stack} from 'expo-router';
 import * as SplashScreen from 'expo-splash-screen';
-import { useEffect } from 'react';
+import {useEffect} from 'react';
 import 'react-native-reanimated';
 
-import { useColorScheme } from '@/hooks/useColorScheme';
+import {AppProvider} from '@/context/AppProvider';
+import {DarkTheme, DefaultTheme, ThemeProvider} from '@react-navigation/native';
+import Toast from 'react-native-toast-message';
 import {AutocompleteDropdownContextProvider} from 'react-native-autocomplete-dropdown';
+import {useColorScheme} from '@/hooks/useColorScheme';
 
 // Prevent the splash screen from auto-hiding before asset loading is complete.
-SplashScreen.preventAutoHideAsync();
+// SplashScreen.preventAutoHideAsync();
 
 export default function RootLayout() {
   const colorScheme = useColorScheme();
+
   const [loaded] = useFonts({
     SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
   });
 
   useEffect(() => {
     if (loaded) {
-      SplashScreen.hideAsync();
+      // SplashScreen.hideAsync();
     }
   }, [loaded]);
 
@@ -28,14 +31,16 @@ export default function RootLayout() {
   }
 
   return (
-    <AutocompleteDropdownContextProvider>
-      <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
-        <Stack>
-          <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-          <Stack.Screen name="+not-found" />
-        </Stack>
-      </ThemeProvider>
-    </AutocompleteDropdownContextProvider>
-
+    <AppProvider>
+      <AutocompleteDropdownContextProvider>
+        <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
+          <Stack>
+            <Stack.Screen name="(tabs)" options={{headerShown: false}}/>
+            <Stack.Screen name="(onboarding)/start" options={{headerShown: false}}/>
+          </Stack>
+          <Toast/>
+        </ThemeProvider>
+      </AutocompleteDropdownContextProvider>
+    </AppProvider>
   );
 }

app/index.tsx

@@ -0,0 +1,31 @@
+import {Redirect, Stack} from 'expo-router';
+import {StyleSheet, Text, 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, {useEffect} 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 {token, isLoading} = useToken();
+
+  // You can keep the splash screen open, or render a loading screen like we do here.
+  if (isLoading) {
+    return (
+      <ThemedView>
+        <ThemedText>Laden...</ThemedText>
+      </ThemedView>
+    );
+  }
+
+  if (!token) {
+    return <Redirect href="/(onboarding)/start"/>;
+  }
+
+  return <Redirect href="/(tabs)"/>;
+}