I am using i18n-js for locales and translations. I am trying to render a react-native component using interpolation.
Following is the code for reference,
// Translate function (exposed using custom hooks)
const translate = useCallback((key, config) => i18n.t(key, config), []);
// locale key with variables to be interpolated
"tnc_text": "Accept {{topUpTnC}} and {{dealsTnC}} to proceed"
// Code which uses translate
<Text>
{translate(
'tnc_text', {
topUpTnC: <Text
style={{color: 'blue'}}
onPress={() => Linking.openURL('https://google.com')}>
Top-Up Terms and Conditions*
</Text>,
dealsTnC: <Text
style={{color: 'blue'}}
onPress={() => Linking.openURL('https://example.com')}>
Deals Terms and Conditions
</Text>,
})}
</Text>
I am expecting something like this:
Accept Top-Up Terms and Conditions* and Deals Terms and Conditions to proceed
But instead, I am getting this:
Accept [object Object] and [object Object] to proceed
Couldn’t find anything in the documentation. Is there a way to replace variables with components in i18n-js?
I got the same question and couldn't find an answer yet ...
maybe the Trans-Component could help:
https://react.i18next.com/latest/trans-component
Edit: This is maybe a good explanation React-i18n Trans Component with translations that contain HTML tags not working
Second Edit: I could solve the Problem with following code:
// render
<Trans i18nKey="yourTranslationKey" components={{ link: <Text onPress={() => console.log('do something')}}} /> }} />
// translationFile
{...
"yourTranslationKey": "Please <link>Click me</link>",
...}
Found it on github :)
This is the official documentation about it.