react-native-ui-lib
A comprehensive UI toolset and component library for React Native by Wix, offering pre-built components plus a design-system foundation layer (colors, typography, spacings) and a modifier-based styling syntax for rapidly composing theme-consistent screens.
Embed badge
[](https://opensources.dev/resource/react-native-ui-lib)MITPermissive — free to use in commercial and proprietary software, with attribution.View license →
Production readiness
4/5- Actively maintainedCommits in the last 6 months
- No known vulnerabilitiesNot yet scanned
- Clear, usable licenseMIT (permissive)
- Proven adoptionWidely used
- Has documentationDocumentation indexed
npm install react-native-ui-libOur analysis
A React Native UI component library maintained by Wix that bundles a wide set of ready-made components with a configurable design-system layer for foundations (colors, typography, spacings) and theming.
When to use react-native-ui-lib
Choose it when building React Native apps that need a broad catalog of polished components plus a centralized way to define a brand design system, and when the terse modifier syntax (e.g. `padding-page`, `bg-primaryColor`, `marginB-s4`) appeals for fast UI composition. Good for teams already in the Wix/Expo ecosystem or wanting a Figma-paired component kit.
When not to
Avoid if you target the web alongside native (Tamagui/gluestack are universal), if you want strict Material Design adherence (React Native Paper fits better), or if you need bleeding-edge New Architecture / latest RN version support — the project is still catching up there. The non-standard string-prop modifier API can also feel unidiomatic and harder to type-check than conventional style props.
Strengths
- Large breadth of components covering most app UI needs
- Built-in design-system primitives (Colors/Typography/Spacings) and ThemeManager for centralized theming
- Modifier syntax enables very concise layout and styling code
- Backed by Wix with a Figma library and active maintenance
- Written in TypeScript with Expo demo available
Trade-offs
- New React Native Architecture support lags (only up to RN 0.73 at time of docs, no firm timeline)
- Proprietary modifier string-prop API is a learning curve and diverges from standard RN styling
- Native-only — no web/universal rendering support
- Major version bumps (e.g. v6) introduce breaking changes
- Opinionated styling approach can be hard to override or mix with other libraries
Maturity
Mature and widely adopted (7k+ stars), maintained by Wix as a production library used internally, with regular releases, docs site, and Discord community; however New Architecture/recent-RN support is on the roadmap rather than complete.
Notes
React Native New Arc
We are working on upgrading our UI Library to support the new React Native Architecture. Currently, we support React Native 0.73, and we plan to support React Native 0.77 next. While we don’t have a timeline yet, this is part of our roadmap.
Links
Download our Expo demo app (You will need the Expo App) or open link in your devices [expo ] exp://exp.host/@vn.chemgio/rnuilib?release-channel=default
Installing
See setup instructions here.
New Major Version 6.0
See breaking changes
For React Native >= 0.60.0
please use react-native-ui-lib
For React Native < 0.60.0
please use react-native-ui-lib@^3.0.0
Create your own Design System in 3 easy steps
Step 1
Load your foundations and presets (colors, typography, spacings, etc...)
// FoundationConfig.js
import {Colors, Typography, Spacings} from 'react-native-ui-lib';
Colors.loadColors({
primaryColor: '#2364AA',
secondaryColor: '#81C3D7',
textColor: '##221D23',
errorColor: '#E63B2E',
successColor: '#ADC76F',
warnColor: '##FF963C'
});
Typography.loadTypographies({
heading: {fontSize: 36, fontWeight: '600'},
subheading: {fontSize: 28, fontWeight: '500'},
body: {fontSize: 18, fontWeight: '400'}
});
Spacings.loadSpacings({
page: 20,
card: 12,
gridGutter: 16
});
Step 2
Set default configurations to your components
// ComponentsConfig.js
import {ThemeManager} from 'react-native-ui-lib';
// with plain object
ThemeManager.setComponentTheme('Card', {
borderRadius: 8
});
// with a dynamic function
ThemeManager.setComponentTheme('Button', (props, context) => {
// 'square' is not an original Button prop, but a custom prop that can
// be used to create different variations of buttons in your app
if (props.square) {
return {
borderRadius: 0
};
}
});
Step 3
Use it all together. Your configurations will be applied on uilib components so you can use them easily with modifiers.
// MyScreen.js
import React, {Component} from 'react';
import {View, Text, Card, Button} from 'react-native-ui-lib';
class MyScreen extends Component {
render() {
return (
<View flex padding-page>
<Text heading marginB-s4>
My Screen
</Text>
<Card height={100} center padding-card marginB-s4>
<Text body>This is an example card </Text>
</Card>
<Button label="Button" body bg-primaryColor square></Button>
</View>
);
}
}