Add multilanguage support
This commit is contained in:
parent
f8cbcb2908
commit
fc53bb14a0
15 changed files with 489 additions and 92 deletions
|
@ -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
|
||||
}
|
||||
} );
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue