Use the useTranslation()
hook to translate text outside of a component wrapper.
useTranslation()
hook is helpful for translating text when you can’t rely on a component wrapper.
Simply provide the string you want to translate as the first argument of the hook to translate it.
You can also provide additional options as the second argument to adjust how translations are handled (the same way you can control translations in the <TranslatedText />
component).
For example, this hook could be useful when translating one of the properties you are using in another component (like a screen title).
translation
field will fall back to the original string that was provided.context
“Track my progress” when the child string is “Track”.useTranslation()
.You probably won’t use this option as much on the useTranslation()
hook as you would on the <TranslatedText />
component.defaultLanguage
prop provided to the <TranslationProvider />
.Example: en-US
targetLanguage
prop provided to the <TranslationProvider />
(which defaults to the user’s detected locale).Example: es-ES