With Markdown

i18n-keyless only accepts strings, therefore if you need to style some words, you should use markdown. Translating markdown keeps the styling.

React (web)

/src/components/MyText.tsx

import { useTranslation, type TranslationOptions } from 'i18n-keyless-react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import rehypeRaw from 'rehype-raw';

export default function MyText({
  skipTranslation,
  children,
  i18nProps,
}: {
  skipTranslation?: boolean;
  i18nProps?: TranslationOptions;
  children: string;
}) {
  // useTranslation is the hook behind <I18nKeylessText>: same options, same resolution,
  // re-renders when the translation arrives or the language changes. Key react-markdown
  // by the resolved text because it prevents re-rendering otherwise.
  const translated = useTranslation(children, i18nProps);
  const text = skipTranslation ? children : translated;
  return (
    <ReactMarkdown
      key={text}
      remarkPlugins={[remarkGfm]}
      rehypePlugins={[rehypeRaw]}
      components={{
        strong: ({ ...props }) => <span className="text-neo-pink" {...props} />,
      }}
    >
      {text}
    </ReactMarkdown>
  );
}

React Native

You'll need to install the required dependency:

npm install i18n-keyless-react react-native-markdown-display

/src/components/MyText.tsx

import MarkdownDisplay, { MarkdownIt } from "react-native-markdown-display";
import { useTranslation, type TranslationOptions } from 'i18n-keyless-react';

const mdParser = MarkdownIt({ typographer: true, html: true });

export default function MarkDown({
  skipTranslation,
  children,
  i18nProps,
}: {
  skipTranslation?: boolean;
  i18nProps?: TranslationOptions;
  children: string;
}) {
  // useTranslation is the hook behind <I18nKeylessText>: same options, same resolution,
  // re-renders when the translation arrives or the language changes.
  const translated = useTranslation(children, i18nProps);
  const text = skipTranslation ? children : translated;
  return (
    <MarkdownDisplay
      children={text}
      markdownit={mdParser}
      style={{}}
      rules={{}}
    />
  );
}