---
title: "Tophatting in React Native"
description: "Shopify’s tophatting process manually verifies coworkers’ changes before pull requests are approved, but React Native reviews previously required saving work, switching branches, rebuilding, and loading the app. The new tool stores compressed JavaScript bundles and their assets in cloud storage when Shopify Build’s CI pipeline processes a React Native pull request. A backend service records metadata such as the app ID, commit SHA, and branch, generates signed URLs, and posts a pull-request comment with a QR code, bundle ID, and download link. A React Native component library handles deep links through a separate Tophat screen, confirms bundle metadata, downloads and decompresses the selected bundle, saves metadata locally, and restarts the app with it. The first iteration lets developers load peer changes within seconds, and almost all Shopify React Native projects now use the tool."
---

# Tophatting in React Native

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

**Type:** Tutorial

## Summary

Shopify’s tophatting process manually verifies coworkers’ changes before pull requests are approved, but React Native reviews previously required saving work, switching branches, rebuilding, and loading the app. The new tool stores compressed JavaScript bundles and their assets in cloud storage when Shopify Build’s CI pipeline processes a React Native pull request. A backend service records metadata such as the app ID, commit SHA, and branch, generates signed URLs, and posts a pull-request comment with a QR code, bundle ID, and download link. A React Native component library handles deep links through a separate Tophat screen, confirms bundle metadata, downloads and decompresses the selected bundle, saves metadata locally, and restarts the app with it. The first iteration lets developers load peer changes within seconds, and almost all Shopify React Native projects now use the tool.

## Context

React Native tophatting was tedious because reviewers had to save their current work, switch to a feature branch, rebuild the app, and load the new changes. The workflow needed to become faster and more convenient for reviewing pull requests.

## Approach / What changed

A CI pipeline builds and compresses JavaScript bundles with their assets, uploads them to cloud storage, and records bundle metadata through a backend service. A React Native component library provides a Tophat screen and deep-link handling so developers can retrieve, confirm, download, decompress, and activate a bundle using a QR code, bundle ID, or link.

## Takeaways

- React Native-only changes can be distributed as a JavaScript bundle instead of rebuilding and downloading the entire native app.
- The backend service stores bundle metadata in a SQL database and abstracts authentication, third-party service interactions, storage paths, and GitHub comments.
- Developers can select a bundle by scanning a QR code or entering its ID; the app saves the bundle locally, restarts with it, and supports resetting it from the Tophat screen.

**Tags:** [Architecture](https://yomu.fyi/topic/architecture), [CI/CD](https://yomu.fyi/topic/ci-cd), [React Native](https://yomu.fyi/topic/react-native)

- Source: [Shopify](https://shopify.engineering/tophatting-react-native)
- Source URL: https://shopify.engineering/tophatting-react-native
- Ingested by Yomu: 2026-08-31T01:11:44.869Z

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