Expo-router and remote code

or how to use server side components in React Native

Expo-router is new file system based router that tries to unify the navigation between React Native and web following a little the same conventions as Next.js (Read more in the blog post)

When Evan Bacon presented it the first time I was super curious if it would allow us to load remote content in a “native” manner ( I mean ReactNative components and not whole bundles or SDUI)

It turns out that it’s very easy using dynamic routes — [id].js — and using the react-native-wormwhole module. Without entering too much in details, a wormhole allows you to load remote components hosted on a server and render them in the app like any other normal import.

Below is a simplified explanation on how this can work with expo-router

• the dynamic route file contains a wormwhole that’s able to load the remote content
• there should be a mapping between the route.params.id and the files that exist on server (the easiest way would be to keep the same names)
• id is passed to the wormwhole and this loads and renders the component in your app.

At the development stage there a few steps needed to make this work. The most important one is to prepare the files for serving. ReactNative doesn’t really know about JSX or TS so we need to compile the files first using babel. This is explained in the react-native-wormwhole readme.

I have created a simple monorepo to show how everything works together and it shows how everything is put together and what are the steps needed to have it running.

A word of caution

Both Apple and Google are extremely cautious with what your app is doing so use this techniques only to enrich the user’s experience and stick 100% to the purpose of your app. Doing otherwise will probably get you banned.

Another aspect to be aware is that you can only update the JS part of your app, a new native module would still need you to upload a new version in the stores.

Further development

This is a super simplified version of a server side import feature you might want to have in your app. However there are many more thing that needs to be done to be complete. Some ideas could be

• map, compile and upload the server files automatically
• handle the errors when the wormwhole is not able to load the files
• pre-fetch the server files for a better user experience
• implement a verification logic to be sure we load the files we mean to (security)

Let me know your thoughts and get in touch for any questions you might have :)