Allow changing language on onboarding

app/(onboarding)/start.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef, useState } from 'react';
 import { Stack } from 'expo-router';
 import { StyleSheet, TouchableOpacity } from 'react-native';
 import { router } from 'expo-router';
@@ -16,15 +16,21 @@ import { Request } from '@/src/services/request';
 import { store } from '@/src/store/store';
 import { setSession } from '@/src/store/dataStore';
 import ThemedInput from '@/src/components/themed/ThemedInput';
+import { ThemedIcon } from '@/src/components/themed/ThemedIcon';
+import List from '@/src/components/List';
+import { BottomSheet, BottomSheetRefType } from 'react-native-select-bottom-list';
 
 export default function OnboardStartScreen() {
     const colorScheme = useColorScheme() ?? 'light';
     const { setToken } = useToken();
-    const { t } = useTranslation();
+    const { t, i18n } = useTranslation();
     const [ name, setName ] = React.useState( '' );
     const [ zipcode, setZipcode ] = React.useState( '' );
     const [ houseNumber, setHouseNumber ] = React.useState( '' );
 
+    const [ language, setLanguage ] = useState( 'nl' );
+    const sheetRef = useRef<BottomSheetRefType>( null );
+
     const start = () => {
         if (name === '' || zipcode === '' || houseNumber === '') {
             Message.error( t( "onboarding.missing-info" ) );
@@ -41,6 +47,7 @@ export default function OnboardStartScreen() {
                 zipcode: zipcode,
                 houseNumber: houseNumber,
                 device: deviceName,
+                language: language,
             } )
             .then( (response) => {
                 if (!response.success) {
@@ -58,9 +65,19 @@ export default function OnboardStartScreen() {
             } );
     }
 
+    const openLanguageSelect = () => {
+        sheetRef.current?.open();
+    }
+
+    const changeLanguage = (lang: string) => {
+        sheetRef.current?.close();
+
+        i18n.changeLanguage( lang ).then( () => {
+            setLanguage( lang );
+        } );
+    }
+
     return (
-        <>
-            <Stack.Screen options={{ title: 'Welkom' }}/>
         <ThemedView style={styles.container}>
             <ThemedView style={styles.heading}>
                 <ThemedText type="title">{t( "onboarding.welcome" )} </ThemedText>
@@ -98,8 +115,40 @@ export default function OnboardStartScreen() {
                 </ThemedText>
                 <Ionicons name={"arrow-forward"} size={18} style={styles.buttonIcon}/>
             </TouchableOpacity>
+
+            <TouchableOpacity style={styles.languageSelect} onPress={openLanguageSelect}>
+                <ThemedText type="default">{t( "languages." + language )}</ThemedText>
+                <ThemedIcon name="chevron-down" size={18}/>
+            </TouchableOpacity>
+
+            <BottomSheet ref={sheetRef} presentationStyle={'overFullScreen'}>
+                <ThemedView>
+                    <List
+                        data={[
+                            {
+                                name: t( "languages.nl" ),
+                                key: "nl",
+                            },
+                            {
+                                name: t( "languages.en" ),
+                                key: "en",
+                            }
+                        ]}
+                        viewStyle={styles.languagesList}
+                        renderItem={(item: any, index: any) => (
+
+                            <TouchableOpacity style={styles.languagesListItem} key={index} onPress={() => changeLanguage( item.key )}>
+                                <ThemedText type={item.key === language ? 'defaultSemiBold' : 'default'}>{item.name}</ThemedText>
+
+                                {item.key === language &&
+                                    <ThemedIcon name="checkmark" size={18}/>
+                                }
+                            </TouchableOpacity>
+                        )}
+                    />
+                </ThemedView>
+            </BottomSheet>
         </ThemedView>
-        </>
     );
 }
 
@@ -133,5 +182,28 @@ const styles = StyleSheet.create( {
         marginLeft: 15,
         paddingTop: 2,
         color: Colors.white
+    },
+    languageSelect: {
+        marginTop: 100,
+        display: 'flex',
+        flexDirection: 'row',
+        gap: 10,
+        alignItems: 'center',
+    },
+    languagesList: {
+        display: 'flex',
+        flexDirection: 'column',
+        padding: 25,
+    },
+    languagesListItem: {
+        display: 'flex',
+        gap: 8,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingBottom: 15,
+        marginBottom: 15,
+        borderBottomWidth: 1,
+        borderBottomColor: '#f2f2f2',
     }
 } );

app/index.tsx

@@ -33,7 +33,7 @@ export default function OnboardStartScreen() {
                 i18n.changeLanguage(response.session.language);
 
                 // @ts-ignore
-                router.replace( '/(tabs)' );
+                router.replace( '/(onboarding)/start' );
             } else {
                 router.replace( '/(onboarding)/start' );
             }