---
title: "Reusing Code with React Native Packages at Shopify"
description: "Shopify’s React Native teams needed to reuse shared functionality across Shop, Inbox, Point of Sale, Shopify Mobile, and Local Delivery without requiring each team to build and maintain separate package infrastructure. The React Native Foundations team chose a monorepo containing npm packages, a fixture app, shared root configuration, generated CI, and an internal documentation site, with code generation for package bootstrapping. Packages use TypeScript project references, Yarn Workspaces, Lerna publishing, and custom Babel, Metro, and Podfile configuration to support cross-package references, hot reload, and local native dependencies. Dependency graphs and file-change triggers limit CI work to affected packages and dependents, while independent versioning and release scripts manage publication; since June 2020, 17 packages have been developed, including 10 contributed by product teams, although release automation and coordination across multiple monorepos remain future improvements."
---

# Reusing Code with React Native Packages at Shopify

[Shopify](https://yomu.fyi/company/shopify) · 2023-10-18 · Sep 29, 2021

**Type:** Explainer

## Summary

Shopify’s React Native teams needed to reuse shared functionality across Shop, Inbox, Point of Sale, Shopify Mobile, and Local Delivery without requiring each team to build and maintain separate package infrastructure. The React Native Foundations team chose a monorepo containing npm packages, a fixture app, shared root configuration, generated CI, and an internal documentation site, with code generation for package bootstrapping. Packages use TypeScript project references, Yarn Workspaces, Lerna publishing, and custom Babel, Metro, and Podfile configuration to support cross-package references, hot reload, and local native dependencies. Dependency graphs and file-change triggers limit CI work to affected packages and dependents, while independent versioning and release scripts manage publication; since June 2020, 17 packages have been developed, including 10 contributed by product teams, although release automation and coordination across multiple monorepos remain future improvements.

## Context

Shopify’s different React Native apps share functionality and foundational building blocks, but extracting code into new repositories requires developers to create repositories, configure CI and distribution pipelines, and set up Jest, ESLint, and Babel. This additional work can make code reuse tedious, error-prone, and discouraging.

## Approach / What changed

The React Native Foundations team created a monorepo for npm packages that can include native iOS and Android code, a fixture app for local and internal Snapshot testing, and a Gatsby documentation site. Shared TypeScript, Babel, Jest, and ESLint configuration, Yarn Workspaces, Lerna, generated CI pipelines, dependency graphs, custom React Native tooling, and a PlopJS package generator provide standardized development, testing, documentation, and release workflows.

## Takeaways

- TypeScript project references support cross-package imports and IDE resolution, while Yarn Workspaces separately defines package dependencies for distribution and Lerna resolves dependency order during publishing.
- CI pipelines are generated from package content and triggered by file changes, so they build and validate updated packages and packages that depend on them rather than rebuilding the entire repository.
- The release workflow versions packages independently when they contain unreleased changes, but all unreleased changes must be released together; planned improvements include conventional commits, automated changelogs, and automated releases.

**Tags:** [Architecture](https://yomu.fyi/topic/architecture), [CI/CD](https://yomu.fyi/topic/ci-cd), [Developer Experience](https://yomu.fyi/topic/developer-experience), [TypeScript](https://yomu.fyi/topic/typescript)

- Source: [Shopify](https://shopify.engineering/react-native-packages-shopify)
- Source URL: https://shopify.engineering/react-native-packages-shopify
- Ingested by Yomu: 2026-08-30T15:29:09.155Z

[Read original post](https://shopify.engineering/react-native-packages-shopify)