1

I am working on a React Native app that displays HTML content using the react-native-render-html library. This HTML data is coming from content formatted in WordPress. The same content is also being displayed in the web app made with ReactJS. I am also using this iframe plugin, as recommended by the render-html library, to display the iframes in my HTML.

I have the following problem with rendering Twitch video embeds.

The Twitch embeds are in this format:

<iframe src="https://clips.twitch.tv/embed?clip=ShortHelpfulSquirrelCmonBruh-hWj49qxBfx-VKseO&amp;autoplay=false&amp;parent=my.parent.domain" width="640px" height="360px" frameborder="0" scrolling="no" allowfullscreen="true"></iframe>

Please note that these are not live streams, but clips. The ReactJS website displays these embeds correctly with the thumbnail:

Twitch embed on Web

With the same embed code, however, my React Native app displays the embed without the thumbnail but with just a black background (although it shows the title and controls):

Twitch embed on mobile before playing

Once I play and pause the video, the background does not remain black, however:

Twitch embed on mobile after pausing

Here is the rendererProp that I am passing to the library for iframes:

iframe: {
  scalesPageToFit: true,
  webViewProps: {
    scrollEnabled: false,
    mediaPlaybackRequiresUserAction: true,
    javaScriptEnabled: true,
    domStorageEnabled: true,
    userAgent: Platform.select({
      ios: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.2 Safari/605.1.15",
      android: "Chrome/56.0.0.0 Mobile android",
    }),
  },
}

I am passing the IframeRenderer and iframeModel as imported directly from @native-html/iframe-plugin (linked at the beginning) into the renderers and customHTMLElementModels props of the <RenderHtml/> component. Also I am using the WebView from react-native-webview lib.

My team and I cannot figure out why the thumbnail is not appearing in the react-native-webview, but works fine in the website. If anyone has any experience rendering Twitch video iframe embeds on react-native-webview, please take a look. Any help will be appreciated.

Ishita Sinha
  • 2,168
  • 4
  • 25
  • 38

0 Answers0