Creating Design Systems in React Native

Shopify’s core mobile app has more than 600 screens per platform, so the team chose to migrate gradually instead of pausing product work for a full rewrite. Polaris Mobile helps teams move faster during that migration, drawing on Shopify’s web Polaris for icons, tokens, component patterns, and documentation ideas.

Fořt describes keeping the package loosely coupled from the app, documenting components as a source of truth, and providing changelogs and contribution guidelines. Extracting Polaris Mobile into its own monorepo package also made it easier for feature teams to contribute.

A limited set of reusable components is easier to find and maintain, while a shared theme helps keep interfaces consistent. Shopify uses Restyle and TypeScript to constrain colors and other design values to theme tokens, with autocomplete for developers. For complex components, the team favors composing smaller subcomponents over endlessly expanding a long list of props.

The team uses granular screenshot tests for design system components and screen-level tests in the app, along with Storybook, Docusaurus, and FlashList. Fořt demonstrates scaffolding a Badge component, using theme-based spacing, and drawing examples from a shared file for stories, screenshots, and documentation. Screenshot comparisons help teams review visual changes and update reference images.

Polaris Mobile is already used in Shopify Balance, with plans to bring it to more Shopify apps so they share a design language. The team also aims to bring the mobile and web frameworks closer together.