'Pluginable cross-platform software design for react & react native

I want to design a cross-platform (Android, iOS, and Web) plugin-able software that means everyone can easily develop a plugin for it and users can pick plugins from the marketplace and install it. Every plugin can:

  • Share data in the back-end side with the core application
  • Have a custom UI in Apps and Web that ideally using a standard UI-kit for consistency (for example Shopify polaris)

In the back-end, there are many best practices in software design like OAuth. but in the frontend, the problem is not straightforward:

  1. Is there any cross-platform UI-kit for react and react-native? for example, using Expo v33+ or ReactNativeWeb we can build the code for android/ios and web but I can't find any cross-platform UI-kit. (NativeBase, Elements or similar cross-platform UI-kits are only for Android and iOS)

  2. In the Frontend, how plugins can share UI using react and react-native (or ideally a cross-platform UI kit) somehow that render in the core dynamically (without needing any update, for example, the plugin provide an endpoint and return a react/native component and the core will render it)

Software architecture



Solution 1:[1]

1 - As far as I know there are few of them, like React Universal UI

2 - With the above UI Kit, the distinction on how components are built (imports remain the same) is done at runtime in the boilerplate:

Web (React)

$ ruui dev

IOS (React Native)

$ react-native run-ios

Android (React Native)

$ react-native run-android

If you want you component to be imported at runtime, well, this is possible for sure in web env (you can do it also with react-create-app, with dev server turned on and no prod static build).

For Android and IOS you'll need an additional build and subscribe your app for the review before going up again to the store (AppStore and Google Play)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1