title: React Native and i18n-js: Add component in translated string
body: <p>I'm using <a href="https://github.com/fnando/i18n-js" rel="nofollow noreferrer"><code>i18n-js</code></a>, as recommended by <a href="https://docs.expo.io/versions/latest/sdk/localization/" rel="nofollow noreferrer">Expo</a>. Let's say I want a screen with a <code>&lt;Text&gt;</code> that looks like:</p>
  
  <pre><code>&lt;Text&gt;Click on &lt;Text style={bold}&gt;this link&lt;/Text&gt; now.&lt;/Text&gt;
  </code></pre>
  
  <p>Here's what I would do:</p>
  
  <pre><code>const en = {
    click_link: "Click on {{link}} now.",
    link: "this link"
  };
  
  &lt;Text&gt;
    {i18n.t('click_link, {
      link: &lt;Text style={bold}&gt;{i18n.t('link')}&lt;/Text&gt;
    })}
  &lt;/Text&gt;
  </code></pre>
  
  <p>But it does'nt work, it shows <code>&lt;Text&gt;Click on [object Object] now.&lt;/Text&gt;</code></p>
  
  <p>So the only idea I have now is:</p>
  
  <pre><code>const en = {
    click_link_1: "Click on",
    click_link_2: "this link"
    click_link_3: "now."
  }
  
  &lt;Text&gt;
    {i18n.t('click_link_1')}
    &lt;Text style={bold}&gt;{i18n.t('click_link_2')}&lt;/Text&gt;
    {i18n.t('click_link_3')}
  &lt;/Text&gt;
  </code></pre>
  
  <p>But it seems not elegant at all.</p>