Code Sharing between React and React Native

Question

i am trying to find a good way to share codes between projects like Types and Redux Stores. The best 3 methods i've seen is:

1. Npm package - creating a private package.

• But if i wanted to change something in the npm package while developing, how would i do that?

2. Git Submodules

• I've seen that this way can have some side effects.

3. Copy/Paste

• The way i am doing now xD.. But really horrible way, cause i have to change the same stuff several times and can forget what i've changed..

How would u resolve this issue?

Answer 1

Instead of deploying straight to npmjs.com you can use the npm-link cli to install your package locally and then when you need to make changes during development, they will be automatically updated to your projects

Answer 2

This might be a case for a monorepo, with a solution like NX or Lerna

You have one repository that contains multiple apps, and the common code they share. This makes it trivial to update shared code because it's only ever in one place.

In NX, for instance, you have a directory structure like:

apps/
  website/ (React app)
  mobile-app/ (React native app)
  backend/ (Node.js Express app)
libs/
  common-utils/
  fancy-types/
  constants/

And if you want something from a shared lib, you just:

import { foo } from '@mymonoreponame/common-utils'

It is a big change, so if you are wanting to keep those projects in separate repositories, this solution isn't going to help you. But after struggling with similar issues, the switch to a NX monorepo really helped my workflow.