How to render component as a param using i18n-js in react-native?

Question

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?

Lippi

Answer 1

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.

Blinders