The React Native design system
Thompson
A React Native implementation of shared tokens and component contracts for mobile applications.
I designed and built this project independently, using my own resources.
Explore the project
Public repository
Technical documentation
React Native component library. Package, example app, and Storybook guides are in the repository.
Technologies
01 / Context
The problem behind the project
Mobile applications need to share the product language of the web without importing DOM components, CSS, or web-only dependencies.
Thompson gives React Native products the same semantic component vocabulary as the web system without importing browser renderers. It supports mobile workflows such as durable capture/upload queues and editorial interfaces, where touch behavior and compact layouts matter as much as appearance.
A name-for-name API port is insufficient. Safe areas, sheets, nested scrolling, native focus, keyboard behavior, and phone/tablet composition need deliberate native implementations.
02 / Implementation
Design and implementation
I build the native primitives, component contracts, and consumer examples used by mobile projects.
I built native primitives, application layouts, forms, overlays, charts, feed surfaces, and a Storybook catalog around Bleecker’s neutral tokens/contracts. React Native views own rendering; browser CSS, DOM components, Radix, and Recharts are outside the package.
Responsive layouts preserve public names while adapting behavior. Feed columns become vertically scrolling lanes or horizontally paged phone views; a supporting rail becomes an independently scrollable native region at wide sizes. Theme storage is injected rather than requiring one persistence dependency.
I also defined package-consumer and parity checks. Stable release consumption requires an immutable registry artifact and integrity-checked lockfile rather than a moving Git branch or a sibling checkout.
03 / Architecture
Architecture and workflow
Consume neutral foundations
Read semantic contracts and tokens without loading the web renderer.
Implement native behavior
Use native views, safe-area ownership, native SVG charts, and mobile interaction patterns.
Exercise phone and tablet fixtures
Storybook covers narrow/wide layouts, themes, state, and production-critical interactions.
Verify external consumption
Check public exports and package contents from a clean consumer before treating a release as usable.
04 / Approach
Engineering decisions
Share contracts, not browser code
Thompson consumes platform-neutral tokens and contracts, then renders them with React Native primitives.
Consumer-driven quality
Real applications provide references for typography, safe areas, touch targets, and interaction finish.
05 / Evidence
Evidence and outcomes
The strict parity check compares public Bleecker modules and symbols with their native counterparts. That checks API coverage; native fixtures and platform acceptance remain distinct.
A bounded neutral-button proof uses a sanitized consumer-owned fixture and records adaptations, unsupported behavior, and exact artifact provenance rather than copying private producer material into a public package.
Source and technical notes
06 / Current scope
Where it stands
The native component library is in development, with release and consumer workflows documented in the repository.
API completeness is not a claim that every native interaction has passed device acceptance. A registry release and its consumer adoption are also separate milestones.
Applications must load the packaged fonts and respect the provider’s safe-area ownership. Duplicate wrappers or moving dependency pins can undermine otherwise correct components.