A React Native design system with a live theme editor
A product studio builds many React Native apps from one monorepo. Each app needs components that match the studio's design system in Figma, themed for a different client. I brought the component library up to the design system and built a tool that themes a running app live.
- Platforms
- iOS and Android
- Setup
- Turborepo monorepo
- Role
- Frontend engineer
- Stack
- React Native, TypeScript
The component library
I brought the React Native components to parity with the native iOS design system in Figma: date, time and date-time pickers, selects with helper text and pills, drawers, a tooltip with twelve directions, toasts, segmented controls and buttons whose loader replaces the icon or the label. Every component is documented as stories.
The live theme editor
Theming a new app used to mean editing tokens, rebuilding and checking every screen. The development panel makes it visual:
- Browse every story and screen of an app in a Storybook-style tree and open it on an iOS simulator or Android emulator
- Compare several iOS simulators side by side, and use the Android emulator in the browser with touch input
- Adjust rounding, spacing, sizes and font size with global steppers, and pick colours from the palette
- See the running app restyle live, then save the result as theme overrides and per-app theme versions
Stack
Have a product that needs shipping?
Tell me what you're building and where you're stuck.