refactor: Update react-native-render-html to fix warning and adapt HTML component usage for link styling. (#418)

hb2708 · web-flow · commit c15f0b0aaa86 · 2025-12-24T13:08:46.000+01:00
diff --git a/app/screens/ActDetail/ActDetailScreen.styles.ts b/app/screens/ActDetail/ActDetailScreen.styles.ts
@@ -1,9 +1,13 @@
 import { StyleSheet } from "react-native";
 
-import { Layout } from "style";
+import { Colors, Layout } from "style";
 
 export default StyleSheet.create({
   container: {
     ...Layout.containerWithPadding,
   },
+  linkStyle: {
+    color: Colors.primary,
+    textDecorationLine: "underline",
+  },
 });
diff --git a/app/screens/ActDetail/ActDetailScreen.tsx b/app/screens/ActDetail/ActDetailScreen.tsx
@@ -33,8 +33,13 @@ const ActDetailScreen: NavStatelessComponent = () => {
       <HTML
         source={{ html: body }}
         contentWidth={contentWidth}
-        onLinkPress={ui.onHTMLBodyLinkPress}
-        baseFontStyle={baseFontStyle}
+        baseStyle={baseFontStyle}
+        tagsStyles={{ a: styles.linkStyle }}
+        renderersProps={{
+          a: {
+            onPress: ui.onHTMLBodyLinkPress,
+          },
+        }}
         renderers={{
           img: (attribs) => {
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
diff --git a/app/screens/InfoModal/InfoModalScreen.tsx b/app/screens/InfoModal/InfoModalScreen.tsx
@@ -1,17 +1,25 @@
 import React from "react";
-import { ScrollView } from "react-native";
+import { ScrollView, StyleSheet } from "react-native";
 import { useRoute } from "@react-navigation/native";
 import HTML from "react-native-render-html";
 
 import { ui } from "utils";
 import { NavStatelessComponent } from "interfaces";
+import { Layout } from "constant";
+import { Colors } from "style";
 
 import styles from "./InfoModalScreen.styles";
 import navigationOptions from "./InfoModal.navigationOptions";
 import methodology from "../../../assets/methodology/methodology.json";
 import emissionInfo from "../../../assets/emission-info/emission-info.json";
 
 const InfoModalScreen: NavStatelessComponent = () => {
+  const linkStyle = StyleSheet.create({
+    a: {
+      color: Colors.primary,
+      textDecorationLine: "underline",
+    },
+  });
   const route = useRoute();
 
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -32,7 +40,17 @@ const InfoModalScreen: NavStatelessComponent = () => {
       style={styles.container}
       contentInsetAdjustmentBehavior="automatic"
     >
-      <HTML source={{ html }} onLinkPress={ui.onHTMLBodyLinkPress} baseFontStyle={styles.text} />
+      <HTML
+        source={{ html }}
+        contentWidth={Layout.screen.width}
+        baseStyle={styles.text}
+        tagsStyles={linkStyle}
+        renderersProps={{
+          a: {
+            onPress: ui.onHTMLBodyLinkPress,
+          },
+        }}
+      />
     </ScrollView>
   );
 };
diff --git a/app/screens/InfoModal/__test__/__snapshots__/InfoModalScreen.test.tsx.snap b/app/screens/InfoModal/__test__/__snapshots__/InfoModalScreen.test.tsx.snap
@@ -13,12 +13,19 @@ exports[`InfoModalScreen renders correctly 1`] = `
   }
 >
   <HTML
-    baseFontStyle={
+    baseStyle={
       {
         "fontSize": 18,
       }
     }
-    onLinkPress={[Function]}
+    contentWidth={375}
+    renderersProps={
+      {
+        "a": {
+          "onPress": [Function],
+        },
+      }
+    }
     source={
       {
         "html": "<h1>How is your carbon footprint calculated?</h1>
@@ -45,6 +52,14 @@ exports[`InfoModalScreen renders correctly 1`] = `
 ",
       }
     }
+    tagsStyles={
+      {
+        "a": {
+          "color": "#0F853B",
+          "textDecorationLine": "underline",
+        },
+      }
+    }
   />
 </ScrollView>
 `;
diff --git a/package.json b/package.json
@@ -72,7 +72,7 @@
     "react-native-pager-view": "6.9.1",
     "react-native-progress": "5.0.1",
     "react-native-reanimated": "~4.1.1",
-    "react-native-render-html": "5.1.0",
+    "react-native-render-html": "^6.3.4",
     "react-native-safe-area-context": "~5.6.0",
     "react-native-screens": "^4.19.0",
     "react-native-svg": "15.12.1",
@@ -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
@@ -13,12 +13,19 @@ exports[`InfoModalScreen renders correctly 1`] = `
`13`	`13`	`}`
`14`	`14`	`>`
`15`	`15`	`<HTML`
`16`		`- baseFontStyle={`
	`16`	`+ baseStyle={`
`17`	`17`	`{`
`18`	`18`	`"fontSize": 18,`
`19`	`19`	`}`
`20`	`20`	`}`
`21`		`- onLinkPress={[Function]}`
	`21`	`+ contentWidth={375}`
	`22`	`+ renderersProps={`
	`23`	`+ {`
	`24`	`+ "a": {`
	`25`	`+ "onPress": [Function],`
	`26`	`+ },`
	`27`	`+ }`
	`28`	`+ }`
`22`	`29`	`source={`
`23`	`30`	`{`
`24`	`31`	`"html": "<h1>How is your carbon footprint calculated?</h1>`
@@ -45,6 +52,14 @@ exports[`InfoModalScreen renders correctly 1`] = `
`45`	`52`	`",`
`46`	`53`	`}`
`47`	`54`	`}`
	`55`	`+ tagsStyles={`
	`56`	`+ {`
	`57`	`+ "a": {`
	`58`	`+ "color": "#0F853B",`
	`59`	`+ "textDecorationLine": "underline",`
	`60`	`+ },`
	`61`	`+ }`
	`62`	`+ }`
`48`	`63`	`/>`
`49`	`64`	`</ScrollView>`
`50`	`65`	`;