RePack React Native & React and Zephyr
Is it possible to use RePack to enable a React Native application to act as a host and consume web-based React components via Module Federation in a micro-frontend architecture, and if so, how can we deploy and manage these federated modules effectively on Zhyper?
For example, i just wanted to create a <button/> in React and consume and show in React Native through Module Federation..
4 Replies
Welcome @Rico I'm going to tag in @Higor Alves, @Néstor and @Jakub Romańczyk who have more experience on the RN side, however I do know you can use federated code between RN and Web, but there may be some RN specific nuance around sharing view layer stuff I may be unaware of.
@Higor Alves after y'all get this worked through would be useful to add to our docs.
Yes — but with caveats.
Re.Pack extends Metro to support Webpack Module Federation in React Native. You can make an RN app act as a host and dynamically load “remote” bundles that export React components — including ones originally built for the web — but you must:
- Compile the remote with React Native compatibility
- Use react-native-web or ship RN-compatible primitives (no raw DOM).
- Transpile the remote with Metro/webpack settings that target RN (no browser-only globals).
- Expose your component in the remote’s webpack.config.js
- Configure the host RN app’s webpack.config.js via Re.Pack
Thank you for the detailed explanation — really appreciate the insights.
Just to clarify my understanding: does this mean that in order to consume a web-based component like a simple <button /> from a remote module in React Native via Module Federation, we would first need to compile the remote with React Native compatibility (e.g., using react-native-web or RN-compatible primitives), transpile it appropriately, and then essentially extract and serve the resulting bundle in a way that can be rendered within the React Native app (via Re.Pack)?
In other words, are we essentially "hosting" the remote bundle separately and rendering it inside the RN app using react-native-web, instead of relying on raw web components?
Yep, that sounds about right