I'm using i18n-js in a React Native app, also Expo and expo-localization. Although the library provides interpolation for translated strings, I did not find a way to insert React or React Native components or styles between words to provide better formatting.

For example:

// en.js
// ...
{
  "bold": "A word will be <B>bold</B> inside this string."
}
    
// create the i18n string
const B = (props) => <Text style={{fontWeight: 'bold'}}>{props.children}</Text>
console.log( I18n.t("bold") );

Expected: A word will be bold inside this string

What I got: A word will be <B>bold</B> inside this string

How can I add styles to some translated words?