feat: fix example app and switch from react-native-render-html to @native-html/render

Author: 5ZYSZ3K

.github/ISSUE_TEMPLATE/bug_report.md

@@ -51,7 +51,7 @@ I swear that I have completed these tasks before submitting:
   Print the versions of each library (remove unused)
 -->
 
-- react-native-render-html:
+- @native-html/render:
 - @native-html/table-plugin:
 - @native-html/iframe-plugin:
 - react-native-webview:

README.md

@@ -1,4 +1,4 @@
-# Plugins for react-native-render-html
+# Plugins for @native-html/render
 
 [![](https://img.shields.io/discord/736906960041148476?label=discord)](https://discord.gg/3B9twTMEzb)
 
@@ -9,11 +9,3 @@
 | [@native-html/iframe-plugin](packages/iframe-plugin#readme)                   | [![npm](https://img.shields.io/npm/v/@native-html/iframe-plugin)](https://www.npmjs.com/package/@native-html/iframe-plugin)                   | [![CI](https://github.com/native-html/plugins/workflows/iframe/badge.svg?branch=master)](https://github.com/native-html/plugins/actions?query=branch%3Amaster+workflow%3Aiframe)                   | [![codecov](https://codecov.io/gh/native-html/plugins/branch/master/graph/badge.svg?flag=iframe-plugin)](https://codecov.io/gh/native-html/plugins?flag=iframe-plugin)                   |
 | [@native-html/heuristic-table-plugin](packages/heuristic-table-plugin#readme) | [![npm](https://img.shields.io/npm/v/@native-html/heuristic-table-plugin)](https://www.npmjs.com/package/@native-html/heuristic-table-plugin) | [![CI](https://github.com/native-html/plugins/workflows/heuristic-table/badge.svg?branch=master)](https://github.com/native-html/plugins/actions?query=branch%3Amaster+workflow%3Aheuristic-table) | [![codecov](https://codecov.io/gh/native-html/plugins/branch/master/graph/badge.svg?flag=heuristic-table-plugin)](https://codecov.io/gh/native-html/plugins?flag=heuristic-table-plugin) |
 | [@native-html/table-plugin](packages/table-plugin#readme)                     | [![npm](https://img.shields.io/npm/v/@native-html/table-plugin)](https://www.npmjs.com/package/@native-html/table-plugin)                     | [![CI](https://github.com/native-html/plugins/workflows/table/badge.svg?branch=master)](https://github.com/native-html/plugins/actions?query=branch%3Amaster+workflow%3Atable)                     | [![codecov](https://codecov.io/gh/native-html/plugins/branch/master/graph/badge.svg?flag=table-plugin)](https://codecov.io/gh/native-html/plugins?flag=table-plugin)                     |
-
-## Plugins Compat Table
-
-| react-native-render-html | iframe                                                                                                    | table                                                                                                                                                                                                                                       | heuristic-table                                                                                                  |
-| ------------------------ | --------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
-| ≥ 4.2.1 < 5.0.0       | _No Plugin, iframes were rendered internally_                                                             | 2.x ([documentation](https://github.com/native-html/plugins/tree/rnrh/4.x#readme))                                                                                                                                                          | _No Plugin_                                                                                                      |
-| ≥ 5.0.0 < 6.0.0       | 1.x ([documentation](https://github.com/native-html/plugins/tree/rnrh/5.x/packages/iframe-plugin#readme)) | 3.x ([documentation](https://github.com/native-html/plugins/tree/rnrh/5.x/packages/table-plugin#readme))                                                                                                                                    | _No Plugin_                                                                                                      |
-| ≥ 6.0.0                  | 2.x ([documentation](https://github.com/native-html/plugins/tree/master/packages/iframe-plugin#readme))   | 4.x ([documentation](https://github.com/native-html/plugins/tree/@native-html/table-plugin@4.0.3/packages/table-plugin#readme)) <br> 5.x ([documentation](https://github.com/native-html/plugins/tree/master/packages/table-plugin#readme)) | 0.x ([documentation](https://github.com/native-html/plugins/tree/master/packages/heuristic-table-plugin#readme)) |

example/CustomExample.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import RenderHTML from 'react-native-render-html';
+import RenderHTML from '@native-html/render';
 import { useHtmlTableProps, tableModel } from '@native-html/table-plugin';
 import ClickTable from './ClickTable';
 import WebView from 'react-native-webview';

example/HeuristicTableExample.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import RenderHTML from 'react-native-render-html';
+import RenderHTML from '@native-html/render';
 import tableRenderers from '@native-html/heuristic-table-plugin';
 
 const table1 = `

example/SimpleExample.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import RenderHTML from 'react-native-render-html';
+import RenderHTML from '@native-html/render';
 import table from '@native-html/table-plugin';
 import WebView from 'react-native-webview';
 

example/YoutubeExample.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import RenderHTML from 'react-native-render-html';
+import RenderHTML from '@native-html/render';
 import iframe, { iframeModel } from '@native-html/iframe-plugin';
 import WebView from 'react-native-webview';
 
@@ -22,7 +22,7 @@ const youtubeIframe = `
 <p>
 <iframe width="560"
         height="315"
-        src="https://www.youtube.com/embed/POK_Iw4m3fY"
+        src="https://www.youtube.com/watch?v=YWEsoSosQXQ"
         frameborder="0"
         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
         allowfullscreen>

example/app.config.js

@@ -9,7 +9,7 @@ export default {
     version: pluginVersion,
     orientation: 'default',
     description:
-      'Try out official plugins for react-native-render-html on your device!',
+      'Try out official plugins for @native-html/render on your device!',
     icon: './assets/icon.png',
     splash: {
       backgroundColor: '#ffffff'

example/package.json

@@ -9,26 +9,29 @@
     "eject": "expo eject"
   },
   "dependencies": {
+    "@formidable-webview/webshell": "^2.6.0",
     "@native-html/heuristic-table-plugin": "workspace:*",
     "@native-html/iframe-plugin": "workspace:*",
+    "@native-html/plugins-core": "workspace:*",
+    "@native-html/render": "1.0.0-alpha.0",
     "@native-html/table-plugin": "workspace:*",
     "@react-native-community/masked-view": "0.1.11",
     "@react-navigation/native": "^7.1.31",
     "@react-navigation/stack": "^7.8.2",
     "expo": "^55.0.4",
     "expo-status-bar": "~55.0.4",
     "expo-web-browser": "~55.0.9",
-    "react": "19.2.4",
-    "react-dom": "19.2.4",
-    "react-native": "0.84.1",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-native": "0.83.2",
     "react-native-gesture-handler": "~2.30.0",
     "react-native-paper": "^5.15.0",
-    "react-native-reanimated": "~4.2.2",
-    "react-native-render-html": "6.3.4",
-    "react-native-safe-area-context": "5.7.0",
-    "react-native-screens": "~4.24.0",
+    "react-native-reanimated": "~4.2.1",
+    "react-native-safe-area-context": "5.6.2",
+    "react-native-screens": "~4.23.0",
     "react-native-web": "0.21.2",
-    "react-native-webview": "13.16.1"
+    "react-native-webview": "13.16.0",
+    "react-native-worklets": "^0.7.2"
   },
   "devDependencies": {
     "@babel/core": "^7.29.0"

package.json

@@ -34,11 +34,11 @@
     "prettier": "^3.8.1"
   },
   "resolutions": {
-    "react": "19.2.4",
-    "react-dom": "19.2.4",
-    "react-native": "0.84.1",
-    "react-test-renderer": "19.2.4",
-    "react-native-webview": "13.16.1"
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-native": "0.83.2",
+    "react-test-renderer": "19.2.0",
+    "react-native-webview": "13.16.0"
   },
   "author": "Jules Sam. Randolph <jules.sam.randolph@gmail.com> (https://github.com/jsamr)",
   "license": "MIT",

packages/heuristic-table-plugin/README.md

@@ -39,7 +39,7 @@
 </p>
 
 <p align="center">
-  🔠 A 100% native component using heuristics to render tables in react-native-render-html.
+  🔠 A 100% native component using heuristics to render tables in @native-html/render.
 </p>
 
 <hr/>
@@ -52,19 +52,12 @@ npm add --save @native-html/heuristic-table-plugin
 yarn add @native-html/heuristic-table-plugin
 ```
 
-## Compat Table
-
-| react-native-render-html | @native-html/heuristic-table-plugin                                                                                |
-| ------------------------ | ------------------------------------------------------------------------------------------------------------------ |
-| &lt; 6.0.0               | -                                                                                                                  |
-| ≥ 6.0.0                  | 6.x ([documentation](https://github.com/native-html/plugins/tree/rnrh/6.x/packages/heuristic-table-plugin#readme)) |
-
 ## Minimal working example
 
 ```javascript
 import React from 'react';
 import { ScrollView } from 'react-native';
-import HTML from 'react-native-render-html';
+import HTML from '@native-html/render';
 import tableRenderers from '@native-html/heuristic-table-plugin';
 
 const html = `