How do i pass in react native components in between in the element

[Manigandan-Azure]

How do i pass in react native components in between in the element? Example:- "Showing 1 - 10 of 10 results" I want the "1 - 10" and "10" to be using different font family. At the same time this values will be passed in as parameters into i18n library.

without i18n it will be like this:- `

Showing 1 - 10 of 10 results

`

How can I pass in this react native components in i18n library as parameters? Example:- {i18n.t('showingPage', {showing: <Text style={{bold font family}}>1 - 10'</Text>, total: <Text style={{bold font family}}>10</Text>) })}

Please assist. Thank you

[PikachuEXE]

This sounds more like a usage question But I will try to answer anyway

In templates (no matter React or HAML or ERB) I often separate structure with content So It would be like (using HAML as example since I don't use React)

.pagination-text
  .pagination__current-range
    = range.start - range.end
  .pagination__total-count
    = total_count

But if you are asking something more related to React I will need more details and maybe links to doc/examples since I am not a React user

[amaury1093]

If someone has any other ideas, they are welcome. I'm struggling to translate strings like

Link A and Link B are what you need.

For some languages, the "Link A" or "Link B" parts go in the middle of the end of the sentence.

[FR] Vous avez besoin de Lien A et de Lien B.

Ideal i18n-js syntax:

// en.json
"my_string": "{{linkA}} and {{linkB}} are what you need."
"link_a": "Link A"
// fr.json
"my_string": "Vous avez besoin de {{linkA}} et de {{linkB}}."
"link_a": "Lien A"

// e.g. in jsx
<p>{t('my_string', {
  linkA: <a href="...">t('link_a')</a>,
  linkB: <a href="...">t('link_a')</a>;
})}

My current solution: (jsx templating)

<p>
  {t('my_string_p1')}
  <a href="...">t('link_a')</a>
  {t('my_string_p2')}
  <a href="...">t('link_b')</a>
  {t('my_string_p3')}
</p>

// en.json
"my_string_p1": "", // yeah, empty string...
"my_string_p2": " and ", // yeah, with empty spaces at beginning and end
"my_string_p3": " are what you need."

I'd like to find a better solution than this.

[PikachuEXE]

I never use jsx so I can't study any of this (~.~)

[amaury1093]

jsx is not relevant here, the same problem problem applies to all templating languages.

How would you solve the above problem in HAML? Would you still cut my_string into 3 parts my_string_p{1,2,3}?

[PikachuEXE]

I thought {{var}} was not accepted, but it is accepted according to doc and a small test I ran:

I have never used I18n.t in template At most I add a place for translated text in template