Learn how to share code between React Native and React.js using Yarn Workspace.
Hello Developers! Many times we needs to reuse some code between React Native & React.js like state management code (Redux, Mobx, Apollo Client), utility & common functions, global constants, api call & common business logic. Today, we will learn to share code between React Native and React.js using Yarn Workspaces.
If you haven’t checkout Yarn Workspaces I request you to check it first where I have explained SetUp Yarn Workspaces step-by-step.
Yarn Workspaces
Yarn Workspaces allow developers to create workspaces that share packages under the same workspace. Consider you have multiple packages and all are using common dependencies like graphql, axios, etc. To install dependency separately for each package (node_modules), Yarn Workspaces allow you to install packages at root level and you can access that dependency throughout all packages inside that workspaces. So with lots of installation, memory size will be reduced.
WML
Consider you have created a few common packages that you need to use for both React, React Native, Server (BackEnd), So whenever you change on common packages you need to add that updated package into your React, React Native node_modules. WML helps you to link your packages to where it is being used.
This command line will copy common packages inside the app’s node_modules.
nohoist
As discussed earlier in Yarn Workspaces, whatever dependency (npm, node_modules) you were installing for your packages, it will be installed on your root node_modules instead of individual packages. If you checked then react-native packages refer to node_modules inside /app directory. But actually it will be installed on root (node_modules) so to link react-native dependency we are using nohoist which helps you to link your dependency. To do this you need to add few lines of code in your /app/package.json
Steps by Step Integration
- Create WorkSpace directory named — ReactShareCode
2) Create package.json file and add following lines of code, which contains a list of packages under WorkSpace
Here, we have set up three packages (app, web, common) inside our Workspaces. We have app (React Native App), web (React.js Website), common (Common Code — Which used in React Native & React.js Website)
Now, let’s create three projects, app (react native), web (react.js), common (common code between react & react native)
Now, let’s change some hierarchy of folder structure. Right now if you see,
You see, everything are on root folder, let’s move app, web, common inside packages folder
You can directory drag your app, web, common folder directory to the packages folder. We have changed folder hierarchy, so we need to update root package.json according
Update react-share-code/package.json file look like this
Till, all going well, If you see packages name it will be like “name”: “app”, “name”: “web”, “name”: “common”, but as per best coding practices we need to append project name, workspace name. So, lets change packages name
react-share-code/packages/app/package.json -
react-share-code/packages/web/package.json -
react-share-code/packages/common/package.json -
So, we have finish with
- WorkSpace Creation
- Project Creation (React Native, React.JS)
- Common Folder Creation
- Structure Folder Hierarchy Into packages directory
- Updated packages name
Now, let’s put some reusable code into a common directory.
Create file index.js inside common directory and add following line -
Now, let’s use this in React Native Project, to use code we need to add it as a dependency, So lets update /packages/app/package.json file
Here, we have added @sharecode/common as a devDependency and added workspaces — nohoist to get reference of react-native.
Now, lets go to code /app/app.js
Before start running project, let’s remove node_modules both /app and root /node_modules to reinstall packages
Now, let’s run the react-native app, you will see Text Value “Shared Variable” which is fetched from common logic.
Same way, lets integrate it into React.js Application.
Run the react.js application you will get printed “Shared Variable”
That’s it, you have used the same code between React Native & React.JS.
What kind of code you can add into shared/common -
- Redux / Redux Saga/ Redux Rematch / Apollo Client/ Mobx — State Management Into Common
- Common API Imports
- Common Themes/ Fonts Settings
- Common Variables/ Constants
- Common API Calls
You can add as much code as you require as per project needs.
Now, If you have changed anything in your common folder/ code, then to merge your latest common packages we are using WML.
Above command will copy code files of common into app/web node_modules under @reactsharecode/common packages.
To start linking you can do
Execute above WML commands whenever you have updated anything into your common packages, WML will merge code into app/node_modules/@reactsharecode/common and web/node_modules/@reactsharecode/common.
What Next?
Yarn Workspaces — Monorepo Approach
Lerna Workspaces — Managing Projects With Multiple Packages
Thanks for reading full article!
Read More Technical Articles
KPITENG || hello@kpiteng.com ||DIGITAL TRANSFORMATION
