react-native-nitro-markdown 0.5.2 → 0.5.4

package/src/markdown.tsx

@@ -3,6 +3,7 @@ import {
   useCallback,
   useEffect,
   useMemo,
+  useRef,
   type FC,
   Fragment,
   type ReactElement,
@@ -56,10 +57,54 @@ import {
 } from "./theme";
 import type { CodeHighlighter } from "./utils/code-highlight";
 
+function hashString(str: string): number {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const char = str.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash; // Convert to 32bit int
+  }
+  return hash;
+}
+
+const ERROR_PHASE = {
+  PARSE: "parse",
+  BEFORE_PLUGIN: "before-plugin",
+  AFTER_PLUGIN: "after-plugin",
+} as const;
+
+/**
+ * Safely invoke the onError callback, preventing callback exceptions from
+ * propagating and breaking the render cycle.
+ */
+function safeOnError<P extends string>(
+  onError: ((error: Error, phase: P, pluginName?: string) => void) | undefined,
+  error: unknown,
+  phase: P,
+  pluginName?: string,
+): void {
+  try {
+    onError?.(
+      error instanceof Error ? error : new Error(String(error)),
+      phase,
+      pluginName,
+    );
+  } catch (callbackError) {
+    if (__DEV__) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        "[NitroMarkdown] onError callback threw an exception:",
+        callbackError,
+      );
+    }
+  }
+}
+
 const baseStylesCache = new WeakMap<MarkdownTheme, BaseStyles>();
 const parseAstCache = new Map<string, MarkdownNode>();
 const MAX_PARSE_CACHE_ENTRIES = 32;
 const MAX_CACHEABLE_TEXT_LENGTH = 24_000;
+const EMPTY_RENDERERS: CustomRenderers = {};
 
 export type AstTransform = (ast: MarkdownNode) => MarkdownNode;
 export type MarkdownVirtualizationOptions = Pick<
