Make Your Code Reusable Between React And React Native

Code reuse intends to save time, resources and reduce redundancy by taking benefit of assets that have already been designed or developed in some form within the software product development process.

You can make great amounts of code reusable between React and React Native but don’t overreach on what you’re sharing. Doing so may leave your code harder to maintain where you’re trying to simplify differences between mobile and web.

You’ll certainly have to write your components separately for a mobile app and web app. But you can always reuse the business logic, API Communication layer.

Shared:

Business logic

Communication with API

Stores, Reducers, Actions and Services

Helpers, Constants, Storage Services

HOCs (Higher-Order Components)

Mobile / Web specific:

Presentational components

Navigation / routing

Styles

Setting up a shared project

Make sure you are at the project root folder

$ mkdir -p packages/components/src packages/mobile packages/web

Create react native project using react-native-cli inside packages/mobile

inside Create react app using create-react-app inside packages/web

inside Create package.json at the root directory to enable Yarn Workspaces

Create a shared folder

Now create a common or shared folder where the common code of react and react native will exist.

$ mkdir -p packages/common

Create package.json file in common folder

file in common folder Name the package and add main(entry file)

Enable yarn workspace package.json

Directory Structure

Configure React Web application

Add react-app-rewire-yarn-workspaces and react-app-rewired in dev dependencies in your web/package.json

Change your scripts from react-scripts to react-app-rewired

"start": "react-app-rewired start"

"build": "react-app-rewired build"

"test": "react-app-rewired test --env=jsdom"

"eject": "react-app-rewired eject"

Add config-overrides.js inside web

Now run yarn to install the dependencies.

Configure React Native Mobile application

Configuring react-native on mono repo is a little bit tricky part. We need to understand two things before making workspaces work in our react native app.

No Hoist Symlinking

No Hoist

These packages will only be available for mobile and they will not be hoisted globally in our app. You can do this by simply adding nohoist under the workspaces in mobile/package.json

Symlinking

symlink is a term for any file that contains a reference to another file or packages. To achieve symlinking we will use wml.



Install wml globally

npm install -g wml

Add your project directory in wml using command. In the root directory of your project run:

wml add packages/commonpackages/mobile//node_modules/@monorepo/common

Run wml

wml start

Add common folder link in mobile node_modules

Now run wml start and you have achieved symlinking.

What’s Next?

Develop and Import your functions from the shared folder to web and mobile components. Run your application and both applications should run and reuse the same code.