How to use embedded HTML code in react native properly?

Question

I am trying to integrate a component with the following Code:

<!-- ScheduleOnce embed START -->
<div id="SOIDIV_MohamadElBaba" data-so-page="MohamadElBaba" data-height="550" data-style="border: 1px solid #d8d8d8; min-width: 290px; max-width: 900px;" data-psz="00"></div>
<script type="text/javascript" src="https://cdn.oncehub.com/mergedjs/so.js"></script>
<!-- ScheduleOnce embed END -->

The goal is to have the app display the component.

I am using react-native and expo, but when I run the project no errors are logged. The component is simply not appearing.

Can someone give me an idea about whats going on?

Full code: (react-native / expo App.js)

import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View } from "react-native";

export default function App() {
  return (
    <View>
      <h1>App Loaded</h1>
      <div
        id="SOIDIV_MohamadElBaba"
        data-so-page="MohamadElBaba"
        data-height="550"
        data-style="border: 1px solid #d8d8d8; min-width: 290px; max-width: 900px;"
        data-psz="00"
      ></div>
      <script
        type="text/javascript"
        src="https://cdn.oncehub.com/mergedjs/so.js"
      ></script>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

Does this answer your question? [Render HTML in React Native](https://stackoverflow.com/questions/29334984/render-html-in-react-native) — juliomalves, Jan 03 '21 at 13:31

Ibz · Answer 1 · 2021-01-03T13:24:21.080

As react native doesn't use the DOM like regular react does, you can't use HTML tags such as div, h1 etc. My assumption would therefore be that you need to use this WebView component to do that. You would then need to set the source prop equal to your html code. You should end up with something like <WebView source={{html: '<h1>App Loaded</h1><div.....'}}. Or even better, if you have the actual uri for the embedded code, you can just do <WebView source={{uri: 'the uri to the page'}} />

https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md#source

This links to the deprecated project page, but it provides an actual code example, and the syntax should be the same between this old version and the newest version. Just remember to add the package referenced in the github link opposed to this one https://reactnative.dev/docs/webview#source

How to use embedded HTML code in react native properly?

1 Answers1