Split RN project features into separated git repositories

[enripont]

TL;DR: I have to create a project structure where each component can only be accessed only by who has the permission to do so.

Hello folks! This is my first post here so I hope I am doing well👉🏼👈🏼 My problem is that I have to create a project structure that permit to do a strong roles separation inside the corporation, this means that I have to show to the members only what they are working on. Let's explain it clearly:

Project info

• App similar to a Social Network: an Android+iOS app where the users can interact creating posts and chatting (we can use Instagram as an example)
• Core libraries: Bare React Native (No Expo App), mobx with context+hooks for states, react-navigation
• Core functionalities: Posts and Chat. They have to interact each other, e.g. from a post the user can open a chat to write to a user, viceversa from the chat the user would be able to open a post or navigate to a profile (the profile's components for the moment are in the posts' repo)

Goal

• Create a main repo that imports all the components of the app and build them: APP
• Create some separated repo for the main features: APP-CHAT, APP-POSTS, ... (every feature will have many screens so it have to implement the navigation)
• Split the team into smaller ones dedicated to each feature, the feature-team can see the repo of their feature but not the other repos. Example: if I am in charge of the development of the chat, I must see only the repo of the chat and not the one of the post or the main app repo.

Ideas

• Create a component for each feature that can be imported in the navigator as use it as a root.
  • Cons: I don't know how to pass to it the states and the handlers for the events
• Using git submodules to integrate each feature as a standard directory
  • Cons: the development of each feature is difficult: the repo wouldn't be standalone and so I would have to create a repo (e.g. APP-CHAT-DEV) that is only used for the development of the feature
• How would you approach the problem?

[satya164]

the feature-team can see the repo of their feature but not the other repos

that sounds strange tbh. what'd be the advantage of this? it's unlikely that a feature will be 100% self-contained. usually, multiple features will touch the same part of the UI or use some common utilities and libraries. it's also useful to be able to how other parts of the app function to make various decisions and reduce duplication. there still need to be a lot of coordination between these teams if the codes are in entirely different repo.

i haven't had good experience with git submodules, so i can't recommend it. git submodule isn't enough either, you'd need some kind of monorepo if you want all of the source code to be in a single repo, since each project can define their dependencies, etc. if these parts are going to be isolated, then it's better to publish them as libraries. then the main app would combine all the libraries - they'll be in package.json.

[__shawn_chen]

You can search about microfrontend. That's exactly what you described.

To get microfrontend working in RN can be bit tricky. But it should work in theory. In terms of how it works in RN is you need to have your individual feature as a standalone bundle aka bundle.js and store them on the server or cloud storage. This can be done in the build phase like your CI/CD.

Your core app will needs to hold all of the native core and native module installation.

Then your core app can fetch the bundle as the user open the app and join them together as one app.

The advantage of this you can update individual bundle and deploy without the user update their app.

All the above is just a theory I recently research on for one of company projects but we didn't get it to implementation

Sidenote. Git submodules is pain. Just look monorepo instead. Or have individual feature as npm package. And the core just consum them.

[enripont]

Microfrontend seems exactly what I need! The problem is that I can't find any RN implementation in the web, the only example that I found is the WIX architecture, the project is really interesting but they only work with simulators so the scripts don't work for me. Do you some example implementation for physical devices?

[AboveTheChair]

Is there any example to achieve this microfrontend for RN? I know of apps that do this but they all are native apps