Giter VIP home page Giter VIP logo

Comments (5)

jsamr avatar jsamr commented on July 20, 2024

@Naxus28 Thanks for your submission! To help you out I would need to know:

  • the version of the plugin
  • version of react-native-render-html
  • version of react-native-webview
  • an HTML snippet allowing me to reproduce the issue locally

thanks!

from plugins.

Naxus28 avatar Naxus28 commented on July 20, 2024

Hey there @jsamr. Other than that everything works smoothly. Thanks for the library. Here you go:
• the version of the plugin: "@native-html/iframe-plugin": "^1.1.2",
• version of react-native-render-html: "react-native-render-html": "^5.0.1",
• version of react-native-webview: "react-native-webview": "^11.2.5",
• an HTML snippet allowing me to reproduce the issue locally:

const iframes = `
  <section>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/mNz6eHfsESQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <p style="text-align:center;"><em>Skeletor's Best Insults; enjoy</em></p>
  </section>
`;

Please let me know if this works.

Thanks!

from plugins.

jsamr avatar jsamr commented on July 20, 2024

@Naxus28 You should use contentWidth prop of react-native-render-html. Here is the fix:

@@ -18,11 +18,6 @@ export default function App() {
       iframe,
     },
     WebView,
-    defaultWebViewProps: {
-      containerStyle: {
-        width: contentWidth - 40,
-      },
-    },
     ignoredTags: IGNORED_TAGS,
     renderersProps: {
       iframe: {
@@ -38,7 +33,7 @@ export default function App() {
 
   return (
     <ScrollView style={styles.container}>
-      <HTML source={{html}} {...htmlConfig} />
+      <HTML source={{html}} contentWidth={contentWidth - 40} {...htmlConfig} />
     </ScrollView>
   );
 }

Tell me if that works out for you.

from plugins.

Naxus28 avatar Naxus28 commented on July 20, 2024

Nice! That fixed it. I have to keep defaultWebViewProps.containerStyle.width though because I am also supporting tables, which won't display if defaultWebViewProps.containerStyle.width is not set. Not sure that is the desired behavior but that is how it is working now.

from plugins.

jsamr avatar jsamr commented on July 20, 2024

@Naxus28 interesting; if you find the time for a reproduction I'll welcome it! Closing now as your issue looks addressed :-)

from plugins.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.