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 { useI18nKeyless, getTranslation, type I18nKeylessTextProps } 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?: I18nKeylessTextProps;
  children: I18nKeylessTextProps["children"];
}) {
  // getTranslation is a plain function (not reactive): subscribe to the store so this
  // component re-renders when translations arrive or the language changes, and key
  // react-markdown by the resolved text because it prevents re-rendering otherwise
  useI18nKeyless((state) => state.translations);
  const text = skipTranslation ? children : getTranslation(children, i18nProps);
  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 { useI18nKeyless, getTranslation, type I18nKeylessTextProps } from 'i18n-keyless-react';

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

export default function MarkDown({
  skipTranslation,
  children,
  i18nProps,
}: {
  skipTranslation?: boolean;
  i18nProps?: I18nKeylessTextProps;
  children: I18nKeylessTextProps["children"];
}) {
  // getTranslation is a plain function (not reactive): subscribe to the store so this
  // component re-renders when translations arrive or the language changes
  useI18nKeyless((state) => state.translations);
  const text = skipTranslation ? children : getTranslation(children, i18nProps);
  return (
    <MarkdownDisplay
      children={text}
      markdownit={mdParser}
      style={{}}
      rules={{}}
    />
  );
}