search

native-html / plugins

Plugins for react-native-render-html
MIT License
55 stars 18 forks source link

[iframe] "scalesPageToFit=true" not zooming out #32

Closed Naxus28 closed 3 years ago

Naxus28 commented 3 years ago

The iframe is not zooming out when it exceeds the width of the view. You can see a screenshot of the iframe on ios and android emulators below: Screen Shot 2021-03-24 at 2 51 05 PM

These are the config obj and the returned component:

const htmlConfig = {
    renderers: {
      iframe,
    },
    WebView,
    defaultWebViewProps: {
      containerStyle: {
        width: contentWidth - 40,
      },
    },
    ignoredTags: IGNORED_TAGS,
    renderersProps: {
      iframe: {
        scalesPageToFit: true,
      },
    },
    tagsStyles: {
      iframe: {
        alignSelf: 'center',
      },
    },
  };

  return (
    <ScrollView>
      <HTML
        source={{html: content}}
        contentWidth={contentWidth}
        {...htmlConfig}
      />
    </ScrollView>
  );
jsamr commented 3 years ago

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

thanks!

Naxus28 commented 3 years ago

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!

jsamr commented 3 years ago

@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.

Naxus28 commented 3 years ago

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.

jsamr commented 3 years ago

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