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"];
}) {
  // if you want to live update easily when changing language, 
  // you need to force rerendering with lastRefresh because
  // react-markdown prevent re-rendering otherwise
  const lastRefresh = useI18nKeyless((state) => state.lastRefresh);
  return (
    <ReactMarkdown
      key={lastRefresh}
      remarkPlugins={[remarkGfm]}
      rehypePlugins={[rehypeRaw]}
      components={{
        strong: ({ ...props }) => <span className="text-neo-pink" {...props} />,
      }}
    >
      {skipTranslation ? children : getTranslation(children, i18nProps)}
    </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 { 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"];
}) {
  return (
    <MarkdownDisplay
      children={{getTranslation(children, i18nProps)}}
      markdownit={mdParser}
      style={{}}
      rules={{}}
    />
  );
}