gitmyhub

react-native-ui-lib

TypeScript ★ 7.1k updated 10d ago

UI Components Library for React Native

Pre-built UI component library for React Native mobile apps by Wix, with a theming system for customizing colors, typography, and component defaults to match your brand.

TypeScriptReact NativenpmExpoFigmasetup: easycomplexity 2/5

This is a library of pre-built user interface components for React Native, the framework used to build mobile apps that run on both iOS and Android from a single codebase. It was created and is maintained by Wix, the website-building company. Rather than building every button, card, input field, and layout component from scratch, developers who use this library can import ready-made pieces and focus on their app's logic instead.

One of the main ideas behind the library is that it can be configured to match a custom visual design. The README walks through a three-step setup: first, you load your brand's colors, font sizes, and spacing values into the library's theming system; second, you set default visual properties for specific component types, like rounding the corners of all cards; third, you use those configured components in your screens and they automatically reflect your design choices. A small code example shows how a screen with a heading, a card, and a button looks after this setup.

The library is published as an npm package and is compatible with React Native version 0.60 and newer. Work is underway to support the newer React Native architecture, with React Native 0.77 listed as the next planned target. There is also a Figma design library available for designers who want to prototype with the same components before writing code, and an Expo demo app you can install on a phone to browse the component collection interactively.

Documentation, setup instructions, and component references are hosted on a separate website linked from the README. A Discord channel is available for community questions.

Where it fits