React Native
Language switching
Learn language switching and persistence.
Language switching
To switch language you call i18n.changeLanguage('tr'). useTranslation returns this as i18n. When the call fires all components re-render automatically; the new language takes over.
Example: const { t, i18n } = useTranslation(); <Button onPress={() => i18n.changeLanguage('en')} />. Here tapping the button switches to English. The language choice is usually shown in a menu: Turkish, English, German. To make it stick you write it to AsyncStorage; on launch you read it from there. This way the user sees their preferred language every time.
Making the language choice stick
To make the language choice stick you use AsyncStorage. When the user picks a language you write AsyncStorage.setItem('lang', 'tr'). On launch you read AsyncStorage.getItem('lang') and apply it with i18n.changeLanguage.
Example: useEffect(() => { AsyncStorage.getItem('lang').then(l => { if (l) i18n.changeLanguage(l); }); }, []). This loads the saved language on every launch. If no save exists the default language is used. This pattern keeps the user experience consistent; the same language shows every time.
Exercise Write a language switch button
Write a TouchableOpacity. Take i18n from useTranslation. In onPress call i18n.changeLanguage('en'). Show "English" in a Text inside.
Show example solution
import React from 'react';
import { TouchableOpacity, Text } from 'react-native';
import { useTranslation } from 'react-i18next';
function LangButton() {
const { i18n } = useTranslation();
return (
<TouchableOpacity onPress={() => i18n.changeLanguage('en')}>
<Text>English</Text>
</TouchableOpacity>
);
}
Test yourself
-
Which call switches the language?
i18n.?
- switch
- translate
- changeLanguage
- setLang
Show answer
changeLanguage — changeLanguage switches the language.
-
Match each flow piece to its role
- changeLanguage
- Switches language
- AsyncStorage
- Stores the choice
- getItem
- Reads the record
- setItem
- Writes the record
-
changeLanguage call
i18n.____('tr');
Show answer
i18n.changeLanguage('tr');
Next lesson: Summary - Internationalization
