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

23
app/(tabs)/explore.tsx
View file

@ -4,8 +4,7 @@ import {
SafeAreaView,
StatusBar,
Image,
TouchableOpacity,
View,
TouchableOpacity
} from 'react-native';
import React, { useState, useEffect, useRef } from 'react';
@ -13,6 +12,7 @@ import { router } from 'expo-router';
import type { AutocompleteDropdownRef } from 'react-native-autocomplete-dropdown'
import { AutocompleteDropdown } from 'react-native-autocomplete-dropdown';
import Modal from "react-native-modal";
import { useTranslation } from 'react-i18next';
import { ThemedText } from '@/lib/components/ThemedText';
import { ThemedView } from '@/lib/components/ThemedView';
@ -25,6 +25,7 @@ import { setViewCategory } from '@/lib/store/dataStore';
export default function ExploreScreen() {
const colorScheme = useColorScheme() ?? 'light';
const { t } = useTranslation();
const [ categories, setCategories ] = useState( [] );
const [ types, setTypes ] = useState( [] );
const [ activeCategory, setActiveCategory ] = useState<any | null>( null );
@ -78,29 +79,29 @@ export default function ExploreScreen() {
<ThemedView>
<ScrollView style={styles.container}>
<ThemedView style={styles.titleContainer}>
<ThemedText type="title">Wat moet waar?</ThemedText>
<ThemedText type="title">{t( "what-where" )}</ThemedText>
</ThemedView>
<ThemedView style={styles.titleContainer}>
<ThemedText type="title" style={{ color: Colors[ colorScheme ].tint }}>en waarom?</ThemedText>
<ThemedText type="title" style={{ color: Colors[ colorScheme ].tint }}>{t( "what-why" )}</ThemedText>
</ThemedView>
<ThemedView style={styles.searchContainer}>
<ThemedText type="defaultSemiBold">Wat wilt u scheiden?</ThemedText>
<ThemedText type="defaultSemiBold">{t( "what-separate" )}</ThemedText>
<AutocompleteDropdown
ref={searchRef}
controller={controller => {
dropdownController.current = controller
}}
textInputProps={{
placeholder: 'Wat wilt u scheiden?',
placeholder: t( "what-separate" ),
autoCorrect: false,
autoCapitalize: 'none',
}}
clearOnFocus={false}
closeOnBlur={false}
closeOnSubmit={false}
emptyResultText={'Niks gevonden'}
emptyResultText={t( "nothing-found" )}
onSelectItem={selectItem}
dataSet={categories}
showClear={false}
@ -108,7 +109,7 @@ export default function ExploreScreen() {
</ThemedView>
<ThemedView style={styles.categoriesContainer}>
<ThemedText type="defaultSemiBold">Of kies een categorie:</ThemedText>
<ThemedText type="defaultSemiBold">{t( "choose-category" )}:</ThemedText>
</ThemedView>
<ThemedView style={styles.listContainer}>
@ -132,7 +133,7 @@ export default function ExploreScreen() {
</ScrollView>
</ThemedView>
<Modal isVisible={activeCategory !== null} useNativeDriverForBackdrop={true}>
<Modal isVisible={activeCategory !== null} useNativeDriverForBackdrop={true}>
<ThemedView style={{ ...styles.modalView, backgroundColor: Colors[ colorScheme ].background }}>
<ThemedText type="subtitle" style={{ marginBottom: 30, textAlign: 'center' }}>{activeCategory?.name}</ThemedText>
@ -146,14 +147,14 @@ export default function ExploreScreen() {
}
<ThemedView style={{ alignItems: 'center' }}>
<ThemedText type="defaultSemiBold">Beschrijving:</ThemedText>
<ThemedText type="defaultSemiBold">{t( "description" )}:</ThemedText>
<ThemedText>{activeCategory?.description}</ThemedText>
</ThemedView>
<TouchableOpacity
onPress={() => setActiveCategory( null )}
style={{ ...styles.modalClose, backgroundColor: Colors[ colorScheme ].tint }}>
<ThemedText style={{ color: '#fff' }}>Sluiten</ThemedText>
<ThemedText style={{ color: '#fff' }}>{t( "close" )}</ThemedText>
</TouchableOpacity>
</ThemedView>
</Modal>