React-native-i18n: Add ability to use React components in formatting?

[henrikra]

Motivation

Situation where you have a link inside of string that you have to translate like this:

I tried to look from the api but I could not find a function that would allow me to pass component to localisation string. It just prints for example You have to [object Object] in order to use our app.

[zoontek]

As View nested within a Text component must have a with and height and translation text width may vary, it will be safer not to try interpolating your React component in a Text.

[henrikra]

Can you provide example?

[zoontek]

<View style={{ flexDirection: 'row' }}>
  <Text>{t('text.before.break')}</Text>
  <YourTextComponent style={{ marginHorizontal: 2 }} />
  <Text>{t('text.after.break')}</Text>
</View>

Something like this

[fvicente]

I don't think @zoontek 's example is a good internationalization practice. Depending on the language, and what you're trying to internationalize, your component might change the position (component might be moved at the end or beginning, single words may become multiple words, etc.), that's why interpolation should be the right solution. Yahoo's react-intl supports this kind of 'rich text' interpolation, but apparently the owner of this project said that is not on the scope of this project.
Fortunately, someone posted a function that does what this library should by default:
https://github.com/AlexanderZaytsev/react-native-i18n/issues/38#issuecomment-312888888
Note: the function does interpolation by position, which is not that good actually, but its a start!

Edit: Added my own solution, using a component (similar to what <FormattedMessage /> does in react-intl:
https://github.com/AlexanderZaytsev/react-native-i18n/issues/38#issuecomment-362846471