explaingit

wix/react-native-ui-lib

7,133TypeScriptAudience · developerComplexity · 2/5Setup · easy

TLDR

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.

Mindmap

mindmap
  root((react-native-ui-lib))
    What it does
      Pre-built components
      Custom theming
      Brand colors
    Tech Stack
      TypeScript
      React Native
      Expo
    Use Cases
      Mobile app UI
      Brand theming
      Rapid prototyping
    Setup
      npm package
      Figma library
      Demo app
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Build an iOS and Android app from one codebase using ready-made buttons, cards, and input fields without coding them from scratch.

USE CASE 2

Apply your brand's colors and typography across all app components by configuring the theming system once.

USE CASE 3

Preview components on a real phone using the Expo demo app before integrating them into your project.

USE CASE 4

Prototype app screens in Figma using the matching design library before writing any code.

Tech stack

TypeScriptReact NativenpmExpoFigma

Getting it running

Difficulty · easy Time to first run · 30min

Requires React Native 0.60 or newer and an existing React Native project setup.

In plain English

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.

Copy-paste prompts

Prompt 1
Set up react-native-ui-lib in my React Native project and configure a custom color palette with my brand's primary and secondary colors.
Prompt 2
Show me how to use the Card and Button components from react-native-ui-lib to build a product listing screen.
Prompt 3
How do I set a default border radius for all Card components globally in react-native-ui-lib's theming system?
Prompt 4
Migrate my existing React Native app to use react-native-ui-lib so all screens share consistent spacing and typography.
Open on GitHub → Explain another repo

← wix on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.