How can different apps import from a shared components folder? react / react-native

Question

I'm currently working on a project where we have to make 2 mobile apps. We decided to build those apps with react-native, so we can take advantage of the cross platform functionality.

Then we outlined the project structure. In the UI design of both apps, most of the components are exactly the same, but only a change in color.

So that's why we've decided that both apps must import (flexible) components from one folder .

Project Structure

- mobile
    - project 1
    - project 2

Must look something like one off the two solutions below

- components
- mobile
    - project 1
    - project 2

or

- mobile
    - components
    - project 1
    - project 2

'

The problem

So the problem occurs when I try to import the components from outside either the project 1 or 2. For example, I created a Loading component usable for both projects (apps). But this component uses a third-party library, and that library requires a Pod install, to install some additional libraries.

Questions:

1. Where should I install the third party library (yarn add). In the folder components, or in both project folders?
2. If I install it in the components folder, I am not able to run Pod install, since there was nothing added inside that project directory.
3. If I try to import a component from the components folder, which is outside the project directory, I'am getting 'Unable to resolve module..' error.

I think that react-native is not encouraging that we should import components from outside the project directory, hence the error. But still, I want this to work, so it would be better organised and way more efficient.

Does someone have experience in this type of field? How can a I solve this issue? What are the possible solution(s) .

I've read other StackOverflow posts, but still couldn't figure it out. It is still not clear to me.

Answer 1

If you want to share the components between two discrete projects, the common solution is to create your own NPM library as jmargolisvt suggests in their comment.

It will add a bit of overhead to publishing changes to your component library though. If you need to move fast, you can install you component library into your project by installing directly from Github for example. See NPM's docs for the npm install syntax for this: https://docs.npmjs.com/cli/install

Either way, your structure ends up look like the below, and you'll be able to import your shared components as you would any other npm module.

app-ios
  - depends on app-component-library
app-android
  - depends on app-component-library
app-component-library