How to add react-native out-of-tree platforms using Gatsby and create-react-app?

Question

We have a large react-native application and want to extend this application into a website and chrome-extension, the website and chrome extension use the same reducers, sagas and some components (using react-native-web) from our mobile application. The chrome extension and website are basically a subset of the mobile app.

The idea was to setup the build system to build these platforms in a single repo eg if we run npm run build-chrome-extension it will build the react extension into a root folder called /extension , which will live in the same directory as the /ios and /android folder, same goes for a /web folder.

To achieve this we will use react-native out-of-tree platforms then use file extensions to serve the correct code, CheckoutScreen.website.js will serve the checkout screen for the website.

The question is, how do we setup the build system to accomplish this? If we want to use Gatsby to build the website, and create-react-app for the chrome-extension.

Answer 1

Not sure to answer the question, but you can use https://github.com/slorber/gatsby-plugin-react-native-web

It uses the Expo-web webpack config (which also works in CRA or Next or homemade webpack), which means your web layer will resolve in priority the .web.js extension.