Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/wix/react-native-ui-lib

UI Components Library for React Native
https://github.com/wix/react-native-ui-lib

android components hacktoberfest ios react-native tools ui

Last synced: 2 months ago
JSON representation

UI Components Library for React Native

Host: GitHub
URL: https://github.com/wix/react-native-ui-lib
Owner: wix
License: mit
Created: 2017-02-08T09:55:18.000Z (over 7 years ago)
Default Branch: master
Last Pushed: 2024-04-11T17:18:19.000Z (3 months ago)
Last Synced: 2024-04-12T16:23:34.554Z (3 months ago)
Topics: android, components, hacktoberfest, ios, react-native, tools, ui
Language: TypeScript
Homepage: https://wix.github.io/react-native-ui-lib/
Size: 160 MB
Stars: 6,116
Watchers: 326
Forks: 685
Open Issues: 95
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE

Lists

awesome-stars - wix/react-native-ui-lib - UI Components Library for React Native (TypeScript)
awesome-uikit - react-native-ui-lib - native-ui-lib.svg?label=" /> - UI Components Library for React Native. [![Open-Source Software][OSS Icon]](https://github.com/wix/react-native-ui-lib) (Mobile UI Components / React Native)
awesome-stars - wix/react-native-ui-lib - UI Components Library for React Native (TypeScript)
awesome-stars - wix/react-native-ui-lib - UI Components Library for React Native (TypeScript)
rn-awesome - react-native-ui-lib
awesome-stars - react-native-ui-lib

README

        [![SWUbanner](https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner-direct.svg)](https://stand-with-ukraine.pp.ua)



     



UI Toolset & Components Library for React Native



     



---

[![Build Status](https://travis-ci.org/wix/react-native-ui-lib.svg?branch=master)](https://travis-ci.org/wix/react-native-ui-lib)

[![npm](https://img.shields.io/npm/v/react-native-ui-lib.svg)](https://www.npmjs.com/package/react-native-ui-lib)

[![NPM Downloads](https://img.shields.io/npm/dm/react-native-ui-lib.svg?style=flat)](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)

or open link in your devices

[expo ] [exp://exp.host/@vn.chemgio/rnuilib?release-channel=default](exp://exp.host/@vn.chemgio/rnuilib?release-channel=default)

## Installing

See setup instructions [here](https://wix.github.io/react-native-ui-lib/docs/getting-started/setup).

#### New Major Version 6.0

See [breaking changes](https://wix.github.io/react-native-ui-lib/docs/getting-started/v6)

#### 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/docs/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 

        

        

      

    );

  }

}

```

## Contributing

 See [Contribution Guide](https://github.com/wix/react-native-ui-lib/blob/master/CONTRIBUTING.md)