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

Add multilanguage support

Browse source
This commit is contained in:
Maarten 2024-08-12 16:48:41 +02:00
parent f8cbcb2908
commit fc53bb14a0
15 changed files with 489 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,6 +3,8 @@ import { Stack } from 'expo-router';
import { StyleSheet, TextInput, 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 '@/lib/components/ThemedText';
import { ThemedView } from '@/lib/components/ThemedView';
@ -17,13 +19,14 @@ import { setSession } from '@/lib/store/dataStore';
export default function OnboardStartScreen() {
const colorScheme = useColorScheme() ?? 'light';
const { setToken } = useToken();
const { t } = useTranslation();
const [ name, setName ] = React.useState( '' );
const [ zipcode, setZipcode ] = React.useState( '' );
const [ houseNumber, setHouseNumber ] = React.useState( '' );
const start = () => {
if (name === '' || zipcode === '' || houseNumber === '') {
Message.error( 'Niet alle gegevens zijn ingevuld!' );
Message.error( t( "onboarding.missing-info" ) );
return;
}
@ -47,7 +50,7 @@ export default function OnboardStartScreen() {
setToken( token );
router.replace( "/(tabs)" );
store.dispatch(setSession(response.session));
store.dispatch( setSession( response.session ) );
Message.success( response.message );
}
@ -59,32 +62,32 @@ export default function OnboardStartScreen() {
<Stack.Screen options={{ title: 'Welkom' }}/>
<ThemedView style={styles.container}>
<ThemedView style={styles.heading}>
<ThemedText type="title">Welkom bij </ThemedText>
<ThemedText type="title">{t( "onboarding.welcome" )} </ThemedText>
<ThemedText type="title" style={{ color: Colors[ colorScheme ].tint }}>Kliko</ThemedText>
</ThemedView>
<ThemedView style={styles.inputContainer}>
<ThemedText>Wat is je naam?</ThemedText>
<ThemedText>{t( "onboarding.your-name" )}</ThemedText>
<TextInput
style={styles.input}
onChangeText={setName}
placeholder={'Je naam'}
placeholder={t( "onboarding.name" )}
value={name}
/>
</ThemedView>
<ThemedView style={styles.inputContainer}>
<ThemedText>Wat is je postcode en huisnummer?</ThemedText>
<ThemedText>{t( "onboarding.your-address" )}</ThemedText>
<TextInput
style={styles.input}
onChangeText={setZipcode}
placeholder={'Postcode'}
placeholder={t( "onboarding.zipcode" )}
value={zipcode}
/>
<TextInput
style={styles.input}
onChangeText={setHouseNumber}
placeholder={'Huisnummer'}
placeholder={t( "onboarding.house-number" )}
value={houseNumber}
keyboardType="numeric"
/>
@ -92,7 +95,10 @@ export default function OnboardStartScreen() {
<TouchableOpacity style={{ ...styles.button, backgroundColor: Colors[ colorScheme ].tint }} onPress={start}>
<ThemedText style={{ color: '#fff' }}>Start</ThemedText>
<ThemedText style={{ color: Colors.white }}>
{t( "onboarding.start" )}
</ThemedText>
<Ionicons name={"arrow-forward"} size={18} style={styles.buttonIcon}/>
</TouchableOpacity>
</ThemedView>
</>
@ -129,5 +135,13 @@ const styles = StyleSheet.create( {
paddingLeft: 40,
paddingRight: 40,
marginTop: 30,
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
},
buttonIcon: {
marginLeft: 15,
paddingTop: 2,
color: Colors.white
}
} );