From 0da8198ae2707f5abf454e812a614095bfc324b5 Mon Sep 17 00:00:00 2001
From: Sjaak Schilperoort <sjaak@xs4all.nl>
Date: Tue, 10 Feb 2026 11:13:46 +0100
Subject: [PATCH 1/2] Make HTML renderers overridable

---
 package.json                                  |   2 +-
 src/components/RenderHtmlWrapper.tsx          |  30 +-
 .../__tests__/RenderHtmlWrapper.test.tsx      |  18 +
 .../RenderHtmlWrapper.test.tsx.snap           | 333 ++++++++++++++++++
 4 files changed, 370 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 7c3d25f..8f1b897 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@observation.org/react-native-components",
-  "version": "1.69.0",
+  "version": "1.70.0",
   "main": "src/index.ts",
   "repository": "git@github.com:observation/react-native-components.git",
   "author": "Observation.org",
diff --git a/src/components/RenderHtmlWrapper.tsx b/src/components/RenderHtmlWrapper.tsx
index e53f268..3848afb 100644
--- a/src/components/RenderHtmlWrapper.tsx
+++ b/src/components/RenderHtmlWrapper.tsx
@@ -59,17 +59,23 @@ const RenderHtmlWrapper = ({
   renderersProps = defaultRenderersProps,
   baseStyle = textStyle.body,
   ...props
-}: RenderHTMLProps) => (
-  <RenderHtml
-    contentWidth={contentWidth}
-    renderersProps={renderersProps}
-    renderers={renderers}
-    systemFonts={systemFonts}
-    baseStyle={baseStyle}
-    tagsStyles={htmlStyle}
-    enableExperimentalMarginCollapsing
-    {...props}
-  />
-)
+}: RenderHTMLProps) => {
+  const mergedRenderers = {
+    ...renderers,
+    ...props.renderers,
+  }
+  return (
+    <RenderHtml
+      contentWidth={contentWidth}
+      renderersProps={renderersProps}
+      renderers={mergedRenderers}
+      systemFonts={systemFonts}
+      baseStyle={baseStyle}
+      tagsStyles={htmlStyle}
+      enableExperimentalMarginCollapsing
+      {...props}
+    />
+  )
+}
 
 export default RenderHtmlWrapper
diff --git a/src/components/__tests__/RenderHtmlWrapper.test.tsx b/src/components/__tests__/RenderHtmlWrapper.test.tsx
index e9a3006..32e621c 100644
--- a/src/components/__tests__/RenderHtmlWrapper.test.tsx
+++ b/src/components/__tests__/RenderHtmlWrapper.test.tsx
@@ -20,6 +20,24 @@ describe('RenderHtmlWrapper', () => {
       })
     })
 
