refactor: Replace react-native-render-html with @native-html/render (#421)

hb2708 · web-flow · commit 47d489a3da2e · 2026-02-21T20:52:54.000+01:00
diff --git a/app/screens/ActDetail/ActDetailScreen.styles.ts b/app/screens/ActDetail/ActDetailScreen.styles.ts
@@ -9,5 +9,6 @@ export default StyleSheet.create({
   linkStyle: {
     color: Colors.primary,
     textDecorationLine: "underline",
+    textDecorationColor: Colors.primary,
   },
 });
diff --git a/app/screens/ActDetail/ActDetailScreen.tsx b/app/screens/ActDetail/ActDetailScreen.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { ScrollView, useWindowDimensions } from "react-native";
 import { useRoute } from "@react-navigation/native";
-import HTML from "react-native-render-html";
+import { RenderHTML } from "@native-html/render";
 
 import { HTMLImage } from "components";
 import { ui } from "utils";
@@ -30,7 +30,7 @@ const ActDetailScreen: NavStatelessComponent = () => {
       contentInsetAdjustmentBehavior="automatic"
       contentContainerStyle={{ paddingBottom: paddingBottom }}
     >
-      <HTML
+      <RenderHTML
         source={{ html: body }}
         contentWidth={contentWidth}
         baseStyle={baseFontStyle}
diff --git a/app/screens/InfoModal/InfoModalScreen.tsx b/app/screens/InfoModal/InfoModalScreen.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { ScrollView, StyleSheet } from "react-native";
 import { useRoute } from "@react-navigation/native";
-import HTML from "react-native-render-html";
+import { RenderHTML } from "@native-html/render";
 
 import { ui } from "utils";
 import { NavStatelessComponent } from "interfaces";
@@ -18,6 +18,7 @@ const InfoModalScreen: NavStatelessComponent = () => {
     a: {
       color: Colors.primary,
       textDecorationLine: "underline",
+      textDecorationColor: Colors.primary,
     },
   });
   const route = useRoute();
@@ -40,7 +41,7 @@ const InfoModalScreen: NavStatelessComponent = () => {
       style={styles.container}
       contentInsetAdjustmentBehavior="automatic"
     >
-      <HTML
+      <RenderHTML
         source={{ html }}
         contentWidth={Layout.screen.width}
         baseStyle={styles.text}
diff --git a/app/screens/InfoModal/__test__/__snapshots__/InfoModalScreen.test.tsx.snap b/app/screens/InfoModal/__test__/__snapshots__/InfoModalScreen.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`InfoModalScreen renders correctly 1`] = `
     }
   }
 >
-  <HTML
+  <RenderHTML
     baseStyle={
       {
         "fontSize": 18,
@@ -56,6 +56,7 @@ exports[`InfoModalScreen renders correctly 1`] = `
       {
         "a": {
           "color": "#0F853B",
+          "textDecorationColor": "#0F853B",
           "textDecorationLine": "underline",
         },
       }
diff --git a/jest/mock/node-modules/index.js b/jest/mock/node-modules/index.js
@@ -29,10 +29,12 @@ jest.mock("react-redux", () => {
   };
 });
 
-jest.mock("react-native-render-html", () => {
+jest.mock("@native-html/render", () => {
   const createMock = require("../../utils").createMock;
 
-  return createMock("HTML");
+  return {
+    RenderHTML: createMock("RenderHTML"),
+  };
 });
 
 jest.mock("react-native-keyboard-aware-scroll-view", () => {
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
   },
   "dependencies": {
     "@expo/vector-icons": "^15.0.3",
+    "@native-html/render": "^1.0.0-alpha.0",
     "@react-native-async-storage/async-storage": "2.2.0",
     "@react-native-community/datetimepicker": "8.4.4",
     "@react-native-community/slider": "5.0.1",
@@ -72,9 +73,8 @@
     "react-native-pager-view": "6.9.1",
     "react-native-progress": "5.0.1",
     "react-native-reanimated": "~4.1.1",
-    "react-native-render-html": "^6.3.4",
     "react-native-safe-area-context": "~5.6.0",
-    "react-native-screens": "^4.19.0",
+    "react-native-screens": "4.19.0",
     "react-native-svg": "15.12.1",
     "react-native-worklets": "0.5.1",
     "react-redux": "8.0.4",
@@ -126,4 +126,4 @@
   },
   "name": "nmf-app",
   "version": "1.0.0"
-}
+}
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
@@ -12,7 +12,7 @@ exports[`InfoModalScreen renders correctly 1`] = `
`12`	`12`	`}`
`13`	`13`	`}`
`14`	`14`	`>`
`15`		`- <HTML`
	`15`	`+ <RenderHTML`
`16`	`16`	`baseStyle={`
`17`	`17`	`{`
`18`	`18`	`"fontSize": 18,`
@@ -56,6 +56,7 @@ exports[`InfoModalScreen renders correctly 1`] = `
`56`	`56`	`{`
`57`	`57`	`"a": {`
`58`	`58`	`"color": "#0F853B",`
	`59`	`+ "textDecorationColor": "#0F853B",`
`59`	`60`	`"textDecorationLine": "underline",`
`60`	`61`	`},`
`61`	`62`	`}`