# React Native UI Lib — Production-Ready Component Library by Wix

> Comprehensive React Native UI toolkit by Wix with customizable components, theming, animations and accessibility for building polished mobile apps.

## Install

Save in your project root:

# React Native UI Lib — Production-Ready Component Library by Wix

## Quick Use
```bash
npm install react-native-ui-lib
```
```jsx
import { View, Text, Button, Colors } from 'react-native-ui-lib';

export default function App() {
  return (
    <View flex center>
      <Text text50>Hello</Text>
      <Button label="Press Me" backgroundColor={Colors.blue30} />
    </View>
  );
}
```

## Introduction
React Native UI Lib (RNUI) is a comprehensive component library built and maintained by Wix for React Native applications. It provides a rich set of production-tested UI components with built-in theming, animations, and accessibility, designed for building polished mobile apps on both iOS and Android.

## What React Native UI Lib Does
- Provides 60+ production-ready components: buttons, cards, dialogs, pickers, lists, and form inputs
- Offers a design token system (Colors, Typography, Spacings) for consistent theming across the app
- Includes gesture-driven components like swipeable lists, pannable views, and draggable elements
- Supports dark mode with automatic color adaptation via the theming engine
- Delivers accessibility features including screen reader labels and keyboard navigation

## Architecture Overview
RNUI is built as a modular component library on top of React Native's core primitives. It uses a centralized theming layer where design tokens (colors, typography scales, spacing units) are registered globally and consumed by all components. Components are composed from smaller building blocks, making them extensible. Animations use React Native Reanimated for performant, native-thread execution.

## Self-Hosting & Configuration
- Install via npm and link any required native dependencies for your React Native version
- Configure global theme presets by calling Colors.loadColors(), Typography.loadTypographies(), and Spacings.loadSpacings() at app startup
- Import individual components to keep bundle size minimal via tree shaking
- Customize component styles using the modifiers system (margin, padding, flex, background, etc.)
- Use the built-in incubator namespace for experimental components before they reach stable

## Key Features
- Modifier-based styling that applies layout and appearance via component props (e.g., flex, center, bg-red)
- Design token registry for colors, typography, and spacing that propagates to all components
- Native-performance animations powered by React Native Reanimated
- Dark mode and RTL support with minimal configuration
- Battle-tested in Wix's own production mobile applications

## Comparison with Similar Tools
- **React Native Paper** — Material Design components; RNUI is design-system-agnostic with a custom modifier system
- **React Native Elements** — community UI kit with basic components; RNUI offers more advanced components and theming depth
- **NativeBase** — utility-first styling with cross-platform support; RNUI provides a richer component library with animation integration
- **Gluestack UI** — NativeBase successor with web and native targets; RNUI focuses on native mobile with production-grade components
- **Tamagui** — cross-platform UI with optimizing compiler; RNUI is mobile-focused with a simpler API and broader component set

## FAQ
**Q: Does RNUI work with Expo?**
A: Yes. Most components work out of the box with Expo. Some gesture-based components may need expo-dev-client for native module support.

**Q: Can I use RNUI with an existing design system?**
A: Yes. Override the default design tokens (colors, typography, spacings) at initialization to match your design system.

**Q: How does the modifier system work?**
A: Modifiers are shorthand props on any RNUI component. For example, <View flex centerV paddingH-20> applies flexbox, vertical centering, and horizontal padding without writing StyleSheet objects.

**Q: Is RNUI actively maintained?**
A: Yes. Wix actively maintains and uses RNUI in their production apps, with regular releases and new components.

## Sources
- https://github.com/wix/react-native-ui-lib
- https://wix.github.io/react-native-ui-lib/

---
Source: https://tokrepo.com/en/workflows/asset-21def9bf
Author: AI Open Source