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

Allow changing language on onboarding

Browse source
This commit is contained in:
Maarten 2024-08-13 10:11:56 +02:00
parent d0e26e2882
commit e29d1e0082
2 changed files with 115 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

156
app/(onboarding)/start.tsx
View file

@ -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,48 +65,90 @@ 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>
<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>
<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>
);
}
@ -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',
}
} );