Site icon Mobile App Development Services

Sharing Code Between React And React Native

Sharing code from React to React Native

Code reuse intends to save time and 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 reuse a lot of code between React and React Native e.g. business logic, utilities, helpers, API fetching logic, etc. But don’t overreach on what you’re sharing because doing so may leave your code harder to maintain.

UI components will have to be written separately for both mobile and web.

Contents of ‘shared’ folder:

Contents of ‘web’ & ‘mobile’ folder:

Setting up a shared project

Open terminal. Make sure you are in the project root folder.

$ mkdir -p packages/shared/src packages/mobile packages/web
{
    "name": "monorepo",
    "private": true,
    "workspaces": {
        "packages": [
            "packages/*"
        ],
        "nohoist": []
    },
    "dependencies": {
        "react-native": "0.69.5"
    }
}

Create a shared folder

Now create a shared folder where the shared code of the React and React Native apps will reside.

$ mkdir -p packages/shared
{
    "name": "@monorepo/shared",
    "version": "1.0.0",
    "dependencies": {}
}

Directory Structure

Configure the web (React) application

npm install react-app-rewire-yarn-workspaces react-app-rewired --save-dev
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-app-rewired eject"
}
const rewireYarnWorkspaces = require("react-app-rewire-yarn-workspaces");

module.exports = function override(config, env) {
    return rewireYarnWorkspaces(config, env);
}
yarn install

Configure the mobile (React Native) application

Configuring a React Native app through monorepo is a bit tricky. Firstly, change the directory to packages/mobile on your terminal. Now, you will need to understand two things before making workspaces work.

  1. No Hoist
  2. Symlinking

1. No Hoist

Inside the package.json file, the packages that you list down under “nohoist” tag will only be available for mobile and will not be hoisted globally.

2. Symlinking

A symlink is a term used for any file that contains a reference to another file or package. To achieve symlinking, we will use ‘wml’.

npm install -g wml
wml add packages/shared packages/mobile/node_modules/@monorepo/shared
wml start

Once you run the above command, you should see an output something like this:

In case no output gets displayed, then follow this answer to get the issue fixed: https://github.com/wix/wml/issues/38#issuecomment-521570796

You can now develop and import functions from the shared folder inside the components in the web and mobile folders. Add a file inside packages/shared/src folder and export a function inside it. You should then be able to import the function inside your web and mobile files like this:

import { functionName } from '@monorepo/shared/src/fileName';

This is how we set up a project to share code between React and React Native applications. Thanks for reading!

Exit mobile version