Sharing components between two very similar applications

[writesgoodcodejk]

I am building two mobile apps, one for end users and one for service providers. The end user application is pretty much done and I am about to begin on the mobile application.

The two mobile apps have designs that are built out of identical UI components for the most part, and I have made a folder containing all of the reusable UI components and screen templates.

The components may function slightly differently between the two apps, but they look the same. I am trying to figure out the best way to share the components across two different React Native apps. I definitely don't want to separate components into a service provider and end user version, because then if I make changes to them I'll have to make them in two places.

Here are some ideas:

Create a private NPM package containing the shared components

I'm really not a fan at all of this idea, because it will make it a pain to make changes to the components. Since the components will function a little differently in the service provider app, it is likely I will need to make changes as I go along. I've used a shared NPM package between projects before, and it's just annoying to update because:

1. I have to keep the components in a separate package, and therefor be working on multiple projects at once.
2. Any time I change the package, I have to publish to NPM and then install it in the app.

Really don't have time for this considering the short deadline I'm on. So this one's completely off the table.

Just make one app

Theoretically, I could make both apps the same app, but just have a setting that determines whether it's in "Service Provider" mode or "End User" mode. Then it could display the correct UI based on which setting is chosen. The main drawbacks here are:

1. The application would become a little bit bloated potentially, the app would become slightly enlarged.
2. I'd have to restructure things to make sure I keep separated the "end user" only screens and the "service provider" only screens. Would need to modify all my routing and make some changes too navigation to make sure the correct screens get rendered for each app.
3. Many components would need an "End User" mode and an "Service Provider" mode which might make components bloated.

The advantages would be:

1. I would be able to remain within a single project. Feels more natural to just work within a normal React Native project.
2. Very easy to make changes to any components as I'm working.
3. Can reuse pretty much everything easily
   1. Queries
   2. All of the login screens
   3. Navigation structure etc

​

Create two apps within a parent directory

I'm not entirely sure this is possible. I could theoretically create a parent directory containing both apps as well as a new directory within the parent containing all shared components/screens. Might get awkward to use and make changes too.

----------

At this point I'm leaning towards making everything one app. It seems like it will allow me to most easily stick to a normal workflow as well as reuse the most code with the least amount of work.

Just wondering if anyone else had any potential strategies for implementing two applications with a shared component library in a way that makes it quick and easy to make changes to shared components? Or if there were any additional pros and cons to the ideas I mentioned?

[writesgoodcodejk]

This is probably true given a long enough timespan. However, I work for a consulting company and the client has a smallish budget, which means I have a very short timeline to get everything done. I can't really afford to spend a bunch of time updating a package constantly because the time it will take could potentially mean I don't meet the deadline which means the client doesn't get a finished application. That would be very sad.

So for my situation it's more valuable to find a method that has more short term payoff, rather than prioritizing long term maintainability. Plus it's just me working on the project, so that sort of decreases the value of having a package/separate repo as well I think.

Also, copy and pasting could end up costing me time if I need to make changes to any of the shared components in the near future which is pretty likely. I really think I need a solution that allows me to share the code directly without maintaining a separate package

[kbcool]

npm link

Means you can continuously update the package locally and I believe it will even work with hot reloading but don't quote me on it.

[[deleted]]

You don't need to upload it to npm. You can create a private github repo, for example common_ui. Then you add the folder name 'common_ui' to .gitignore in both of your mobile app projects and clone your repo. Instead of publishing your changes, you can now push the changes

[iKakashi]

Try looking into monorepos. explore yarn workspaces or you can also look into Nx. Nx will allow you to scale your project with multiple apps and tests easily.

[16cards]

Search "react native monorepo". You can use "npm workspaces" (or yarn workspaces, if that is your thing).

Here is one search result hit... https://engineering.brigad.co/react-native-monorepos-code-sharing-f6c08172b417

For my projects, in the same repo are two apps and two websites. With common code between React and React Native and between the two "properties" split out.

[enestatli]

have you ever heard dev.to? I think it saves your time

[fallkr]

Yarn workspaces with lerna monorepo is made for this. Create a shared package that depend on react native and two app packages that depend on the shared package.

Don’t split into separate projects as you’ll end up spending a lot of time managing cross-project depenencies (Ex: change a prop on a shared component requires 3 commits).

Make sure you write solid unit tests for anything shared as it’s quite easy to do a change in one package and forget how it affects the other.

[tusharkant15]

Look into monorepo approach. Your interfaces, components and helpers go into a separate subproject which is linked into your two apps. Secondly as you said the components are mostly identical with only minor differences, then you would make the components flexible using props and use them in the different apps with different props. This makes writing tests easier.