Use the TranslatedText component to automatically translate text elements.
<TranslatedText />
component is the bread and butter of this library. It wraps simple strings and automatically translates them to the user’s detected locale at run time.
You can use this component to translate a text string by simply wrapping the string in your code.
<Text />
element in React Native.
<Text />
component in your codebase that utilizes <TranslatedText />
under the hood so that these translations happen automatically behind the scenes. You can set it up to accept a translationOptions
prop or something similar to pass down any desired translation settings.
<Text />
as normal within your app without the need to even consider translations most of the time.
context
“Track my progress” when the child string is “Track”.<TranslatedText />
.This can be useful if you’ve created a custom <Text />
component as mentioned above and don’t want to translate a specific text element.<TranslatedText />
(not top-level text).This is more of an advanced feature and is usually relevant when nesting react elements within text or when applying nested formatting.By default, we will translate all strings and other nodes within <TranslatedText />
together to maintain the context of the original message.See the disabling translation example for more information on how you can use this.enableSkeletons
to false on the <TranslationProvider />
.skeletonColor
on the <TranslationProvider />
.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