react-native-nitro-markdown 0.5.3 → 0.5.4

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,
+    },
+  });

package/src/renderers/image.tsx

@@ -1,6 +1,6 @@
 import {
   useState,
-  useLayoutEffect,
+  useEffect,
   useMemo,
   type ReactNode,
   type FC,
@@ -110,21 +110,28 @@ export const Image: FC<ImageProps> = ({ url, title, alt, Renderer, style }) => {
     [theme, aspectRatio],
   );
 
-  useLayoutEffect(() => {
-    // Fast path for consistent aspect ratios if checking picsum
+  useEffect(() => {
+    let isMounted = true;
+    setLoading(true);
+    setError(false);
+    setAspectRatio(undefined);
+
     const picsumMatch = url.match(/picsum\.photos\/.*\/(\d+)\/(\d+)/);
     if (picsumMatch) {
       const w = parseInt(picsumMatch[1], 10);
       const h = parseInt(picsumMatch[2], 10);
       if (!isNaN(w) && !isNaN(h) && h !== 0) {
         setAspectRatio(w / h);
+        return () => {
+          isMounted = false;
+        };
       }
     }
 
     RNImage.getSize(
       url,
       (width, height) => {
-        if (width > 0 && height > 0) {
+        if (isMounted && width > 0 && height > 0) {
           setAspectRatio(width / height);
         }
       },
@@ -138,6 +145,10 @@ export const Image: FC<ImageProps> = ({ url, title, alt, Renderer, style }) => {
         }
       },
     );
+
+    return () => {
+      isMounted = false;
+    };
   }, [url]);
 
   const altContent = useMemo(() => {

package/src/renderers/list.tsx

@@ -1,6 +1,8 @@
-import { useMemo, type FC, type ReactNode } from "react";
+import type { FC, ReactNode } from "react";
 import { View, Text, StyleSheet, Platform, type ViewStyle } from "react-native";
+import { getCachedStyles } from "./style-cache";
 import { useMarkdownContext } from "../MarkdownContext";
+import type { MarkdownTheme } from "../theme";
 
 type ListProps = {
   ordered: boolean;
@@ -10,23 +12,10 @@ type ListProps = {
   style?: ViewStyle;
 };
 
-// Note: ordered and start are accepted for API consistency but layout is
-// handled at the ListItem level — the List container is style-only.
+// ordered/start stay on List for renderer API parity; markers render in ListItem.
 export const List: FC<ListProps> = ({ depth, children, style }) => {
   const { theme } = useMarkdownContext();
-  const styles = useMemo(
-    () =>
-      StyleSheet.create({
-        list: {
-          marginBottom: theme.spacing.m,
-        },
-        listNested: {
-          marginLeft: theme.spacing.s,
-          marginBottom: 0,
-        },
-      }),
-    [theme],
-  );
+  const styles = getCachedStyles(listStylesCache, theme, createListStyles);
   return (
     <View style={[styles.list, depth > 0 && styles.listNested, style]}>
       {children}
@@ -50,30 +39,10 @@ export const ListItem: FC<ListItemProps> = ({
   style,
 }) => {
   const { theme } = useMarkdownContext();
-  const styles = useMemo(
-    () =>
-      StyleSheet.create({
-        listItem: {
-          flexDirection: "row",
-          marginBottom: theme.spacing.s,
-          alignItems: "flex-start",
-        },
-        listBullet: {
-          color: theme.colors.accent,
-          fontSize: theme.fontSizes.m,
-          lineHeight: theme.fontSizes.m * 1.6,
-          marginRight: theme.spacing.s,
-          minWidth: 22,
-          textAlign: "center",
-          fontFamily: theme.fontFamilies.regular,
-          ...(Platform.OS === "android" && { includeFontPadding: false }),
-        },
-        listItemContent: {
-          flex: 1,
-          minWidth: 0,
-        },
-      }),
-    [theme],
+  const styles = getCachedStyles(
+    listItemStylesCache,
+    theme,
+    createListItemStyles,
   );
   const bullet = ordered ? `${start + index}.` : "•";
   return (
@@ -96,42 +65,10 @@ export const TaskListItem: FC<TaskListItemProps> = ({
   style,
 }) => {
   const { theme } = useMarkdownContext();
-  const styles = useMemo(
-    () =>
-      StyleSheet.create({
-        taskListItem: {
-          flexDirection: "row",
-          alignItems: "flex-start",
-          marginBottom: theme.spacing.s,
-        },
-        taskCheckbox: {
-          width: 18,
-          height: 18,
-          borderRadius: 4,
-          borderWidth: 2,
-          borderColor: theme.colors.accent,
-          alignItems: "center",
-          justifyContent: "center",
-          marginRight: theme.spacing.s,
-          marginTop: 2,
-        },
-        taskCheckboxChecked: {
-          backgroundColor: theme.colors.accent,
-        },
-        taskCheckboxText: {
-          color: theme.colors.surface,
-          fontSize: 12,
-          lineHeight: 12,
-          fontWeight: "700",
-          fontFamily: theme.fontFamilies.regular,
-          ...(Platform.OS === "android" && { includeFontPadding: false }),
-        },
-        taskContent: {
-          flex: 1,
-          minWidth: 0,
-        },
-      }),
-    [theme],
+  const styles = getCachedStyles(
+    taskListItemStylesCache,
+    theme,
+    createTaskListItemStyles,
   );
   return (
     <View style={[styles.taskListItem, style]}>
@@ -144,3 +81,83 @@ export const TaskListItem: FC<TaskListItemProps> = ({
     </View>
   );
 };
+
+type ListStyles = ReturnType<typeof createListStyles>;
+type ListItemStyles = ReturnType<typeof createListItemStyles>;
+type TaskListItemStyles = ReturnType<typeof createTaskListItemStyles>;
+
+const listStylesCache = new WeakMap<MarkdownTheme, ListStyles>();
+const listItemStylesCache = new WeakMap<MarkdownTheme, ListItemStyles>();
+const taskListItemStylesCache = new WeakMap<
+  MarkdownTheme,
+  TaskListItemStyles
+>();
+
+const createListStyles = (theme: MarkdownTheme) =>
+  StyleSheet.create({
+    list: {
+      marginBottom: theme.spacing.m,
+    },
+    listNested: {
+      marginLeft: theme.spacing.s,
+      marginBottom: 0,
+    },
+  });
+
+const createListItemStyles = (theme: MarkdownTheme) =>
+  StyleSheet.create({
+    listItem: {
+      flexDirection: "row",
+      marginBottom: theme.spacing.s,
+      alignItems: "flex-start",
+    },
+    listBullet: {
+      color: theme.colors.accent,
+      fontSize: theme.fontSizes.m,
+      lineHeight: theme.fontSizes.m * 1.6,
+      marginRight: theme.spacing.s,
+      minWidth: 22,
+      textAlign: "center",
+      fontFamily: theme.fontFamilies.regular,
+      ...(Platform.OS === "android" && { includeFontPadding: false }),
+    },
+    listItemContent: {
+      flex: 1,
+      minWidth: 0,
+    },
+  });
+
+const createTaskListItemStyles = (theme: MarkdownTheme) =>
+  StyleSheet.create({
+    taskListItem: {
+      flexDirection: "row",
+      alignItems: "flex-start",
+      marginBottom: theme.spacing.s,
+    },
+    taskCheckbox: {
+      width: 18,
+      height: 18,
+      borderRadius: 4,
+      borderWidth: 2,
+      borderColor: theme.colors.accent,
+      alignItems: "center",
+      justifyContent: "center",
+      marginRight: theme.spacing.s,
+      marginTop: 2,
+    },
+    taskCheckboxChecked: {
+      backgroundColor: theme.colors.accent,
+    },
+    taskCheckboxText: {
+      color: theme.colors.surface,
+      fontSize: 12,
+      lineHeight: 12,
+      fontWeight: "700",
+      fontFamily: theme.fontFamilies.regular,
+      ...(Platform.OS === "android" && { includeFontPadding: false }),
+    },
+    taskContent: {
+      flex: 1,
+      minWidth: 0,
+    },
+  });

package/src/renderers/math.tsx

@@ -1,4 +1,4 @@
-import { useMemo, type FC, type ComponentType } from "react";
+import type { FC, ComponentType } from "react";
 import {
   View,
   Text,
@@ -7,6 +7,7 @@ import {
   type StyleProp,
   type ViewStyle,
 } from "react-native";
+import { getCachedStyles } from "./style-cache";
 import { useMarkdownContext } from "../MarkdownContext";
 import type { MarkdownTheme } from "../theme";
 
@@ -36,6 +37,10 @@ type MathInlineProps = {
   style?: ViewStyle;
 };
 
+type MathStyles = ReturnType<typeof createMathStyles>;
+
+const mathStylesCache = new WeakMap<MarkdownTheme, MathStyles>();
+
 const createMathStyles = (theme: MarkdownTheme) =>
   StyleSheet.create({
     mathInlineContainer: {
@@ -92,7 +97,7 @@ const createMathStyles = (theme: MarkdownTheme) =>
 
 export const MathInline: FC<MathInlineProps> = ({ content, style }) => {
   const { theme } = useMarkdownContext();
-  const styles = useMemo(() => createMathStyles(theme), [theme]);
+  const styles = getCachedStyles(mathStylesCache, theme, createMathStyles);
 
   if (!content) return null;
 
@@ -126,7 +131,7 @@ type MathBlockProps = {
 
 export const MathBlock: FC<MathBlockProps> = ({ content, style }) => {
   const { theme } = useMarkdownContext();
-  const styles = useMemo(() => createMathStyles(theme), [theme]);
+  const styles = getCachedStyles(mathStylesCache, theme, createMathStyles);
 
   if (!content) return null;
 

package/src/renderers/paragraph.tsx

@@ -1,6 +1,8 @@
-import { useMemo, type FC, type ReactNode } from "react";
+import type { FC, ReactNode } from "react";
 import { View, StyleSheet, type StyleProp, type ViewStyle } from "react-native";
+import { getCachedStyles } from "./style-cache";
 import { useMarkdownContext } from "../MarkdownContext";
+import type { MarkdownTheme } from "../theme";
 
 type ParagraphProps = {
   children: ReactNode;
@@ -14,22 +16,7 @@ export const Paragraph: FC<ParagraphProps> = ({
   style,
 }) => {
   const { theme } = useMarkdownContext();
-  const styles = useMemo(
-    () =>
-      StyleSheet.create({
-        paragraph: {
-          flexDirection: "row",
-          flexWrap: "wrap",
-          marginBottom: theme.spacing.l,
-          gap: 0,
-        },
-        paragraphInListItem: {
-          marginBottom: 0,
-          marginTop: 0,
-        },
-      }),
-    [theme],
-  );
+  const styles = getCachedStyles(stylesCache, theme, createStyles);
 
   return (
     <View
@@ -43,3 +30,21 @@ export const Paragraph: FC<ParagraphProps> = ({
     </View>
   );
 };
+
+type ParagraphStyles = ReturnType<typeof createStyles>;
+
+const stylesCache = new WeakMap<MarkdownTheme, ParagraphStyles>();
+
+const createStyles = (theme: MarkdownTheme) =>
+  StyleSheet.create({
+    paragraph: {
+      flexDirection: "row",
+      flexWrap: "wrap",
+      marginBottom: theme.spacing.l,
+      gap: 0,
+    },
+    paragraphInListItem: {
+      marginBottom: 0,
+      marginTop: 0,
+    },
+  });

package/src/renderers/style-cache.ts

@@ -0,0 +1,14 @@
+import type { MarkdownTheme } from "../theme";
+
+export function getCachedStyles<T>(
+  cache: WeakMap<MarkdownTheme, T>,
+  theme: MarkdownTheme,
+  createStyles: (theme: MarkdownTheme) => T,
+): T {
+  const cached = cache.get(theme);
+  if (cached) return cached;
+
+  const styles = createStyles(theme);
+  cache.set(theme, styles);
+  return styles;
+}

package/src/renderers/table/index.tsx

@@ -26,6 +26,7 @@ import {
   useMarkdownContext,
   type NodeRendererProps,
 } from "../../MarkdownContext";
+import { getCachedStyles } from "../style-cache";
 import type { MarkdownTheme } from "../../theme";
 
 type TableRendererProps = {
@@ -58,7 +59,7 @@ export const TableRenderer: FC<TableRendererProps> = ({
   );
 
   const columnCount = headers.length;
-  const styles = useMemo(() => createTableStyles(theme), [theme]);
+  const styles = getCachedStyles(tableStylesCache, theme, createTableStyles);
   const estimatedColumnWidths = useMemo(
     () => estimateColumnWidths(headers, rows, columnCount, minColumnWidth),
     [headers, rows, columnCount, minColumnWidth],
@@ -213,6 +214,14 @@ export const TableRenderer: FC<TableRendererProps> = ({
     return "flex-start";
   };
 
+  const tableBackgroundStyle = useMemo(
+    () => ({
+      backgroundColor:
+        style?.backgroundColor ?? theme.colors.surface ?? "#111827",
+    }),
+    [style, theme.colors.surface],
+  );
+
   if (columnCount === 0) return null;
 
   const hasWidths = columnWidths.length === columnCount;
@@ -269,15 +278,7 @@ export const TableRenderer: FC<TableRendererProps> = ({
         style={styles.tableScroll}
         bounces={false}
       >
-        <View
-          style={[
-            styles.table,
-            {
-              backgroundColor:
-                style?.backgroundColor ?? theme.colors.surface ?? "#111827",
-            },
-          ]}
-        >
+        <View style={[styles.table, tableBackgroundStyle]}>
           <View style={styles.headerRow}>
             {headers.map((cell, colIndex) => (
               <View
@@ -338,6 +339,10 @@ export const TableRenderer: FC<TableRendererProps> = ({
   );
 };
 
+type TableStyles = ReturnType<typeof createTableStyles>;
+
+const tableStylesCache = new WeakMap<MarkdownTheme, TableStyles>();
+
 const createTableStyles = (theme: MarkdownTheme) => {
   const colors = theme?.colors || {};
   const borderRadius = theme?.borderRadius || { m: 8 };