https://github.com/sticknet/react-native-ui-lib
https://github.com/sticknet/react-native-ui-lib
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/sticknet/react-native-ui-lib
- Owner: sticknet
- License: mit
- Created: 2022-06-08T14:46:17.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-06-08T14:47:09.000Z (about 4 years ago)
- Last Synced: 2024-12-29T11:44:55.923Z (over 1 year ago)
- Language: JavaScript
- Size: 700 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
UI Toolset & Components Library for React Native
---
[](https://travis-ci.org/wix/react-native-ui-lib)
[](https://www.npmjs.com/package/react-native-ui-lib)
[](https://www.npmjs.com/package/react-native-ui-lib)
Check out our [Docs](https://wix.github.io/react-native-ui-lib/).
Our [Discord Channel](https://discord.gg/2eW4g6Z)
Download our Expo demo app
(You will need the Expo App)
## Installing
See setup instructions [here](https://wix.github.io/react-native-ui-lib/getting-started/setup).
#### New Major Version 5.0
See [breaking changes](https://wix.github.io/react-native-ui-lib/getting-started/v5)
#### 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...)
```js
// 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
```js
// 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](https://wix.github.io/react-native-ui-lib/foundation/modifiers).
```jsx
// MyScreen.js
import React, {Component} from 'react';
import {View, Text, Card, Button} from 'react-native-ui-lib';
class MyScreen extends Component {
render() {
return (
My Screen
This is an example card
);
}
}
```