@@ -122,12 +167,14 @@ const cloneMarkdownNode = (node: MarkdownNode): MarkdownNode => {
 };
 
 const getParserOptionsKey = (options?: ParserOptions): string => {
-  if (!options) return "gfm:default|math:default";
+  if (!options) return "gfm:default|math:default|html:default";
 
   const gfm = options.gfm === undefined ? "default" : options.gfm ? "1" : "0";
   const math =
     options.math === undefined ? "default" : options.math ? "1" : "0";
-  return `gfm:${gfm}|math:${math}`;
+  const html =
+    options.html === undefined ? "default" : options.html ? "1" : "0";
+  return `gfm:${gfm}|math:${math}|html:${html}`;
 };
 
 const normalizeParserOptions = (
@@ -137,14 +184,16 @@ const normalizeParserOptions = (
 
   const gfm = options.gfm;
   const math = options.math;
+  const html = options.html;
 
-  if (gfm === undefined && math === undefined) {
+  if (gfm === undefined && math === undefined && html === undefined) {
     return undefined;
   }
 
   return {
     gfm,
     math,
+    html,
   };
 };
 
@@ -166,7 +215,7 @@ const getCachedParsedAst = (
     return parseWithNativeParser(text, options);
   }
 
-  const cacheKey = `${getParserOptionsKey(options)}|${text}`;
+  const cacheKey = `${getParserOptionsKey(options)}|${text.length}|${hashString(text)}`;
   const cachedNode = parseAstCache.get(cacheKey);
   if (cachedNode) {
     parseAstCache.delete(cacheKey);
@@ -189,13 +238,15 @@ const getCachedParsedAst = (
 const applyBeforeParsePlugins = (
   markdown: string,
   plugins?: MarkdownPlugin[],
-  onError?: (error: Error, phase: 'before-plugin', pluginName?: string) => void,
+  onError?: (error: Error, phase: "before-plugin", pluginName?: string) => void,
 ): string => {
   if (!plugins || plugins.length === 0) {
     return markdown;
   }
 
-  const sorted = [...plugins].sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+  const sorted = [...plugins].sort(
+    (a, b) => (b.priority ?? 0) - (a.priority ?? 0),
+  );
   let nextMarkdown = markdown;
   for (const plugin of sorted) {
     if (!plugin.beforeParse) continue;
@@ -211,7 +262,7 @@ const applyBeforeParsePlugins = (
         `[react-native-nitro-markdown] plugin beforeParse${pluginLabel} threw; using previous markdown.`,
         error,
       );
-      onError?.(error instanceof Error ? error : new Error(String(error)), 'before-plugin', plugin.name);
+      safeOnError(onError, error, ERROR_PHASE.BEFORE_PLUGIN, plugin.name);
     }
   }
 
@@ -221,13 +272,15 @@ const applyBeforeParsePlugins = (
 const applyAfterParsePlugins = (
   ast: MarkdownNode,
   plugins?: MarkdownPlugin[],
-  onError?: (error: Error, phase: 'after-plugin', pluginName?: string) => void,
+  onError?: (error: Error, phase: "after-plugin", pluginName?: string) => void,
 ): MarkdownNode => {
   if (!plugins || plugins.length === 0) {
     return ast;
   }
 
-  const sorted = [...plugins].sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+  const sorted = [...plugins].sort(
+    (a, b) => (b.priority ?? 0) - (a.priority ?? 0),
+  );
   let nextAst = ast;
   for (const plugin of sorted) {
     if (!plugin.afterParse) continue;
@@ -243,7 +296,7 @@ const applyAfterParsePlugins = (
         `[react-native-nitro-markdown] plugin afterParse${pluginLabel} threw; using previous AST.`,
         error,
       );
-      onError?.(error instanceof Error ? error : new Error(String(error)), 'after-plugin', plugin.name);
+      safeOnError(onError, error, ERROR_PHASE.AFTER_PLUGIN, plugin.name);
     }
   }
 
@@ -256,7 +309,7 @@ export type MarkdownProps = {
    */
   children: string;
   /**
-   * Parser options to enable GFM or Math support.
+   * Parser options to enable GFM, math, or raw HTML AST support.
    */
   options?: ParserOptions;
   /**
@@ -274,7 +327,12 @@ export type MarkdownProps = {
    */
   astTransform?: AstTransform;
   /**
-   * Callback fired when parsing begins.
+   * Callback fired after the current parse cycle completes and the component
+   * has re-rendered with new content. Because the native parser runs
+   * synchronously inside `useMemo`, there is no observable "in-progress"
+   * window — this callback fires in the `useEffect` commit phase, after the
+   * new AST is already rendered. Use `onParseComplete` for post-parse
+   * inspection of results.
    */
   onParsingInProgress?: () => void;
   /**
@@ -291,7 +349,11 @@ export type MarkdownProps = {
    * @param phase - Where the error occurred.
    * @param pluginName - The plugin name, if applicable.
    */
-  onError?: (error: Error, phase: 'parse' | 'before-plugin' | 'after-plugin', pluginName?: string) => void;
+  onError?: (
+    error: Error,
+    phase: "parse" | "before-plugin" | "after-plugin",
+    pluginName?: string,
+  ) => void;
   /**
    * Custom renderers for specific markdown node types.
    * Each renderer receives { node, children, Renderer } plus type-specific props.
@@ -364,7 +426,7 @@ export const Markdown: FC<MarkdownProps> = ({
   plugins,
   sourceAst,
   astTransform,
-  renderers = {},
+  renderers = EMPTY_RENDERERS,
   theme: userTheme,
   styles: nodeStyles,
   stylingStrategy = "opinionated",
@@ -381,18 +443,32 @@ export const Markdown: FC<MarkdownProps> = ({
 }) => {
   const parserOptionGfm = options?.gfm;
   const parserOptionMath = options?.math;
+  const parserOptionHtml = options?.html;
+
+  /* eslint-disable react-hooks/refs -- Refs updated/read intentionally to avoid re-parsing on callback identity changes */
+  const onErrorRef = useRef(onError);
+  onErrorRef.current = onError;
 
   const parseResult = useMemo(() => {
     try {
-      const markdownToParse = applyBeforeParsePlugins(children, plugins, onError ? (e, phase, name) => onError(e, phase, name) : undefined);
+      const markdownToParse = applyBeforeParsePlugins(
+        children,
+        plugins,
+        onErrorRef.current,
+      );
       const parserOptions = normalizeParserOptions({
         gfm: parserOptionGfm,
         math: parserOptionMath,
+        html: parserOptionHtml,
       });
       let parsedAst = sourceAst
         ? cloneMarkdownNode(sourceAst)
         : getCachedParsedAst(markdownToParse, parserOptions);
-      parsedAst = applyAfterParsePlugins(parsedAst, plugins, onError ? (e, phase, name) => onError(e, phase, name) : undefined);
+      parsedAst = applyAfterParsePlugins(
+        parsedAst,
+        plugins,
+        onErrorRef.current,
+      );
 
       let ast = parsedAst;
       if (astTransform) {
@@ -414,7 +490,7 @@ export const Markdown: FC<MarkdownProps> = ({
         ast,
       };
     } catch (parseError) {
-      onError?.(parseError instanceof Error ? parseError : new Error(String(parseError)), 'parse');
+      safeOnError(onErrorRef.current, parseError, ERROR_PHASE.PARSE);
       return {
         ast: null,
       };
@@ -423,11 +499,12 @@ export const Markdown: FC<MarkdownProps> = ({
     children,
     parserOptionGfm,
     parserOptionMath,
-    plugins,
+    parserOptionHtml,
     sourceAst,
     astTransform,
-    onError,
+    plugins,
   ]);
+  /* eslint-enable react-hooks/refs */
 
   useEffect(() => {
     onParsingInProgress?.();
@@ -435,7 +512,7 @@ export const Markdown: FC<MarkdownProps> = ({
     children,
     parserOptionGfm,
     parserOptionMath,
-    plugins,
+    parserOptionHtml,
     onParsingInProgress,
   ]);
 
@@ -468,7 +545,15 @@ export const Markdown: FC<MarkdownProps> = ({
       tableOptions,
       highlightCode,
     }),
-    [renderers, theme, nodeStyles, stylingStrategy, onLinkPress, tableOptions, highlightCode],
+    [
+      renderers,
+      theme,
+      nodeStyles,
+      stylingStrategy,
+      onLinkPress,
+      tableOptions,
+      highlightCode,
+    ],
   );
 
   const topLevelBlocks =
@@ -887,13 +972,13 @@ const getBaseStyles = (theme: MarkdownTheme): BaseStyles => {
 const createBaseStyles = (theme: MarkdownTheme) =>
   StyleSheet.create({
     container: {
-      flex: 1,
+      flexShrink: 1,
     },
     virtualizedList: {
       flex: 1,
     },
     document: {
-      flex: 1,
+      flexShrink: 1,
     },
     errorText: {
       color: "#f87171",

package/src/renderers/blockquote.tsx

@@ -1,6 +1,8 @@
-import { useMemo, type FC, type ReactNode } from "react";
+import type { FC, ReactNode } from "react";
 import { View, StyleSheet, type ViewStyle } from "react-native";
+import { getCachedStyles } from "./style-cache";
 import { useMarkdownContext } from "../MarkdownContext";
+import type { MarkdownTheme } from "../theme";
 
 type BlockquoteProps = {
   children: ReactNode;
@@ -9,22 +11,25 @@ type BlockquoteProps = {
 
 export const Blockquote: FC<BlockquoteProps> = ({ children, style }) => {
   const { theme } = useMarkdownContext();
-  const styles = useMemo(
-    () =>
-      StyleSheet.create({
-        blockquote: {
-          borderLeftWidth: 4,
-          borderLeftColor: theme.colors.blockquote,
-          paddingLeft: theme.spacing.l,
-          marginVertical: theme.spacing.m,
-          backgroundColor: theme.colors.surfaceLight,
-          paddingVertical: theme.spacing.m,
-          paddingRight: theme.spacing.m,
-          borderRadius: theme.borderRadius.s,
-        },
-      }),
-    [theme],
-  );
+  const styles = getCachedStyles(stylesCache, theme, createStyles);
 
   return <View style={[styles.blockquote, style]}>{children}</View>;
 };
+
+type BlockquoteStyles = ReturnType<typeof createStyles>;
+
+const stylesCache = new WeakMap<MarkdownTheme, BlockquoteStyles>();
+
+const createStyles = (theme: MarkdownTheme) =>
+  StyleSheet.create({
+    blockquote: {
+      borderLeftWidth: 4,
+      borderLeftColor: theme.colors.blockquote,
+      paddingLeft: theme.spacing.l,
+      marginVertical: theme.spacing.m,
+      backgroundColor: theme.colors.surfaceLight,
+      paddingVertical: theme.spacing.m,
+      paddingRight: theme.spacing.m,
+      borderRadius: theme.borderRadius.s,
+    },
+  });

package/src/renderers/code.tsx

@@ -8,10 +8,15 @@ import {
   type ViewStyle,
   type TextStyle,
 } from "react-native";
+import { getCachedStyles } from "./style-cache";
 import { getTextContent } from "../headless";
 import { useMarkdownContext } from "../MarkdownContext";
+import {
+  defaultHighlighter,
+  type HighlightedToken,
+} from "../utils/code-highlight";
 import type { MarkdownNode } from "../headless";
-import { defaultHighlighter, type HighlightedToken } from "../utils/code-highlight";
+import type { MarkdownTheme } from "../theme";
 
 type CodeBlockProps = {
   language?: string;
@@ -29,48 +34,22 @@ export const CodeBlock: FC<CodeBlockProps> = ({
   const ctx = useMarkdownContext();
   const { theme } = ctx;
 
-  const highlighter = ctx.highlightCode === true
-    ? defaultHighlighter
-    : typeof ctx.highlightCode === 'function'
-      ? ctx.highlightCode
-      : null;
+  const highlighter =
+    ctx.highlightCode === true
+      ? defaultHighlighter
+      : typeof ctx.highlightCode === "function"
+        ? ctx.highlightCode
+        : null;
 
   const displayContent = content ?? (node ? getTextContent(node) : "");
-
-  const styles = useMemo(
+  const highlightedTokens = useMemo(
     () =>
-      StyleSheet.create({
-        codeBlock: {
-          backgroundColor: theme.colors.codeBackground,
-          borderRadius: theme.borderRadius.m,
-          padding: theme.spacing.l,
-          marginVertical: theme.spacing.m,
-          borderWidth: 1,
-          borderColor: theme.colors.border,
-        },
-        codeLanguage: {
-          color: theme.colors.codeLanguage,
-          fontSize: theme.fontSizes.xs,
-          fontWeight: "600",
-          marginBottom: theme.spacing.s,
-          textTransform: "uppercase",
-          letterSpacing: 0.5,
-          fontFamily: theme.fontFamilies.mono,
-          ...(Platform.OS === "android" && { includeFontPadding: false }),
-        },
-        codeBlockText: {
-          fontFamily:
-            theme.fontFamilies.mono ??
-            Platform.select({ ios: "Courier", android: "monospace" }),
-          fontSize: theme.fontSizes.s,
-          color: theme.colors.text,
-          lineHeight: theme.fontSizes.s * 1.5,
-          ...(Platform.OS === "android" && { includeFontPadding: false }),
-        },
-      }),
-    [theme],
+      highlighter && language ? highlighter(language, displayContent) : null,
+    [displayContent, highlighter, language],
   );
 
+  const styles = getCachedStyles(codeBlockStylesCache, theme, createCodeStyles);
+
   const showLanguage = theme.showCodeLanguage && language;
 
   return (
@@ -83,9 +62,9 @@ export const CodeBlock: FC<CodeBlockProps> = ({
         showsHorizontalScrollIndicator={false}
         bounces={false}
       >
-        {highlighter && language ? (
+        {highlightedTokens ? (
           <Text style={styles.codeBlockText} selectable>
-            {highlighter(language, displayContent).map((token: HighlightedToken, i: number) => {
+            {highlightedTokens.map((token: HighlightedToken, i: number) => {
               const tokenColor = ctx.theme.colors.codeTokenColors?.[token.type];
               return tokenColor ? (
                 <Text key={i} style={{ color: tokenColor }}>
@@ -124,23 +103,63 @@ export const InlineCode: FC<InlineCodeProps> = ({
   const displayContent =
     content ?? children ?? (node ? getTextContent(node) : "");
 
-  const styles = useMemo(
-    () =>
-      StyleSheet.create({
-        codeInline: {
-          fontFamily:
-            theme.fontFamilies.mono ??
-            Platform.select({ ios: "Courier", android: "monospace" }),
-          fontSize: theme.fontSizes.s,
-          color: theme.colors.code,
-          backgroundColor: theme.colors.codeBackground,
-          paddingHorizontal: theme.spacing.xs,
-          paddingVertical: 2,
-          borderRadius: theme.borderRadius.s,
-          ...(Platform.OS === "android" && { includeFontPadding: false }),
-        },
-      }),
-    [theme],
+  const styles = getCachedStyles(
+    inlineCodeStylesCache,
+    theme,
+    createInlineStyles,
   );
   return <Text style={[styles.codeInline, style]}>{displayContent}</Text>;
 };
+
+type CodeBlockStyles = ReturnType<typeof createCodeStyles>;
+type InlineCodeStyles = ReturnType<typeof createInlineStyles>;
+
+const codeBlockStylesCache = new WeakMap<MarkdownTheme, CodeBlockStyles>();
+const inlineCodeStylesCache = new WeakMap<MarkdownTheme, InlineCodeStyles>();
+
+const getMonoFontFamily = (theme: MarkdownTheme) =>
+  theme.fontFamilies.mono ??
+  Platform.select({ ios: "Courier", android: "monospace" });
+
+const createCodeStyles = (theme: MarkdownTheme) =>
+  StyleSheet.create({
+    codeBlock: {
+      backgroundColor: theme.colors.codeBackground,
+      borderRadius: theme.borderRadius.m,
+      padding: theme.spacing.l,
+      marginVertical: theme.spacing.m,
+      borderWidth: 1,
+      borderColor: theme.colors.border,
+    },
+    codeLanguage: {
+      color: theme.colors.codeLanguage,
+      fontSize: theme.fontSizes.xs,
+      fontWeight: "600",
+      marginBottom: theme.spacing.s,
+      textTransform: "uppercase",
+      letterSpacing: 0.5,
+      fontFamily: theme.fontFamilies.mono,
+      ...(Platform.OS === "android" && { includeFontPadding: false }),
+    },
+    codeBlockText: {
+      fontFamily: getMonoFontFamily(theme),
+      fontSize: theme.fontSizes.s,
+      color: theme.colors.text,
+      lineHeight: theme.fontSizes.s * 1.5,
+      ...(Platform.OS === "android" && { includeFontPadding: false }),
+    },
+  });
+
+const createInlineStyles = (theme: MarkdownTheme) =>
+  StyleSheet.create({
+    codeInline: {
+      fontFamily: getMonoFontFamily(theme),
+      fontSize: theme.fontSizes.s,
+      color: theme.colors.code,
+      backgroundColor: theme.colors.codeBackground,
+      paddingHorizontal: theme.spacing.xs,
+      paddingVertical: 2,
+      borderRadius: theme.borderRadius.s,
+      ...(Platform.OS === "android" && { includeFontPadding: false }),
+    },
+  });

package/src/renderers/heading.tsx

@@ -1,6 +1,8 @@
-import { useMemo, type FC, type ReactNode } from "react";
+import type { FC, ReactNode } from "react";
 import { Text, StyleSheet, Platform, type TextStyle } from "react-native";
+import { getCachedStyles } from "./style-cache";
 import { useMarkdownContext } from "../MarkdownContext";
+import type { MarkdownTheme } from "../theme";
 
 type HeadingProps = {
   level: number;
@@ -20,59 +22,7 @@ const ANDROID_SYSTEM_FONTS = new Set([
 
 export const Heading: FC<HeadingProps> = ({ level, children, style }) => {
   const { theme } = useMarkdownContext();
-  const headingWeight =
-    theme.headingWeight ??
-    (Platform.OS === "android" &&
-    theme.fontFamilies.heading &&
-    !ANDROID_SYSTEM_FONTS.has(theme.fontFamilies.heading)
-      ? "normal"
-      : "700");
-  const styles = useMemo(
-    () =>
-      StyleSheet.create({
-        heading: {
-          color: theme.colors.heading,
-          fontWeight: headingWeight,
-          marginTop: theme.spacing.xl,
-          marginBottom: theme.spacing.m,
-          fontFamily: theme.fontFamilies.heading,
-          letterSpacing: -0.2,
-          ...(Platform.OS === "android" && { includeFontPadding: false }),
-        },
-        h1: {
-          fontSize: theme.fontSizes.h1,
-          lineHeight: theme.fontSizes.h1 * 1.3,
-          borderBottomWidth: 1,
-          borderBottomColor: theme.colors.border,
-          paddingBottom: theme.spacing.s,
-          letterSpacing: -0.6,
-        },
-        h2: {
-          fontSize: theme.fontSizes.h2,
-          lineHeight: theme.fontSizes.h2 * 1.3,
-          letterSpacing: -0.4,
-        },
-        h3: {
-          fontSize: theme.fontSizes.h3,
-          lineHeight: theme.fontSizes.h3 * 1.3,
-          letterSpacing: -0.2,
-        },
-        h4: {
-          fontSize: theme.fontSizes.h4,
-          lineHeight: theme.fontSizes.h4 * 1.3,
-        },
-        h5: {
-          fontSize: theme.fontSizes.h5,
-          lineHeight: theme.fontSizes.h5 * 1.3,
-        },
-        h6: {
-          fontSize: theme.fontSizes.h6,
-          lineHeight: theme.fontSizes.h6 * 1.3,
-          color: theme.colors.textMuted,
-        },
-      }),
-    [headingWeight, theme],
-  );
+  const styles = getCachedStyles(stylesCache, theme, createStyles);
 
   const headingStyles = [
     styles.heading,
@@ -86,3 +36,59 @@ export const Heading: FC<HeadingProps> = ({ level, children, style }) => {
 
   return <Text style={[...headingStyles, style]}>{children}</Text>;
 };
+
+type HeadingStyles = ReturnType<typeof createStyles>;
+
+const stylesCache = new WeakMap<MarkdownTheme, HeadingStyles>();
+
+const getHeadingWeight = (theme: MarkdownTheme) =>
+  theme.headingWeight ??
+  (Platform.OS === "android" &&
+  theme.fontFamilies.heading &&
+  !ANDROID_SYSTEM_FONTS.has(theme.fontFamilies.heading)
+    ? "normal"
+    : "700");
+
+const createStyles = (theme: MarkdownTheme) =>
+  StyleSheet.create({
+    heading: {
+      color: theme.colors.heading,
+      fontWeight: getHeadingWeight(theme),
+      marginTop: theme.spacing.xl,
+      marginBottom: theme.spacing.m,
+      fontFamily: theme.fontFamilies.heading,
+      letterSpacing: -0.2,
+      ...(Platform.OS === "android" && { includeFontPadding: false }),
+    },
+    h1: {
+      fontSize: theme.fontSizes.h1,
+      lineHeight: theme.fontSizes.h1 * 1.3,
+      borderBottomWidth: 1,
+      borderBottomColor: theme.colors.border,
+      paddingBottom: theme.spacing.s,
+      letterSpacing: -0.6,
+    },
+    h2: {
+      fontSize: theme.fontSizes.h2,
+      lineHeight: theme.fontSizes.h2 * 1.3,
+      letterSpacing: -0.4,
+    },
+    h3: {
+      fontSize: theme.fontSizes.h3,
+      lineHeight: theme.fontSizes.h3 * 1.3,
+      letterSpacing: -0.2,
+    },
+    h4: {
+      fontSize: theme.fontSizes.h4,
+      lineHeight: theme.fontSizes.h4 * 1.3,
+    },
+    h5: {
+      fontSize: theme.fontSizes.h5,
+      lineHeight: theme.fontSizes.h5 * 1.3,
+    },
+    h6: {
+      fontSize: theme.fontSizes.h6,
+      lineHeight: theme.fontSizes.h6 * 1.3,
+      color: theme.colors.textMuted,
+    },
+  });

package/src/renderers/horizontal-rule.tsx

@@ -1,6 +1,8 @@
-import { useMemo, type FC } from "react";
+import type { FC } from "react";
 import { View, StyleSheet, type ViewStyle } from "react-native";
+import { getCachedStyles } from "./style-cache";
 import { useMarkdownContext } from "../MarkdownContext";
+import type { MarkdownTheme } from "../theme";
 
 type HorizontalRuleProps = {
   style?: ViewStyle;
@@ -8,16 +10,19 @@ type HorizontalRuleProps = {
 
 export const HorizontalRule: FC<HorizontalRuleProps> = ({ style }) => {
   const { theme } = useMarkdownContext();
-  const styles = useMemo(
-    () =>
-      StyleSheet.create({
-        horizontalRule: {
-          height: 1,
-          backgroundColor: theme.colors.border,
-          marginVertical: theme.spacing.xl,
-        },
-      }),
-    [theme],
-  );
+  const styles = getCachedStyles(stylesCache, theme, createStyles);
   return <View style={[styles.horizontalRule, style]} />;
 };
+
+type HorizontalRuleStyles = ReturnType<typeof createStyles>;
+
+const stylesCache = new WeakMap<MarkdownTheme, HorizontalRuleStyles>();
+
+const createStyles = (theme: MarkdownTheme) =>
+  StyleSheet.create({
+    horizontalRule: {
+      height: 1,
+      backgroundColor: theme.colors.border,
+      marginVertical: theme.spacing.xl,
+    },
+  });