5

I am creating a react-native application, And the application having many module like

  • Login Module
  • Payment
  • Cart
  • Product etc.

So I want to follow Micro Frontend Architecture for each module. I have searched on internet but did not find anything. So I want to know is it possible to achieve Micro Frontend Architecture for React-Native application. If yes then How ?

Avinash A
  • 665
  • 1
  • 7
  • 22

3 Answers3

6

You can use Re.Pack, which is Webpack toolkit for React Native. Since v3 it provides its own ModuleFederationPlugin, which allows you to set up Module Federation (MF) architecture of building micro-frontends.

Example MF app can be found here: https://github.com/callstack/repack-examples/tree/main/module-federation. It covers a basic example of 2 mini-apps loaded dynamically from a "host" app.

Michał Pierzchała
  • 1,762
  • 1
  • 15
  • 20
  • Adding this as a comment, but my team at Callstack is currently working on a more comprehensive showcase of using Module Federation for a sample Super App. We're gonna release it in OSS closer to March/April and followup with extra material on how to build such apps and what to expect and what not :) – Michał Pierzchała Jan 26 '23 at 14:38
2

There are no proper solutions for RN Micro-frontend so far. there are a few libraries that may help you to achieve this.

https://github.com/callstack/react-native-brownfield React Native Wix

But these are not recommended

kindly go through this link so you will be more clear about your question.

https://www.reddit.com/r/reactnative/comments/jdpfrj/microservices_in_react_native/

T.O.M
  • 81
  • 1
  • 7
2

Microfrontends are concept originating from Web apps world. Achieving the same paradigm on mobile/React Native is possible, e.g. by using Re.Pack, but requires a quite complex setup. On the other hand, using Re.Pack will give you more app superpowers, like dynamically loading bundle splits from Internet.

As a simpler alternative, I would suggest setting up a monorepo containing separate NPM packages for each of the modules. This way you can achieve code separation more natural for mobile apps paradigm.

Maciej Jastrzebski
  • 3,674
  • 3
  • 22
  • 28