Tidy up your codebase, spark joy — React Native primitives for Design Systems

Font sizes, colors palette, spacing scale, sizes, shadows… There’s a lot going on when building an application that follows a specific design. Keeping track and making good use of those different values can become a challenge as the project grows bigger and/or visual changes are requested (hey, could you make this title “pop” a little more?).

Consistency in user interfaces and great maintainability in your code base are core principles that every team should strive for. We know, we’ve been doing it for 4 years now!

Introducing react-native-kondo. react-native-kondo streamlines the development of apps built around design systems. Notably, the library helps with building user interfaces that follows a set of constraints to maximize consistency and aims to increase developers velocity. It achieves this by providing a set of React Native primitives (components) that are tightly coupled to a user defined theme. Theme values and scales are accessed via intuitive props on said components. It shares similarities with inline styling but with the addition that it can access your theme via Context. Lastly, it allows interaction with your theme outside of the provided components through utilities (e.g. hook & HOC) for flexibility. react-native-kondo draws a lot of inspiration from Rebass.