We are using the react-intl library for translations inside the ReactNative project. We don't use standard HTML tags like <b> or <strong> to format text. Instead we have custom components like <Text /> which are handled by the device. But similar to a web app with custom components, it appears this library cannot handle this syntax:

const messages = defineMessages({
    greeting: {
      defaultMessage: 'Hello, <bold>{name}</bold>!',
    },
  })

  return intl.formatMessage(messages.greeting, {
    name: 'Eric',
    bold: str => <b>{str}</b>,
  })

the reason being is that both bold & b tags are invalid in ReactNative. So I tried swapping components with no luck.

Can interpolation be done with this library with custom components instead?