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?