React Native “iFrames”

Downloading Components at Runtime

Clay Allsopp
Feb 15, 2016 · 2 min read

The bouncy view in that GIF was not compiled into the app: it was downloaded from a server at runtime. I wrote about this concept awhile ago and finally got around to hacking it up. You can find the demo on Github.

Why?

We started [February Friends Day videos] mid-November and quickly realized the code had to be done before Christmas. Why? We wanted to make sure that for those who got a new phone as a present, the code would be in the app they downloaded.

On the web we can push code all the time, but not so much for traditional native mobile apps. But if you use React Native, you can leverage services like CodePush to update all the code in your app at once. (Facebook did use React Native for Friends Day, but I guess they didn’t have remote updates as an option)

But what if you want more incremental changes to your code? Or if you want to load some content from third-parties? Content like Twitter-style cards, ads, A/B tests, user-generated content — the possibilities are endless. What we want is something like an iFrame.

How?

This is the API I wanted:

The secret sauce to RemoteComponent is…eval. Basically we download some JavaScript, assume that the code represents a sort of “factory” function, and then invoke it. It’s so simple that you can read this Gist:

In production you’d have a whole bunch of concerns around security if you render these components from random sources — but I can hand-wave that for a hack. The remote JavaScript also has to be sent post-Babel or whatever other build tools you use; the GIF’s code is gnarly.

Next?

Cool tech demos do not make great products by themselves. But there is something to secrets. This feels like a secret. Use it wisely.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store