Share Code Between React Native and React.js

KPITENG — Share Code Between React Native & React.js

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.

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

  1. Create WorkSpace directory named — ReactShareCode
  • WorkSpace Creation
  • Project Creation (React Native, React.JS)
  • Common Folder Creation
  • Structure Folder Hierarchy Into packages directory
  • Updated packages name
  • 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

What Next?

Yarn Workspaces — Monorepo Approach

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store