React Native “iFrames”

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.


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.


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.


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

Engineering @Opendoor

Love podcasts or audiobooks? Learn on the go with our new app.

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
Clay Allsopp

Clay Allsopp

Engineering @Opendoor

More from Medium

How we are using Sentry for mobile apps

React Native — Image Zooming with Gesture Handler

E2E Testing with React Native, Detox and GraphQL

Switch between project build variants (staging, production, etc) in React Native — part 1