Installations

npm install react-native-ui-lib

Pull Requests

Open

23

Total

2,596

Closed

399

Merged

2,174

Issues

Open

77

Total

674

Closed

597

Releases

146

7.34.0

Published on 06 Nov 2024

7.33.0

Published on 30 Oct 2024

7.32.0

Published on 30 Sept 2024

7.31.0

Published on 18 Sept 2024

7.30.0

Published on 04 Sept 2024

7.29.0

Published on 21 Aug 2024

View all 146 releases

Developer

wix

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

>=18

Typescript Support

Yes

Node Version

20.18.0

NPM Version

10.8.2 Statistics

6,582 Stars

4,400 Commits

717 Forks

322 Watching

250 Branches

191 Contributors

Updated on 28 Nov 2024

Bundle Size

182.00 B

Minified

156.00 B

Minified + Gzipped

Bundlephobia

Languages

TypeScript (70.07%)

JavaScript (20.98%)

Objective-C (4.35%)

Java (3.32%)

SCSS (0.41%)

Objective-C++ (0.26%)

CSS (0.19%)

Ruby (0.18%)

Kotlin (0.12%)

Shell (0.08%)

HTML (0.04%)

Total Downloads

Cumulative downloads

Total Downloads

7,467,750

Last day

-2.3%

9,715

Compared to previous day

Last week

20.1%

61,790

Compared to previous week

Last month

-6.6%

226,312

Compared to previous month

Last year

165%

3,466,725

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

15

color lodash semver date-fns url-parse prop-types tinycolor2 memoize-one react-freeze react-native-redash commons-validator-js hoist-non-react-statics wix-react-native-text-size deprecated-react-native-prop-types babel-plugin-transform-inline-environment-variables

Peer Dependencies

5

react react-native react-native-ui-lib react-native-reanimated react-native-gesture-handler

Dev Dependencies

68

jest react eslint moment postcss prettier reassure react-dom @babel/cli babel-jest light-date postcss-js typescript @babel/core @types/jest object-hash shell-utils @types/react react-native @types/lodash @babel/runtime react-autobind prettier-eslint react-native-fs @types/url-parse react-native-svg @babel/preset-env @types/prop-types @types/tinycolor2 eslint-config-wix react-native-mmkv @babel/preset-react @shopify/flash-list @types/react-native babel-plugin-lodash eslint-plugin-react react-test-renderer @formatjs/intl-locale react-native-navigation react-native-reanimated @typescript-eslint/parser eslint-plugin-react-hooks @formatjs/intl-pluralrules @react-native/babel-preset @react-native/metro-config @types/react-test-renderer eslint-plugin-react-native @formatjs/intl-numberformat @react-native/eslint-config @react-native-community/blur @testing-library/react-hooks babel-plugin-module-resolver react-native-gesture-handler react-native-haptic-feedback react-native-linear-gradient react-native-svg-transformer @formatjs/intl-datetimeformat @testing-library/react-native @types/hoist-non-react-statics @react-native-community/netinfo @react-native/typescript-config metro-react-native-babel-preset @typescript-eslint/eslint-plugin react-native-shimmer-placeholder @formatjs/intl-getcanonicallocales @welldone-software/why-did-you-render @react-native-community/datetimepicker @babel/plugin-transform-modules-commonjs

Versions

UI Toolset & Components Library for React Native

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...)

1// FoundationConfig.js
2
3import {Colors, Typography, Spacings} from 'react-native-ui-lib';
4
5Colors.loadColors({
6  primaryColor: '#2364AA',
7  secondaryColor: '#81C3D7',
8  textColor: '##221D23',
9  errorColor: '#E63B2E',
10  successColor: '#ADC76F',
11  warnColor: '##FF963C'
12});
13
14Typography.loadTypographies({
15  heading: {fontSize: 36, fontWeight: '600'},
16  subheading: {fontSize: 28, fontWeight: '500'},
17  body: {fontSize: 18, fontWeight: '400'}
18});
19
20Spacings.loadSpacings({
21  page: 20,
22  card: 12,
23  gridGutter: 16
24});

Step 2

Set default configurations to your components

1// ComponentsConfig.js
2
3import {ThemeManager} from 'react-native-ui-lib';
4
5// with plain object
6ThemeManager.setComponentTheme('Card', {
7  borderRadius: 8
8});
9
10// with a dynamic function
11ThemeManager.setComponentTheme('Button', (props, context) => {
12  // 'square' is not an original Button prop, but a custom prop that can
13  // be used to create different variations of buttons in your app
14  if (props.square) {
15    return {
16      borderRadius: 0
17    };
18  }
19});

Step 3

Use it all together. Your configurations will be applied on uilib components so you can use them easily with modifiers.

1// MyScreen.js
2
3import React, {Component} from 'react';
4import {View, Text, Card, Button} from 'react-native-ui-lib';
5
6class MyScreen extends Component {
7  render() {
8    return (
9      <View flex padding-page>
10        <Text heading marginB-s4>
11          My Screen
12        </Text>
13        <Card height={100} center padding-card marginB-s4>
14          <Text body>This is an example card </Text>
15        </Card>
16
17        <Button label="Button" body bg-primaryColor square></Button>
18      </View>
19    );
20  }
21}

Contributing

See Contribution Guide

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

9

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

5

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

4.5

/10

Last Scanned on 2024-11-18

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More