Nested formatting

Author: jjoy-zz

README.md

@@ -13,6 +13,7 @@ You don't need to prepare any translation files, just provide your API key and t
 - 🎯 Dynamic parameter interpolation
 - 🔍 Persist translation tracking
 - 🔌 Offline mode support
+- 🎨 Nested text formatting support
 - ⚙️ Configurable cache TTL
 - ⚡️ Lightweight and efficient
 
@@ -49,7 +50,7 @@ const App = () => {
 
 ### 2. Use the Translation Hook
 
-Basic usage:
+**Basic usage:**
 
 ```typescript
 import { useAutoTranslate } from "react-native-autolocalise";
@@ -61,12 +62,35 @@ const MyComponent = () => {
     <div>
       <h1>{t("Welcome to our app!", false)}</h1>
       <p>{t("This text will be automatically translated")}</p>
+      <p style={{ color: "black" }}>
+        welcome
+        <p style={{ color: "read" }}> to </p>our app
+      </p>
     </div>
   );
 };
 ```
 
-Use with params:
+**Use with nested text formatting:**
+
+```typescript
+import { useAutoTranslate, FormattedText } from "react-native-autolocalise";
+
+const MyComponent = () => {
+  const { t } = useAutoTranslate();
+
+  return (
+    <FormattedText>
+      <Text>
+        Hello, we <Text style={{ color: "red" }}>want</Text> you to be{" "}
+        <Text style={{ fontWeight: "bold" }}>happy</Text>!
+      </Text>
+    </FormattedText>
+  );
+};
+```
+
+**Use with params:**
 
 ```typescript
 import { useAutoTranslate } from "react-native-autolocalise";

package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "react-native-autolocalise",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Auto-translation SDK for React Native and Expo applications",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",

src/components/FormattedText.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import { Text, TextStyle } from "react-native";
+import { useAutoTranslate } from "../context/TranslationContext";
+
+/**
+ * FormattedText is a component that handles nested text formatting during translation.
+ * It preserves styling and structure of nested Text components while allowing the content
+ * to be translated.
+ *
+ * @example
+ * ```tsx
+ * <FormattedText>
+ *   Hello, <Text style={{ color: 'red' }}>world</Text>!
+ * </FormattedText>
+ * ```
+ */
+interface FormattedTextProps {
+  children: React.ReactNode;
+  style?: TextStyle;
+}
+
+export const FormattedText: React.FC<FormattedTextProps> = ({
+  children,
+  style,
+}) => {
+  const { t } = useAutoTranslate();
+
+  /**
+   * Extracts text content and styled nodes from the children prop.
+   * Converts nested Text components into a template format (e.g., <0>styled text</0>)
+   * while preserving the original styled nodes for later restoration.
+   *
+   * @param nodes - The React nodes to process (typically the children prop)
+   * @returns An object containing the template text and an array of styled nodes
+   */
+  const extractTextAndStyles = (
+    nodes: React.ReactNode
+  ): {
+    text: string;
+    styles: Array<{ node: React.ReactElement; text: string }>;
+  } => {
+    const styles: Array<{ node: React.ReactElement; text: string }> = [];
+    let text = "";
+
+    const processNode = (node: React.ReactNode) => {
+      if (typeof node === "string") {
+        text += node;
+        return;
+      }
+
+      if (React.isValidElement(node)) {
+        const children = node.props.children;
+        if (typeof children === "string") {
+          text += `<${styles.length}>${children}</${styles.length}>`;
+          styles.push({ node, text: children });
+        } else if (Array.isArray(children)) {
+          children.forEach(processNode);
+        }
+      }
+    };
+
+    processNode(nodes);
+    return { text, styles };
+  };
+
+  /**
+   * Restores the styled nodes in the translated text by replacing template markers
+   * with the original styled components, but with translated content.
+   *
+   * @param translatedText - The translated text containing template markers
+   * @param styles - Array of original styled nodes and their text content
+   * @returns An array of React nodes with restored styling and translated content
+   */
+  const restoreStyledText = (
+    translatedText: string,
+    styles: Array<{ node: React.ReactElement; text: string }>
+  ): React.ReactNode[] => {
+    const parts = translatedText.split(/(<\d+>.*?<\/\d+>)/g);
+    return parts.map((part, index) => {
+      const match = part.match(/<(\d+)>(.*?)<\/\1>/);
+      if (match) {
+        const [, styleIndex, content] = match;
+        const { node } = styles[parseInt(styleIndex)];
+        return React.cloneElement(node, { key: `styled-${index}` }, content);
+      }
+      return part;
+    });
+  };
+
+  const { text, styles } = extractTextAndStyles(children);
+  const translatedText = t(text);
+
+  return <Text style={style}>{restoreStyledText(translatedText, styles)}</Text>;
+};

src/index.ts

@@ -13,5 +13,6 @@ const autoTranslate = {
     return service.init();
   },
 };
+export { FormattedText } from "./components/FormattedText";
 
 export default autoTranslate;