RNUI

UI Components Library for React Native

Component ToolkitReact Native
wix/react-native-ui-libwix.github.io/react-native-ui-lib/react-native-ui-lib

README


Check out our [Docs](https://wix.github.io/react-native-ui-lib/).
Our Discord Channel

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. ```js
  2. // FoundationConfig.js

  4. import {Colors, Typography, Spacings} from 'react-native-ui-lib';

  6. Colors.loadColors({
  7.   primaryColor: '#2364AA',
  8.   secondaryColor: '#81C3D7',
  9.   textColor: '##221D23',
  10.   errorColor: '#E63B2E',
  11.   successColor: '#ADC76F',
  12.   warnColor: '##FF963C'
  13. });

  15. Typography.loadTypographies({
  16.   heading: {fontSize: 36, fontWeight: '600'},
  17.   subheading: {fontSize: 28, fontWeight: '500'},
  18.   body: {fontSize: 18, fontWeight: '400'}
  19. });

  21. Spacings.loadSpacings({
  22.   page: 20,
  23.   card: 12,
  24.   gridGutter: 16
  25. });
  26. ```

Step 2


Set default configurations to your components

  1. ```js
  2. // ComponentsConfig.js

  4. import {ThemeManager} from 'react-native-ui-lib';

  6. // with plain object
  7. ThemeManager.setComponentTheme('Card', {
  8.   borderRadius: 8
  9. });

  11. // with a dynamic function
  12. ThemeManager.setComponentTheme('Button', (props, context) => {
  13.   // 'square' is not an original Button prop, but a custom prop that can
  14.   // be used to create different variations of buttons in your app
  15.   if (props.square) {
  16.     return {
  17.       borderRadius: 0
  18.     };
  19.   }
  20. });
  21. ```

Step 3


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

  1. ```jsx
  2. // MyScreen.js

  4. import React, {Component} from 'react';
  5. import {View, Text, Card, Button} from 'react-native-ui-lib';

  7. class MyScreen extends Component {
  8.   render() {
  9.     return (
  10.       <View flex padding-page>
  11.         <Text heading marginB-s4>
  12.           My Screen
  13.         </Text>
  14.         <Card height={100} center padding-card marginB-s4>
  15.           <Text body>This is an example card </Text>
  16.         </Card>

  18.         <Button label="Button" body bg-primaryColor square></Button>
  19.       </View>
  20.     );
  21.   }
  22. }
  23. ```

Contributing

See Contribution Guide