[iframe-plugin] Content doesn't scale to fit if the container has some padding

demedos commented 3 years ago

Oath

I swear that I have completed these tasks before submitting:

[x] I have read the README
[x] I have checked that the issue has not been reported yet
[x] I have prefixed this issue title with the plugin suffix (e.g: [iframe-plugin]) depending on the affected plugin

Bug Report

Content doesn't scale to fit if the container has some padding

Environment

React Native

System:
    OS: macOS 11.3
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 247.13 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 12.21.0 - ~/.nvm/versions/node/v12.21.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v12.21.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
    Android SDK:
      API Levels: 29, 30
      Build Tools: 29.0.3, 30.0.2, 31.0.0
      System Images: android-29 | Google Play Intel x86 Atom, android-30 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.1 AI-201.8743.12.41.6953283
    Xcode: 12.4/12D4e - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_242-release - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.14.0 => 16.14.0 
    react-native: 0.63.4 => 0.63.4 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Libraries

react-native-render-html: 5.1.0
@native-html/iframe-plugin: 1.1.2
react-native-webview: 11.4.3

Devices

simulator iPhone 11
- OS: 14.4
- Environment: development

Reproduction

Render a component with some padding around the iframe

<View style={{ padding: 16 }}>
    <HTML
        renderers={{ iframe }}
        WebView={WebView}
        source={{
          html: `<iframe src="https://getbootstrap.com/docs/5.0/examples/album/" />`,
        }}
    />
</View>

Description

Create a container with some padding and render the iframe in it

Expected output: the iframe scales to fit its container Observed output: the iframe overflows and some parts are not visible

Reproducible Demo

snack: https://snack.expo.io/AfrVZoTgW (just check the code, iframes won't display on the website)

jsamr commented 3 years ago

@demedos This is expected. You should provide contentWidth prop to HTML component. Quoting from the docs here: https://github.com/meliorence/react-native-render-html#props

contentWidth: The width of the HTML content to display. If you don't pass this prop, images might overflow horizontally and take up to all their physical width. The recommended practice is to pass useWindowDimensions().width minus any padding or margins.

demedos commented 3 years ago

@jsamr Duh, I haven't read the prop description on the docs. Thank you.

jsamr commented 3 years ago

@demedos No worries :-) happy coding!

demedos commented 3 years ago

@jsamr I was wondering though, when the renderer was integrated into react-native-renderer-html the width of the content was calculated automatically, which was quite handy because my paddings are dynamic. Is there any way to replicate the old behaviour?

jsamr commented 3 years ago

@demedos If I understood your requirement well, this feature is available in v6 (foundry release)! Yet in alpha, but very soon the API be frozen and beta-released with a brand new doc website! See https://github.com/meliorence/react-native-render-html/issues/430

native-html / plugins