A thematic and type-safe React Native component library and Storybook playground monorepo.
These packages are very much in an experimental alpha stage. There is still so much work that needs to be done. The base components are 100% ready to use, but creating your own theme is highly recommended.
Design tokens are the base level visual design pieces of a design system. They are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development. Tokens are universal and never change across themes. Design tokens are translated into themes for use in styling components.
The theme translates the design tokens into more meaningful properties for use in our component styles. The theme should follow the Theme Specification (also see style-system's or theme-ui's theme specification documentation).
This component library uses Restyle to create theme-reliant and type-safe components. Restyle is very similar to styled-system, but has some advantages for React Native. Restyle utilizes the native styling layer rather than relying on Styled Components or Emotion like styled-system does, therefore it requires less runtime style calculation. Restyle also has much better Typescript support out of the box.
From Restyle's docs:
The Restyle library provides a type-enforced system for building UI components in React Native with TypeScript. It's a library for building UI libraries, with themability as the core focus.
This library assumes that the UI is built upon a design system that (at the very least) defines a set of colors and spacing constants that lays as a foundation. While the library acknowledges that there can be exceptions to the system by allowing any style to be overridden, it keeps the developer most productive when one-off values are kept to a minimum.