How to display text and hyperlinks using i18next in react native

Question

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?

vencint · Accepted Answer · 2021-01-27 18:17:02Z

2

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).

answered Jan 27, 2021 at 18:17

vencint

1231 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aymane Lassfar Over a year ago

How about custom link text ?

Collectives™ on Stack Overflow

How to display text and hyperlinks using i18next in react native

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related