React Native react-i18next: pass to variable <Text>

Question

I am developing a react native multilingual application. I have the following phrase: "By registering, you agree to user agreement, and privacy policy". Parts of the agreement and privacy policy I would like to make links like this:

t('By registering, you agree to user {{agreement}}, and {{privacy_policy}}', {agreement: <TouchableOpacity><Text>agreement</Text></TouchableOpacity>, privacy_policy: <TouchableOpacity><Text>privacy policy</Text></TouchableOpacity>)

But if I write like that, I get that result:

By registering, you agree to user [object Object], and [object Object]

How can this point be resolved?

Edit

I add

<Trans
    i18nKey="linkTranslate"
    components={[<TouchableOpacity onPress={() => console.log('[Press]')}><Text style={{color: 'red'}}/></TouchableOpacity>, <TouchableOpacity><Text style={{color: 'green'}}/></TouchableOpacity>, <Text/>]}
/>
...
'linkTranslate': '<2>By registering, you agree to user <0>agreement</0>, and <1>privacy policy</1></2>',

But there are two problems:

1. the color of the text does not change
2. the click does not work

Answer 1

For this type of interpolation you need to use the Trans component: https://react.i18next.com/latest/trans-component

The Trans component does ONLY interpolation. It does not rerender on language change or load any translations needed. Check useTranslation hook or withTranslation HOC for those cases.

btw: it may help to set the i18next debug flag to true and check the console log output...