GitHub
6.6k
Created 8 years ago, last commit 9 hours ago
154 contributors
4.42k commits
Stars added on GitHub, month by month
12
1
2
3
4
5
6
7
8
9
10
11
2023
2024
Stars added on GitHub, per day, on average
Yesterday
+4
Last week
+1.9
/day
Last month
+1.7
/day
Last 12 months
+2.0
/day
npmPackage on NPM
Monthly downloads on NPM
12
1
2
3
4
5
6
7
8
9
10
11
2023
2024
README

SWUbanner

UI Toolset & Components Library for React Native


Build Status npm NPM Downloads Follow on Twitter

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>
    );
  }
}

Contributing

See Contribution Guide