+    describe('Override renderer', () => {
+      test('Override ol', () => {
+        const html = '<ol>\n<li>Ein</li>\n<li>Zwei</li>\n<li>Drei</li>\n</ol>'
+        const renderers = { ol: () => <></> }
+        const { toJSON, queryByText } = render(<RenderHtmlWrapper source={{ html }} renderers={renderers} />)
+        expect(queryByText('Ein')).toBeFalsy()
+        expect(toJSON()).toMatchSnapshot()
+      })
+
+      test('Override ul does not affect ol', () => {
+        const html = '<ol>\n<li>Ein</li>\n<li>Zwei</li>\n<li>Drei</li>\n</ol>'
+        const renderers = { ul: () => <></> }
+        const { toJSON, queryByText } = render(<RenderHtmlWrapper source={{ html }} renderers={renderers} />)
+        expect(queryByText('Ein')).toBeTruthy()
+        expect(toJSON()).toMatchSnapshot()
+      })
+    })
+
     describe('Custom ordered list renderer', () => {
       test('Normal renderer', () => {
         const html = '<ol>\n<li>Ein</li>\n<li>Zwei</li>\n<li>Drei</li>\n</ol>'
diff --git a/src/components/__tests__/__snapshots__/RenderHtmlWrapper.test.tsx.snap b/src/components/__tests__/__snapshots__/RenderHtmlWrapper.test.tsx.snap
index 9b17ff5..e4ceece 100644
--- a/src/components/__tests__/__snapshots__/RenderHtmlWrapper.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/RenderHtmlWrapper.test.tsx.snap
@@ -1456,3 +1456,336 @@ exports[`RenderHtmlWrapper Rendering Custom unordered list Normal render 1`] = `
   </View>
 </View>
 `;
+
+exports[`RenderHtmlWrapper Rendering Override renderer Override ol 1`] = `
+<View
+  style={
+    [
+      {},
+      undefined,
+      undefined,
+    ]
+  }
+  testID="html"
+>
+  <View
+    style={
+      [
+        {},
+        undefined,
+        undefined,
+      ]
+    }
+    testID="body"
+  />
+</View>
+`;
+
+exports[`RenderHtmlWrapper Rendering Override renderer Override ul does not affect ol 1`] = `
+<View
+  style={
+    [
+      {},
+      undefined,
+      undefined,
+    ]
+  }
+  testID="html"
+>
+  <View
+    style={
+      [
+        {},
+        undefined,
+        undefined,
+      ]
+    }
+    testID="body"
+  >
+    <View
+      style={
+        [
+          [
+            {
+              "marginBottom": 8,
+              "marginTop": 16,
+              "paddingLeft": 16,
+            },
+            null,
+            null,
+            {
+              "paddingLeft": 0,
+              "position": "relative",
+            },
+          ],
+          undefined,
+          undefined,
+        ]
+      }
+      testID="ol"
+    >
+      <View
+        style={
+          [
+            {
+              "alignSelf": "stretch",
+              "flexDirection": "row",
+              "flexWrap": "nowrap",
+            },
+            undefined,
+          ]
+        }
+        testID="marked-list-item"
+      >
+        <View
+          style={
+            [
+              undefined,
+              {
+                "width": 16,
+              },
+            ]
+          }
+        >
+          <Text
+            ellipsizeMode="clip"
+            numberOfLines={1}
+            style={
+              {
+                "alignSelf": "flex-end",
+                "color": "#666666",
+                "flexGrow": 0,
+                "flexShrink": 0,
+                "fontFamily": "Ubuntu",
+                "fontSize": 14,
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+                "lineHeight": 20,
+                "textAlign": "right",
+              }
+            }
+            testID="marker-box"
+          >
+            1. 
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "flexShrink": 1,
+            }
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "marginBottom": 8,
+                },
+                undefined,
+                undefined,
+              ]
+            }
+            testID="li"
+          >
+            <Text
+              allowFontScaling={true}
+              selectable={false}
+              style={
+                [
+                  {
+                    "color": "#666666",
+                    "fontFamily": "Ubuntu",
+                    "fontSize": 14,
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                    "lineHeight": 20,
+                  },
+                  undefined,
+                  undefined,
+                ]
+              }
+            >
+              Ein
+            </Text>
+          </View>
+        </View>
+      </View>
+      <View
+        style={
+          [
+            {
+              "alignSelf": "stretch",
+              "flexDirection": "row",
+              "flexWrap": "nowrap",
+            },
+            undefined,
+          ]
+        }
+        testID="marked-list-item"
+      >
+        <View
+          style={
+            [
+              undefined,
+              {
+                "width": 16,
+              },
+            ]
+          }
+        >
+          <Text
+            ellipsizeMode="clip"
+            numberOfLines={1}
+            style={
+              {
+                "alignSelf": "flex-end",
+                "color": "#666666",
+                "flexGrow": 0,
+                "flexShrink": 0,
+                "fontFamily": "Ubuntu",
+                "fontSize": 14,
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+                "lineHeight": 20,
+                "textAlign": "right",
+              }
+            }
+            testID="marker-box"
+          >
+            2. 
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "flexShrink": 1,
+            }
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "marginBottom": 8,
+                },
+                undefined,
+                undefined,
+              ]
+            }
+            testID="li"
+          >
+            <Text
+              allowFontScaling={true}
+              selectable={false}
+              style={
+                [
+                  {
+                    "color": "#666666",
+                    "fontFamily": "Ubuntu",
+                    "fontSize": 14,
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                    "lineHeight": 20,
+                  },
+                  undefined,
+                  undefined,
+                ]
+              }
+            >
+              Zwei
+            </Text>
+          </View>
+        </View>
+      </View>
+      <View
+        style={
+          [
+            {
+              "alignSelf": "stretch",
+              "flexDirection": "row",
+              "flexWrap": "nowrap",
+            },
+            undefined,
+          ]
+        }
+        testID="marked-list-item"
+      >
+        <View
+          style={
+            [
+              undefined,
+              {
+                "width": 16,
+              },
+            ]
+          }
+        >
+          <Text
+            ellipsizeMode="clip"
+            numberOfLines={1}
+            style={
+              {
+                "alignSelf": "flex-end",
+                "color": "#666666",
+                "flexGrow": 0,
+                "flexShrink": 0,
+                "fontFamily": "Ubuntu",
+                "fontSize": 14,
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+                "lineHeight": 20,
+                "textAlign": "right",
+              }
+            }
+            testID="marker-box"
+          >
+            3. 
+          </Text>
+        </View>
+        <View
+          style={
+            {
+              "flexShrink": 1,
+            }
+          }
+        >
+          <View
+            style={
+              [
+                {
+                  "marginBottom": 8,
+                },
+                undefined,
+                undefined,
+              ]
+            }
+            testID="li"
+          >
+            <Text
+              allowFontScaling={true}
+              selectable={false}
+              style={
+                [
+                  {
+                    "color": "#666666",
+                    "fontFamily": "Ubuntu",
+                    "fontSize": 14,
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                    "lineHeight": 20,
+                  },
+                  undefined,
+                  undefined,
+                ]
+              }
+            >
+              Drei
+            </Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;

From 6e873207e87e6637b2ffe5363edfd89ab5082faa Mon Sep 17 00:00:00 2001
From: Sjaak Schilperoort <sjaak@xs4all.nl>
Date: Tue, 10 Feb 2026 15:10:50 +0100
Subject: [PATCH 2/2] Fix in override logic

---
 src/components/RenderHtmlWrapper.tsx                | 13 +++++++------
 .../__snapshots__/RenderHtmlWrapper.test.tsx.snap   |  8 ++++----
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/components/RenderHtmlWrapper.tsx b/src/components/RenderHtmlWrapper.tsx
index 3848afb..d4d4d85 100644
--- a/src/components/RenderHtmlWrapper.tsx
+++ b/src/components/RenderHtmlWrapper.tsx
@@ -10,7 +10,7 @@ import htmlStyle from '../styles/html'
 import textStyle from '../styles/text'
 import theme from '../styles/theme'
 
-export const imgRenderer = ({ tnode }: { tnode: TBlock }) => {
+const imgRenderer = ({ tnode }: { tnode: TBlock }) => {
   const { src, alt } = tnode.attributes
   Log.debug('RenderHtmlWrapper:imgRenderer', src, alt)
   if (!src) {
@@ -19,7 +19,7 @@ export const imgRenderer = ({ tnode }: { tnode: TBlock }) => {
   return <ContentImage key={src} alt={alt} src={src} />
 }
 
-export const olRenderer = ({ InternalRenderer, ...props }: CustomRendererProps<TBlock>) => (
+const olRenderer = ({ InternalRenderer, ...props }: CustomRendererProps<TBlock>) => (
   <InternalRenderer
     {...props}
     style={{
@@ -29,7 +29,7 @@ export const olRenderer = ({ InternalRenderer, ...props }: CustomRendererProps<T
   />
 )
 
-export const ulRenderer = ({ TNodeChildrenRenderer, ...props }: CustomRendererProps<TBlock>) => (
+const ulRenderer = ({ TNodeChildrenRenderer, ...props }: CustomRendererProps<TBlock>) => (
   <>
     {props.tnode.children.map((item, i) => (
       <View key={i} style={{ flexDirection: 'row' }}>
@@ -40,7 +40,7 @@ export const ulRenderer = ({ TNodeChildrenRenderer, ...props }: CustomRendererPr
   </>
 )
 
-const renderers = {
+const defaultRenderers = {
   img: imgRenderer,
   ol: olRenderer,
   ul: ulRenderer,
@@ -57,12 +57,13 @@ const systemFonts = [...defaultSystemFonts, 'Ubuntu']
 const RenderHtmlWrapper = ({
   contentWidth = Dimensions.get('window').width - 2 * theme.margin.common,
   renderersProps = defaultRenderersProps,
+  renderers: customRenderers = {},
   baseStyle = textStyle.body,
   ...props
 }: RenderHTMLProps) => {
   const mergedRenderers = {
-    ...renderers,
-    ...props.renderers,
+    ...defaultRenderers,
+    ...customRenderers,
   }
   return (
     <RenderHtml
diff --git a/src/components/__tests__/__snapshots__/RenderHtmlWrapper.test.tsx.snap b/src/components/__tests__/__snapshots__/RenderHtmlWrapper.test.tsx.snap
index e4ceece..c5d9a10 100644
--- a/src/components/__tests__/__snapshots__/RenderHtmlWrapper.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/RenderHtmlWrapper.test.tsx.snap
@@ -1509,7 +1509,7 @@ exports[`RenderHtmlWrapper Rendering Override renderer Override ul does not affe
             {
               "marginBottom": 8,
               "marginTop": 16,
-              "paddingLeft": 16,
+              "paddingLeft": 24,
             },
             null,
             null,
@@ -1542,7 +1542,7 @@ exports[`RenderHtmlWrapper Rendering Override renderer Override ul does not affe
             [
               undefined,
               {
-                "width": 16,
+                "width": 24,
               },
             ]
           }
@@ -1629,7 +1629,7 @@ exports[`RenderHtmlWrapper Rendering Override renderer Override ul does not affe
             [
               undefined,
               {
-                "width": 16,
+                "width": 24,
               },
             ]
           }
@@ -1716,7 +1716,7 @@ exports[`RenderHtmlWrapper Rendering Override renderer Override ul does not affe
             [
               undefined,
               {
-                "width": 16,
+                "width": 24,
               },
             ]
           }