Natuurlijk! Hier is een overzicht van hoe je meertalige ondersteuning in je React Native app kunt implementeren, inclusief dynamische taalwisselaar, vertaalbeheer en culturele aanpassingen voor Europa: 1. Kies een vertaalbibliotheek Gebruik bijvoorbeeld `react-i18next` in combinatie met `i18next`, die goed samenwerken met React Native en ondersteuning bieden voor dynamisch taal wisselen en vertaalbeheer. 2. Installeer benodigde pakketten ```bash npm install react-i18next i18next i18next-react-native-languages ``` 3. Configureer i18next Maak een `i18n.js` bestand aan en voeg de configuratie toe, inclusief ondersteuning voor meerdere talen en regio's: ```js import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; import * as Localization from 'react-native-localize'; // Vertalingen voor verschillende talen/regio's const resources = { en: { translation: { welcome: "Welcome", // andere vertalingen }, }, nl: { translation: { welcome: "Welkom", // andere vertalingen }, }, fr: { translation: { welcome: "Bienvenue", // andere vertalingen }, }, de: { translation: { welcome: "Willkommen", // andere vertalingen }, }, // Voeg meer talen toe indien nodig }; // Bepaal de standaardtaal op basis van apparaatinstellingen const fallbackLng = 'en'; const detectLanguage = () => { const locales = Localization.getLocales(); if (locales.length > 0) { const languageCode = locales[0].languageCode; if (Object.keys(resources).includes(languageCode)) { return languageCode; } } return fallbackLng; }; i18n .use(initReactI18next) .init({ resources, lng: detectLanguage(), fallbackLng, interpolation: { escapeValue: false, }, }); export default i18n; ``` 4. Gebruik de vertalingen in je componenten Importeer `useTranslation` en haal de vertaalde tekst op: ```jsx import React from 'react'; import { Text, View, Button } from 'react-native'; import { useTranslation } from 'react-i18next'; const MyComponent = () => { const { t, i18n } = useTranslation(); const changeLanguage = (lang) => { i18n.changeLanguage(lang); }; return ( <View> <Text>{t('welcome')}</Text> {/* Taalwisselaar */} <Button title="English" onPress={() => changeLanguage('en')} /> <Button title="Nederlands" onPress={() => changeLanguage('nl')} /> <Button title="Français" onPress={() => changeLanguage('fr')} /> <Button title="Deutsch" onPress={() => changeLanguage('de')} /> </View> ); }; export default MyComponent; ``` 5. Culturele en regionale aanpassingen Voor meer culturele correctheid kun je: - Datums, tijden en getallen formatteren met `Intl` of bibliotheken zoals `date-fns` of `moment`. - Land-specifieke inhoud of afbeeldingen toevoegen. - Regio-specifieke teksten gebruiken door extra regio- of landcodes te integreren in je vertalingen, bijvoorbeeld `en-GB`, `en-US`, `nl-NL`, etc. 6. Dynamisch taal wisselen Met `i18next` kan je eenvoudig de taal veranderen tijdens runtime, zoals in het voorbeeld met `changeLanguage()`. Eventueel kun je dit koppelen aan een gebruikersinstelling of regio detectie. 7. Overweeg regionale instellingen Gebruik `react-native-localize` om regio en taal automatisch te detecteren en aan te passen, zodat je app zich beter gedraagt naar de regio van de gebruiker. Door deze stappen te volgen, kun je je React Native app effectief meertalig maken met dynamische taalwissel, vertaalbeheer en regionale aanpassingen voor Europa.

Hier is een uitgebreide handleiding voor het implementeren van internationale ondersteuning in je React Native app: ## 1. Installatie en Basis Setup ### Vereiste packages installeren: ```bash npm install i18next react-i18next i18next-http-backend # OF gebruik yarn yarn add i18next react-i18next i18next-http-backend ``` ### Aanvullende package voor React Native: ```bash npm install react-native-localize ``` ## 2. Projectstructuur ``` src/ ├── i18n/ │ ├── index.js │ └── locales/ │ ├── en/ │ │ └── common.json │ ├── nl/ │ │ └── common.json │ ├── de/ │ │ └── common.json │ ├── fr/ │ │ └── common.json │ └── es/ │ └── common.json ``` ## 3. i18n Configuratie ### `src/i18n/index.js`: ```javascript import i18n from 'i18next'; import { initReactI18next } from 'react-i18next'; import * as RNLocalize from 'react-native-localize'; // Importeer alle vertalingen import enTranslations from './locales/en/common.json'; import nlTranslations from './locales/nl/common.json'; import deTranslations from './locales/de/common.json'; import frTranslations from './locales/fr/common.json'; import esTranslations from './locales/es/common.json'; const resources = { en: { translation: enTranslations }, nl: { translation: nlTranslations }, de: { translation: deTranslations }, fr: { translation: frTranslations }, es: { translation: esTranslations }, }; // Detecteer apparaattaal const locale = RNLocalize.getLocales()[0].languageCode; i18n .use(initReactI18next) .init({ resources, lng: locale, fallbackLng: 'en', interpolation: { escapeValue: false, }, compatibilityJSON: 'v3', }); export default i18n; ``` ## 4. Vertaalbestanden ### Voorbeeld `src/i18n/locales/nl/common.json`: ```json { "welcome": "Welkom", "settings": "Instellingen", "language": "Taal", "save": "Opslaan", "cancel": "Annuleren", "profile": "Profiel", "home": "Home", "search": "Zoeken", "notifications": "Notificaties", "logout": "Uitloggen", "login": "Inloggen", "register": "Registreren", "email": "E-mail", "password": "Wachtwoord", "forgot_password": "Wachtwoord vergeten?", "continue": "Doorgaan" } ``` ### Voorbeeld `src/i18n/locales/de/common.json`: ```json { "welcome": "Willkommen", "settings": "Einstellungen", "language": "Sprache", "save": "Speichern", "cancel": "Abbrechen" } ``` ## 5. App.js Integratie ```javascript import React from 'react'; import { I18nextProvider } from 'react-i18next'; import i18n from './src/i18n'; import AppNavigator from './src/navigation/AppNavigator'; const App = () => { return ( <I18nextProvider i18n={i18n}> <AppNavigator /> </I18nextProvider> ); }; export default App; ``` ## 6. Gebruik in Componenten ### Function Component: ```javascript import React from 'react'; import { View, Text, Button } from 'react-native'; import { useTranslation } from 'react-i18next'; const HomeScreen = () => { const { t, i18n } = useTranslation(); const changeLanguage = (lng) => { i18n.changeLanguage(lng); }; return ( <View> <Text>{t('welcome')}</Text> <Text>{t('home')}</Text> <Button title={t('settings')} onPress={() => console.log('Settings')} /> <Button title="Switch to Dutch" onPress={() => changeLanguage('nl')} /> <Button title="Switch to English" onPress={() => changeLanguage('en')} /> </View> ); }; export default HomeScreen; ``` ## 7. Dynamische Taalwisselaar Component ```javascript import React, { useState } from 'react'; import { View, Text, Modal, TouchableOpacity, FlatList } from 'react-native'; import { useTranslation } from 'react-i18next'; const LanguageSwitcher = () => { const { t, i18n } = useTranslation(); const [modalVisible, setModalVisible] = useState(false); const languages = [ { code: 'en', name: 'English', nativeName: 'English' }, { code: 'nl', name: 'Dutch', nativeName: 'Nederlands' }, { code: 'de', name: 'German', nativeName: 'Deutsch' }, { code: 'fr', name: 'French', nativeName: 'Français' }, { code: 'es', name: 'Spanish', nativeName: 'Español' }, { code: 'it', name: 'Italian', nativeName: 'Italiano' }, { code: 'pt', name: 'Portuguese', nativeName: 'Português' }, ]; const changeLanguage = (languageCode) => { i18n.changeLanguage(languageCode); setModalVisible(false); }; return ( <View> <TouchableOpacity onPress={() => setModalVisible(true)}> <Text>{t('language')}: {languages.find(lang => lang.code === i18n.language)?.nativeName}</Text> </TouchableOpacity> <Modal animationType="slide" transparent={true} visible={modalVisible} onRequestClose={() => setModalVisible(false)} > <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'rgba(0,0,0,0.5)' }}> <View style={{ backgroundColor: 'white', padding: 20, borderRadius: 10, width: '80%' }}> <Text style={{ fontSize: 18, fontWeight: 'bold', marginBottom: 15 }}>Kies een taal</Text> <FlatList data={languages} keyExtractor={(item) => item.code} renderItem={({ item }) => ( <TouchableOpacity style={{ padding: 15, borderBottomWidth: 1, borderBottomColor: '#eee', backgroundColor: i18n.language === item.code ? '#e3f2fd' : 'white' }} onPress={() => changeLanguage(item.code)} > <Text>{item.nativeName} ({item.name})</Text> </TouchableOpacity> )} /> <TouchableOpacity style={{ marginTop: 15, padding: 10, backgroundColor: '#f0f0f0', borderRadius: 5 }} onPress={() => setModalVisible(false)} > <Text style={{ textAlign: 'center' }}>{t('cancel')}</Text> </TouchableOpacity> </View> </View> </Modal> </View> ); }; export default LanguageSwitcher; ``` ## 8. Culturele Aanpassingen voor Europa ### Datum en Tijd Formattering: ```javascript import { format, formatDistance, formatRelative, isDate } from 'date-fns'; import { enUS, nl, de, fr, es, it, pt } from 'date-fns/locale'; const locales = { en: enUS, nl: nl, de: de, fr: fr, es: es, it: it, pt: pt, }; const formatDate = (date, i18n) => { const locale = locales[i18n.language] || locales.en; return format(new Date(date), 'PP', { locale }); }; ``` ### Valuta Formattering: ```javascript const formatCurrency = (amount, currency, i18n) => { const formatter = new Intl.NumberFormat(i18n.language, { style: 'currency', currency: currency, }); return formatter.format(amount); }; // Gebruik: // formatCurrency(29.99, 'EUR', i18n) // €29.99 (NL) of 29,99 € (DE) ``` ## 9. Geavanceerde Vertaalbeheer ### Namespacing voor betere organisatie: ```javascript // In je i18n config i18n .use(initReactI18next) .init({ resources: { en: { common: enCommon, auth: enAuth, profile: enProfile, }, nl: { common: nlCommon, auth: nlAuth, profile: nlProfile, }, }, defaultNS: 'common', }); // Gebruik in componenten: const { t } = useTranslation('auth'); <Text>{t('login')}</Text> ``` ### Plurals en Interpolatie: ```json { "items_count": "Je hebt {{count}} item", "items_count_plural": "Je hebt {{count}} items", "welcome_user": "Welkom, {{name}}!" } ``` ```javascript <Text>{t('items_count', { count: 1 })}</Text> // "Je hebt 1 item" <Text>{t('items_count', { count: 5 })}</Text> // "Je hebt 5 items" <Text>{t('welcome_user', { name: 'John' })}</Text> // "Welkom, John!" ``` ## 10. Aanbevolen Europese Talen Focus op deze belangrijke Europese talen: - **Engels** (en) - Je huidige taal - **Nederlands** (nl) - Nederland, België - **Duits** (de) - Duitsland, Oostenrijk, Zwitserland - **Frans** (fr) - Frankrijk, België, Zwitserland - **Spaans** (es) - Spanje - **Italiaans** (it) - Italië - **Portugees** (pt) - Portugal ## 11. Best Practices 1. **Consistente terminologie**: Gebruik dezelfde termen doorheen de app 2. **Contextuele vertalingen**: Houd rekening met context bij vertalingen 3. **Test op echte devices**: Verschillende talen kunnen layout-breaks veroorzaken 4. **Right-to-left ondersteuning**: Voorbereiden voor toekomstige RTL-talen 5. **Accessibility**: Zorg dat screen readers goed werken met taalwissels ## 12. Testing ```javascript // Test je vertalingen import { render } from '@testing-library/react-native'; import { I18nextProvider } from 'react-i18next'; import i18n from './src/i18n'; const TestWrapper = ({ children }) => ( <I18nextProvider i18n={i18n}> {children} </I18nextProvider> ); // In je tests const { getByText } = render(<YourComponent />, { wrapper: TestWrapper }); expect(getByText('Welkom')).toBeTruthy(); ``` Deze implementatie geeft je een solide basis voor internationale ondersteuning in je React Native app, specifiek gericht op de Europese markt. Begin met de belangrijkste talen en breid uit naarmate je app groeit!