Iframely embeds in React Native

If your build mobile app using React Native, we suggest wrapping HTML codes you get from Iframely APIs for rich media embeds into a self-adjusting WebView.

The approach is inspired by Facebook Instant Articles and their op-interactive component.

Basically, you first get HTML embed codes from our oEmbed or Iframely API endpoints. Then you put those HTML codes as the source property of WebView component of React Native framework. Plus, inject a simple JavaScript that sends a message to the parent to change the height of the WebView once the embed codes unfurl themselves.

The tricky part is to set up the initial WebView sizing correctly to avoid flicks of the rest of your content as embed codes expand. The other potential issue is to properly detect that content inside the WebView changed its sizes.

You don't need a separate component if you already serve your entire article's content in a WebView. The HTML codes will work just fine with the rest of your HTML content. This guide is for apps that want to render rich media embeds separately.

Suggested component

Here's a working component that you can copy and expand as required:

You can see that initial sizing is detected from Iframely's HTML embed codes, and the size changes are triggered by window messaging.

The gist requires React Native 0.57.

Prior to 0.57 release, window messaging wasn't reliable. If you need to support earlier versions, you may use this lib for messages instead.

The above approach for React Native component will work with any HTML codes returned by Iframely, and with any query-string parameters or API settings.

However, we recommend to use APIs with at least &omit_script=1, or even with &iframe=1, so that you get Iframely-hosted iFrames for all script-based embeds such as Twitter, Instagram, Facebook etc. You can also achieve that with your API settings.

This way our "predictive-height" mechanism will kick in, and there will be less friction on your user's screen while rich media renders.

Additionally, with Iframely iFrames, there will be more reliable detection that content inside iFrame changes its size as iFrames will be raising such messages.

Previous article: React
Next article: Angular