Share Code Between React and React Native Projects

Sharing code between React and React Native projects improves development efficiency and ensures consistency. While UI code cannot always be shared (unless using react-native-web), you can reuse a lot of logic, such as context management, Redux stores, and utility functions. This approach helps reduce redundant work and streamlines project maintenance. Let’s dive into three methods to share code between React and React Native projects.

Why Share Code Between React and React Native?

React and React Native share the same core library, making it possible to reuse logic like hooks, contexts, and state management. By sharing code, you reduce development time and avoid duplicating functionality. This is especially helpful for projects that have both a web app and a mobile app with overlapping features.

However, sharing presentation components remains a challenge due to platform differences. Instead, focus on sharing non-UI elements like business logic, data processing, and utility functions.

Methods to Share Code Between React and React Native

1. Using a Monorepo

A monorepo centralizes multiple projects, such as your React app, React Native app, and shared logic, into a single repository. This structure simplifies managing shared code.

Advantages:

• Centralized control over shared logic.
• Simplified versioning with everything in one place.
• Dependency management becomes easier using tools like Yarn Workspaces or Lerna.

How It Works:

• Organize your repository into separate folders for the React app, React Native app, and shared code.
• Link the shared code using a package manager like Yarn.
• Import shared modules in your apps directly as local dependencies.

2. Using NPM Packages

Publishing shared logic as NPM packages provides a modular and flexible approach. These packages can either be hosted publicly on npmjs or in a private repository.

Why This Method Works Well:

• Shared logic stays modular and independent.
• Updating shared logic becomes seamless by bumping the package version in dependent projects.
• Packages can easily be reused in other projects, even outside the React ecosystem.

How to Set It Up:

1. Create a separate repository for shared logic.
2. Develop your code and package it with tools like Rollup or Webpack if needed.
3. Publish the package to npmjs or a private NPM registry.
4. Install the package in both React and React Native projects.

Example:

// Inside shared-package.js
export function calculateDiscount(price, discount) {
  return price - price * (discount / 100);
}

// React App
import { calculateDiscount } from "my-shared-package";

// React Native App
import { calculateDiscount } from "my-shared-package";

This is personally one of my top methods for code sharing as I find it makes sharing complex code between React and React Native super clean and easy.

3. Good Old Copy and Paste

For small, one-off functions that are unlikely to change, copy-pasting offers a simple and fast solution. Although this method lacks scalability, it can work for minor use cases.

When to Use This Method:

• The code is minimal and unlikely to evolve.
• You need a quick solution for prototyping or experimentation.

Drawbacks:

• Maintenance becomes challenging if changes are needed later.
• Inconsistencies may arise if similar logic exists across multiple projects.

Example:

// Copied and pasted in both projects
function formatCurrency(amount) {
  return `$${amount.toFixed(2)}`;
}

Remarks

• Choose your method based on the complexity of shared logic and project requirements.
• NPM packages strike a good balance between flexibility and maintainability.
• Monorepos suit tightly coupled projects but may increase setup complexity.
• Minimize reliance on copy-pasting to avoid long-term maintenance issues.

By adopting these strategies, you can efficiently share code between React and React Native projects, reducing duplication and creating a cohesive development workflow.