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
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
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.
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.
Recommended API query-string and settings
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.