Kliko/app/(onboarding)/start.tsx

import React, { useRef, useState } from 'react';
import { Stack } from 'expo-router';
import { StyleSheet, TouchableOpacity } from 'react-native';
import { router } from 'expo-router';
import DeviceInfo from 'react-native-device-info';
import { useTranslation } from 'react-i18next';
import Ionicons from '@expo/vector-icons/Ionicons';

import { ThemedText } from '@/src/components/themed/ThemedText';
import { ThemedView } from '@/src/components/themed/ThemedView';
import { useToken } from '@/src/context/AppProvider';
import { Colors } from '@/src/constants/Colors';
import { useColorScheme } from '@/src/hooks/useColorScheme';
import { Message } from '@/src/services/message';
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, 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" ) );

            return;
        }

        // Get device name info
        const deviceName = DeviceInfo.getModel();

        Request
            .post( 'sessions/create', {
                name: name,
                zipcode: zipcode,
                houseNumber: houseNumber,
                device: deviceName,
                language: language,
            } )
            .then( (response) => {
                if (!response.success) {
                    Message.error( response.message );
                } else {
                    const token = response.token;

                    setToken( token );
                    router.replace( "/(tabs)" );

                    store.dispatch( setSession( response.session ) );

                    Message.success( response.message );
                }
            } );
    }

    const openLanguageSelect = () => {
        sheetRef.current?.open();
    }

    const changeLanguage = (lang: string) => {
        sheetRef.current?.close();

        i18n.changeLanguage( lang ).then( () => {
            setLanguage( lang );
        } );
    }

    return (
        <ThemedView style={styles.container}>
            <ThemedView style={styles.heading}>
                <ThemedText type="title">{t( "onboarding.welcome" )} </ThemedText>
                <ThemedText type="title" style={{ color: Colors[ colorScheme ].tint }}>Kliko</ThemedText>
            </ThemedView>

            <ThemedView style={styles.inputContainer}>
                <ThemedInput
                    label={t( "onboarding.your-name" )}
                    placeholder={t( "onboarding.name" )}
                    onChangeText={setName}
                    value={name}
                    style={{ paddingTop: 20 }}
                />

                <ThemedInput
                    label={t( "onboarding.your-address" )}
                    placeholder={t( "onboarding.zipcode" )}
                    onChangeText={setZipcode}
                    value={zipcode}
                    style={{ paddingTop: 20 }}
                />

                <ThemedInput
                    placeholder={t( "onboarding.house-number" )}
                    onChangeText={setHouseNumber}
                    value={houseNumber}
                    keyboardType="numeric"
                />
            </ThemedView>

            <TouchableOpacity style={{ ...styles.button, backgroundColor: Colors[ colorScheme ].tint }} onPress={start}>
                <ThemedText style={{ color: Colors.white }}>
                    {t( "onboarding.start" )}
                </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>
    );
}

const styles = StyleSheet.create( {
    container: {
        padding: 20,
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    heading: {
        marginBottom: 30,
        alignItems: 'center',
        justifyContent: 'center',
    },
    inputContainer: {
        width: 250,
    },
    button: {
        borderRadius: 5,
        paddingTop: 10,
        paddingBottom: 10,
        paddingLeft: 40,
        paddingRight: 40,
        marginTop: 30,
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
    },
    buttonIcon: {
        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',
    }
} );