How to display text and hyperlinks using i18next in react native

user_14139788 0
Viewed 713

I have some dynamic content to translate which includes text and links in it, I wonder how do you use i18next in react native to display this content properly so the tags shows clickable in the view.

{"someContent": "Hello, please click the <a>link</a>"}

import {useTranslation} from 'react-i18next';
const {t} = useTranslation();
<Text>{t('someContent')}</Text>

The above just prints out the whole content not rendering the tags. Wondering how to render this content properly in the view! I wonder can we use something like dangerouslySetInnerHTML={{ __html: "someHtml" }}? If so, how to use in this case?

i18next react-native reactjs
1 Answers

What you need is the Trans Component (you can find the official documentation here).

In your case that means that your JSX code will look like this:

<Text>
  <Trans t={t} components={[<a href="#whatever"/>]} />
<Text>

and in your EN.js file you would write:

{
  "someContent": "Hello, please click the <0>link</0>"
}

You can put as many components in the components property as you wish and in the translation string you can then reference them by their index as I showed in my example (<0> and </0> to reference the first component).

user_129261360
Related